【レッスン#9】 「マウスイベント」を学ぶプログラミング教材

プログラミング教材#9ではユーザーのマウス操作に反応する処理を学びます。マウスをトリガーとした処理を覚えることでゲームやアートなど様々な可能性が広がります。

プログラミング教材#9の概要

プログラミング教材#9のサンプルコード①

See the Pen 教材#9-1 by programmingbird (@programmingbird) on CodePen.

クリックした場所に円を描く

このサンプルコード①では、画面上のクリックした場所に黒い円が現れます。

簡単なことのようですが、「マウスがクリックされたら」といういままでに無かった新しい「トリガー」を手に入れられる重要なサンプルコードです。またマウスカーソルの座標を取得する方法も学びます。

プログラミング教材#9 サンプルコード①の解説

JavaScript // 変数の準備

var x = 0;
var y = 0;

冒頭でx,yという2つの変数を準備しています。のちほどマウスカーソルの座標を入れるために使います。

JavaScript //「トリガー」の設定

canvas.addEventListener("click", mouseClick, false);

新しく出てきた”click”というイベントは、マウスがクリックされたら、というJavaScriptにもともと用意されているイベントの一つです。これを「トリガー」として実行する「アクション」はユーザー定義関数mouseClickを指定しています。

JavaScript //「アクション」の設定

function mouseClick(e) {
   x = e.offsetX;
   y = e.offsetY;
   context.beginPath();
   context.arc(x, y, 10, 0, Math.PI * 2);
   context.fill();
}

mouseClickの引数eには自動的にマウスイベントが渡され、x = e.offsetXのように書くことでxにマウスカーソルのx座標を入れることができます。尚、offsetXというのは今の場合、canvasの左端からの距離(ピクセル単位)という意味になります。

こうして得られた現在のマウスカーソルの座標x,yを使って、クリックされるたびにその場所に円を描いているわけです。

また、今回のポイントとはずれますが、プログラミング教材#8 グラフィックの描画で学んだcontext.stroke()ではなく、context.fill()とすることで線画ではなく塗りつぶし図形を描くことができます。

マウスが動くたびに処理をする

プログラミング教材#9のサンプルコード②

See the Pen 教材#9-2 by programmingbird (@programmingbird) on CodePen.

サンプルコード②を実行してみてください。今度はクリックしなくてもマウスカーソルの動きにそって円がどんどん描かれていきます。なかなか楽しいサンプルです。これは「マウスがちょっとでも動いたら」という「トリガー」を使って実現しています。

プログラミング教材#9 サンプルコード②の解説

JavaScript //「トリガー」の設定

canvas.addEventListener("mousemove", mouseMove, false);

サンプルコード①のときは”click”イベントでしたが、今回は”mousemove“というイベントを利用しています。文字通り「マウスが動いたら」という意味です。本当にほんのわずかでも動いたらこのイベントが発生したことになり、アクションが実行されます。アクションとして実行するユーザー定義関数名はmouseMoveとしています。

JavaScript //「アクション」の設定

function mouseMove(e) {
   x = e.offsetX;
   y = e.offsetY;
   context.beginPath();
   context.arc(x, y, 10, 0, Math.PI * 2);
   context.stroke();
}

基本的にはサンプルコード①とまったく同じですね。一箇所、円を描く部分のみfill()ではなくstroke()にしています。マウスカーソルが動いた軌跡がよりわかりやすく面白い絵になるかなと思ったためです。もちろんfill()にしても円が塗りつぶしになるだけで動きは同じです。

これを応用すれば簡単なお絵かきアプリが作れそうです。ぜひ挑戦してみてください。線の太さを変えてみたい、色も変えてみたい、途中で線を切れるようにしたい、など「やりたいこと」が出てきたらどんどん検索して調べてみましょう。例えば「javascript storke 色」のように。そしてCodePen上で自由に自分のコードを書いて実行してみましょう。これこそがプログラミング上達の近道です。