【JavaScript】からふるおえかき！【ジョークスクリプト：マウス操作専用】
どうも！LSSです！！
マウスイベントを使用した、ちょっとしたジョークスクリプトを書いてみました。
遊び方
この記事の画面上のどこでも、マウスの左ボタンを押しながらマウスカーソルを移動すると、色付きの◆が動かしたマウスの軌跡に沿って描かれます。
色は勝手に変わるので、ただ線を引くだけでカラフルになりますｗ
ある程度、◆を置くと古いものから消えていきます。
また、↑の「全部消す」をクリックするとこれまで描いたものが消え、「おえかきをやめる」をクリックするとそれ以降はお絵描きしなくなります。（再開したい場合は記事を再読み込みしてください）
一応、コード
<style><!--
#gamen{position:absolute;top:0px;left:0px;}
.km{position:absolute;text-shadow:0px 0px 5px white;}
--></style>
<div id="gamen"> </div>
<script>// <![CDATA[
txt='';
for(i=0;i<1000;i++){
txt+='<div id="g'+i+'" class="km">'+i+'</div>';
}
gamen.innerHTML=txt;
flg=false;
mi=0;
document.body.addEventListener("mousemove",mm,false);
function mm(ev){
if(ev.buttons==1){
document.getElementById("g"+mi).innerHTML='◆';
document.getElementById("g"+mi).style.left=ev.pageX+'px';
document.getElementById("g"+mi).style.top=ev.pageY+'px';
document.getElementById("g"+mi).style.color='hsl('+mi%360+',100%,50%)';
mi++;
mi%=1000;
window.getSelection().collapse(document.body, 0);
}
}
function mcls(){
for(i=0;i<1000;i++){
document.getElementById("g"+i).innerHTML='';
document.getElementById("g"+i).style.left='0px';
document.getElementById("g"+i).style.top='0px';
}
mi=0;
}
function mstop(){
document.body.removeEventListener("mousemove",mm,false);
}
// ]]></script>
<p><a href="#" onclick="mcls();return false">全部消す</a> <a href="#" onclick="mstop();return false">おえかきをやめる</a></p>
スマホの方ごめんなさい
今回もまた、マウス専用になります^^;
タッチ操作でも似たような事ができそうではありますが、ちょっとだけややこしそうなので先送りします。
ちなみに、
↑こんな事ができます、って記事になっていますｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
