JavaScript＆HTML5講座 (C)WorldWideSoftware

1-9 マウス、タップ、キー入力の判定

本項ではマウス操作とタップ入力の判定、そしてキーボードからの入力判定について解説します。

(1)マウス操作の判定

マウスをキャンバス上で動かしたり、ボタンをクリックした時の判定を行うソースコードです。パソコンによる入力を前提としたプログラムになっています。スマートフォンやタブレットのタッチ入力は(2)で解説します。
example191.html　←　動作の確認
※パソコンでご確認下さい
ソースコードは次のようになります。

01	<!DOCTYPE html>
02	<html lang="ja">
03	<head>
04	<meta charset="utf-8">
05	<title>JavaScriptのテストプログラム</title>
06	</head>
07	<body>
08	<canvas id="bg"></canvas>
09	<script>
10	var winW = window.innerWidth;
11	var winH = window.innerHeight;
12	var canvas = document.getElementById("bg");
13	canvas.width = winW;
14	canvas.height = winH;
15	var cnt = canvas.getContext("2d");
16	cnt.font = (winW/20)+"px monospace";
17	cnt.textAlign = "center";
18
19	//マウス判定用の変数
20	var mouseX = 0;
21	var mouseY = 0;
22	var mouseC = 0;
23
24	drawVariable();
25
26	canvas.addEventListener( "mousedown", mouseDown );
27	canvas.addEventListener( "mousemove", mouseMove );
28	canvas.addEventListener( "mouseup", mouseUp );
29
30	function mouseDown(event) {
31	var rect = event.target.getBoundingClientRect();
32	mouseX = event.clientX-rect.left;
33	mouseY = event.clientY-rect.top;
34	mouseC = 1;
35	drawVariable();
36	}
37
38	function mouseMove(event) {
39	var rect = event.target.getBoundingClientRect();
40	mouseX = event.clientX-rect.left;
41	mouseY = event.clientY-rect.top;
42	drawVariable();
43	}
44
45	function mouseUp(event) {
46	mouseC = 0;
47	drawVariable();
48	}
49
50	function drawVariable() {
51	cnt.fillStyle = "#000";
52	cnt.fillRect( 0, 0, winW, winH );
53	cnt.fillStyle = "#FFF";
54	var y = winH/4;
55	cnt.fillText( "mouseX="+mouseX, winW/2, y*1 );
56	cnt.fillText( "mouseY="+mouseY, winW/2, y*2 );
57	cnt.fillText( "mouseC="+mouseC, winW/2, y*3 );
58	}
59	</script>
60	</body>
61	</html>

今回はキャンバスの大きさをcanvas要素に記述せず、JavaScriptでブラウザの内側と同じサイズにしています。具体的には、

var winW = window.innerWidth;
var winH = window.innerHeight;

でブラウザの内側の幅と高さを取得し、

canvas.width = winW;
canvas.height = winH;

としてキャンバスの幅と高さを設定しています。

マウス入力を判定するためにイベントリスナ addEventListener() を用い、次のように記述します。

target.addEventListener( イベントの種類, イベントが発生した時に働く関数 );
※addEventListenerは第三引数を指定できますが、通常省略して構いません

今回はマウスの動作をキャンバスで受け取るためにtargetをcanvasとしています。
このイベントリスナで３種類のイベントを判定しています。

mousedown	マウスボタンを押した時
mousemove	マウスポインタを動かした時
mouseup	マウスボタンを放した時

それぞれのイベントが発生した時に働く関数は次のように記述し、()内に記述した変数（正確にはイベントオブジェクトといいます）でイベントの内容を受け取ります。

function 関数名(event) { イベントが発生した時に行う処理 }

マウスボタンを押した時の処理を見てみましょう。

function mouseDown(event) {
var rect = event.target.getBoundingClientRect();
mouseX = event.clientX-rect.left;
mouseY = event.clientY-rect.top;
mouseC = 1;
drawVariable();
}

eventの属性（プロパティ）でマウスの挙動を判定することができます。具体的には event.clientX と event.clientY でマウスポインタの座標を取得できます。この座標はブラウザのクライアント座標（下図の白い領域の座標）となりますので、キャンバスの左上角を原点座標(0,0)とするために
clientX - rect.left
clientY - rect.top
とします。
下図の矢印部分の値が rect.left と rect.top となります。

