Warning: Trying to access array offset on value of type bool in /home/fieldwalking/fieldwalking.jp/public_html/blog/wp-content/plugins/only-tweet-like-share-and-google-1/tweet-like-plusone.php on line 803

Warning: Undefined array key 0 in /home/fieldwalking/fieldwalking.jp/public_html/blog/wp-content/plugins/only-tweet-like-share-and-google-1/tweet-like-plusone.php on line 229

Warning: Trying to access array offset on value of type bool in /home/fieldwalking/fieldwalking.jp/public_html/blog/wp-content/plugins/only-tweet-like-share-and-google-1/tweet-like-plusone.php on line 803

Warning: Undefined array key 0 in /home/fieldwalking/fieldwalking.jp/public_html/blog/wp-content/plugins/only-tweet-like-share-and-google-1/tweet-like-plusone.php on line 229

あむちょです。

HTML5とjavaScriptによるWebアプリケーションを作る際のメモ

前回紹介した花火みたいなやつを、改良しようとして手間かかったので忘れないようにメモ。 クリックしたままで自動的に新しのを追加できるようにしました。クリックしたまま移動もできます。

Hanabi

で、とりあえずクリックに関するイベントを所得するために、標準でクリックダウン、クリックアップ、移動があるのだが押しっぱがない（ちゃんと探せばあるかも）。 とりあえずそれでやりくりしてみる

<br />
canvas=document.getElementById(&#8216;sel&#8217;);<br />
canvas.addEventListener(&amp;quot;mousemove&amp;quot;, mouseMoveHandler, false);<br />
canvas.addEventListener(&amp;quot;mousedown&amp;quot;, mouseDownHandler, false);<br />
canvas.addEventListener(&amp;quot;mouseup&amp;quot;, mouseUpHandler, false);<br />

まず最初にイベントリスナー登録。これでそれぞれのイベントの際、以下の関数が呼ばれる。

<br />
function mouseDownHandler(e)<br />
function mouseUpHandler(e)<br />
function mouseMoveHandler(e)<br />

でまずは押しっぱを検出するために、フラグを用意。

<br />
function mouseDownHandler(e){</p>
<p>    touchFlag=true;</p>
<p>    var mousex,mousey;<br />
    var rect = e.target.getBoundingClientRect();</p>
<p>    mousex=Math.floor(e.clientX &#8211; rect.left);<br />
    mousey= Math.floor(e.clientY &#8211; rect.top);</p>
<p>    tempX=mousex;<br />
    tempY=mousey;</p>
<p>    makeObj(mousex,mousey);<br />
}</p>
<p>function mouseUpHandler(e){</p>
<p>    touchFlag=false;<br />
}<br />

これでメインルーチンでtouchFlagをチェックすればマウスが押しっぱかわかる。makeObj関数は、新しい花火を生成するための関数です。

<br />
if(touchFlag){<br />
    time++;<br />
    if(time &amp;gt; 3){<br />
        time=0;<br />
        makeObj(tempX,tempY);<br />
    }<br />
}<br />

ただのクリックと分別するために一定の時間を用意して新しい花火を用意してます。 次にマウス移動に関するイベントで

<br />
function mouseMoveHandler(e){<br />
    if(!touchFlag)return;</p>
<p>    var rect = e.target.getBoundingClientRect();</p>
<p>    tempX=Math.floor(e.clientX &#8211; rect.left);<br />
    tempY=Math.floor(e.clientY &#8211; rect.top);<br />
}<br />

これでマウスを移動した際、クリックされたままだったら、その座標値が保存され、メインルーチンで新しい花火を生成する時の座標値で使われます。

これでHTML関連のアクセスが増えたらいいな（競合多し！）

　[ad]