Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【JavaScript】からふるおえかき!【ジョークスクリプト:マウス操作専用】

 どうも!LSSです!!

 

 マウスイベントを使用した、ちょっとしたジョークスクリプトを書いてみました。

 

  

遊び方

 

全部消す おえかきをやめる

 

この記事の画面上のどこでも、マウスの左ボタンを押しながらマウスカーソルを移動すると、色付きのが動かしたマウスの軌跡に沿って描かれます。

色は勝手に変わるので、ただ線を引くだけでカラフルになりますw

 

ある程度、◆を置くと古いものから消えていきます。

また、↑の「全部消す」をクリックするとこれまで描いたものが消え、「おえかきをやめる」をクリックするとそれ以降はお絵描きしなくなります。(再開したい場合は記事を再読み込みしてください)

 

 

 

 

 

 

 

 

一応、コード

<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>

 

 

スマホの方ごめんなさい

今回もまた、マウス専用になります^^;

タッチ操作でも似たような事ができそうではありますが、ちょっとだけややこしそうなので先送りします。

 

ちなみに、

f:id:little_strange:20200918225906p:plain

↑こんな事ができます、って記事になっていますw

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^