マウスボタンを押した時に変数mouseCを1にし、放した時に0にしています。 drawVariable()で取得したマウスポインタの座標とボタンの値を表示しています。

その他のマウスイベント
マウスの判定は他に、click（クリックした時）、dblclick（ダブルクリックした時）、contextmenu（右クリックした時）があります。開発するプログラムに必要なイベントを実装しましょう。

(2)タップ操作の判定

次にタップ操作の判定を解説します。このサンプルではキャンバスを画面いっぱいに広げています。これはcanvas要素のスタイル属性とJavaScriptのソースコードで実現します。このテクニックを使えば液晶画面の広い領域をゲーム画面にすることができ、ネイティブアプリ（各OS専用に開発されたアプリ）に近い画面構成が可能となります。
example192.html　←　動作の確認
※スマートフォンやタブレットなどタップ操作できる機器でご確認下さい
ソースコードは次のようになります。

01	<!DOCTYPE html>
02	<html lang="ja">
03	<head>
04	<meta charset="utf-8">
05	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0 user-scalable=no">
06	<title>JavaScriptのテストプログラム</title>
07	</head>
08	<body>
09	<canvas style="position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;" id="bg"></canvas>
10	<script>
11	var winW = window.innerWidth;
12	var winH = window.innerHeight;
13	var canvas = document.getElementById("bg");
14	canvas.width = winW;
15	canvas.height = winH;
16	var cnt = canvas.getContext("2d");
17	cnt.font = (winW/20)+"px monospace";
18	cnt.textAlign = "center";
19
20	//タッチ判定用の変数
21	var touchX = 0;
22	var touchY = 0;
23	var touchC = 0;
24
25	drawVariable();
26
27	canvas.addEventListener( "touchstart", touchStart );
28	canvas.addEventListener( "touchmove", touchMove );
29	canvas.addEventListener( "touchend", touchEnd );
30	canvas.addEventListener( "touchcancel", touchCancel );
31
32	function touchStart(event) {
33	event.preventDefault();//キャンバスの選択やスクロール等が行われないようにする
34	var rect = event.target.getBoundingClientRect();
35	touchX = event.touches[0].clientX-rect.left;
36	touchY = event.touches[0].clientY-rect.top;
37	touchC = 1;
38	drawVariable();
39	}
40
41	function touchMove(event) {
42	event.preventDefault();
43	var rect = event.target.getBoundingClientRect();
44	touchX = event.touches[0].clientX-rect.left;
45	touchY = event.touches[0].clientY-rect.top;
46	drawVariable();
47	}
48
49	function touchEnd(event) {
50	touchC = 0;
51	drawVariable();
52	}
53
54	function touchCancel(event) {
55	touchC = 9;
56	drawVariable();
57	}
58
59	function drawVariable() {
60	cnt.fillStyle = "#00a";
61	cnt.fillRect( 0, 0, winW, winH );
62	cnt.fillStyle = "#FFF";
63	var y = winH/4;
64	touchX = Math.floor(touchX);
65	touchY = Math.floor(touchY);
66	cnt.fillText( "touchX="+touchX, winW/2, y*1 );
67	cnt.fillText( "touchY="+touchY, winW/2, y*2 );
68	cnt.fillText( "touchC="+touchC, winW/2, y*3 );
69	}
70	</script>
71	</body>
72	</html>

このソースコードで使っているキャンバスを扱う際のテクニックを説明します。ポイントは次の３つです。

【ポイント１】　HTMLのmeta要素

スマートフォンやタブレットに備わっている画面の拡大縮小をゲーム中に行ってしまうと、画面が見えにくくなります。それを防ぐため、この記述でスケール（拡縮率）を1.0で固定し、画面の拡縮を行えないようにしています。

【ポイント２】　canvas要素に記述したスタイル属性

style="position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;"

これでキャンバスがブラウザの中央に配置されます。この記述の意味を理解するにはCSSついて詳しい知識が必要になりますが、（本講座はゲーム制作を主体にしていますので）皆さんは“キャンバスをブラウザ中央に配置するためにこう記述する”とお考え頂けば十分です。

【ポイント３】　JavaScriptのソースコードでキャンバスのサイズをブラウザ内の幅と高さとする

var winW = window.innerWidth;
var winH = window.innerHeight;
　：
canvas.width = winW;
canvas.height = winH;

これでキャンバスが画面いっぱいに広がった状態になります。

次にタップ操作の判定の説明です。マウス判定と同様に addEventListener() を用います。タップのイベントの種類は次のようになります。

touchstart	タップを始めた時
touchmove	指（もしくはペンなど）を動かしている時
touchend	タップを放した時
touchcancel	タップ操作が中断された時

touchcancelは液晶画面を操作中に電話の着信があった時や電源ボタンに触れてしまった際などに発生します。 iOS端末やAndroid端末で今回のサンプルを実行し、画面に触れた状態で電源ボタンを押してみましょう。キャンセルイベントの処理で touchC = 9; としていますので、画面に表示された値が9になります。

タップを始めた時に働く関数を見てみましょう。

function touchStart(event) {
event.preventDefault();//キャンバスの選択やスクロール等が行われないようにする
var rect = event.target.getBoundingClientRect();
touchX = event.touches[0].clientX-rect.left;
touchY = event.touches[0].clientY-rect.top;
touchC = 1;
drawVariable();
}

基本的にマウス判定と同じ処理ですが、タップでは座標を取得する命令を event.touches[0].～とします。
ポイントは event.preventDefault() 命令で、これを記述しておけば、 タップ時にキャンバスが選択されたり画面がスクロールして操作しにくくなるのを防ぐことができます。
取得したタップの座標は端末によっては小数になることがありますので、表示する際に Math.floor命令で整数にしています。

(3)キー入力の判定

本項の最後はキーボードによる入力の判定です。
example193.html　←　動作の確認
※パソコンでご確認下さい
ソースコードは次のようになります。

01	<!DOCTYPE html>
02	<html lang="ja">
03	<head>
04	<meta charset="utf-8">
05	<title>JavaScriptのテストプログラム</title>
06	</head>
07	<body>
08	<canvas id="bg"></canvas>
09	<script>
10	var winW = window.innerWidth;
11	var winH = window.innerHeight;
12	var canvas = document.getElementById("bg");
13	canvas.width = winW;
14	canvas.height = winH;
15	var cnt = canvas.getContext("2d");
16	cnt.font = (winW/3)+"px monospace";
17	cnt.textAlign = "center";
18	cnt.textBaseline = "middle";
19
20	var key = 0;
21	drawVariable();
22
23	window.onkeydown = function(event) {
24	key = event.keyCode;
25	drawVariable();
26	}
27
28	window.onkeyup = function(event) {
29	key = 0;
30	drawVariable();
31	}
32
33	function drawVariable() {
34	cnt.fillStyle = "#000";
35	cnt.fillRect( 0, 0, winW, winH );
36	cnt.strokeStyle = "#888";
37	cnt.strokeRect( 0, winH/2, winW, 1 );//横線
38	cnt.strokeRect( winW/2, 0, 1, winH );//縦線
39	cnt.fillStyle = "#FFF";
40	cnt.fillText( key, winW/2, winH/2 );
41	}
42	</script>
43	</body>
44	</html>

キー入力の判定には onkeydown と onkeyup を用います。

window.onkeydown = 関数;
window.onkeyup = 関数;

と記述し、それぞれの関数にキーを押した時、放した時の処理を記述します。今回は名称の無い関数 function(event){ 処理 } で記述しています。キーの値は event.keyCode で取得します。主なキーの値は次のようになります。

キー	event.keyCode
Enter	13
Shift	16
SPACE	32
←	37
↑	38
→	39
↓	40
0～9	48～57
A～Z	65～90

今回のソースコードでは cnt.textAlign = "center"; と cnt.textBaseline = "middle"; と記述して画面中心にキーの値を表示するようにしました。 textBaselineで座標(x,y)に表示する文字のy座標の相対位置を指定できます。画面の中心に縦横の線を表示していますので、textBaseline に "top" と "bottom" を指定し、表示位置がどのように変わるかご確認下さい。 textBaseline = "top"とすると横線（指定したy座標）の下側、textBaseline = "bottom"とすると上側に文字が表示されます。

前のページへ　／　次のページへ