マウス操作
これはゲーム開発Canvasチュートリアル (en-US)の10ステップのうち9番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson9.htmlで入手できます。
ゲーム自体は実際に完成したので、磨き上げにかかりましょう。既にキーボード操作を追加していますが、マウス操作も簡単に追加できます。
マウスの動作を監視する
マウスの操作を監視するのはキー入力を監視するのよりも簡単です。mousemove (en-US)イベントのリスナーさえあればよいのです。次の行を、他のイベントリスナーの近く、keyup eventのすぐ下に追記してください。
document.addEventListener("mousemove", mouseMoveHandler, false);パドルの動きをマウスの動きと紐付ける
パドルの位置をカーソルの座標に基づいて更新することができます。次のハンドラ関数は実際にそれを行います。次の関数を自分のコードの、先程追記したコードのすぐ下に追記しましょう。
function mouseMoveHandler(e) {
var relativeX = e.clientX - canvas.offsetLeft;
if(relativeX > 0 && relativeX < canvas.width) {
paddleX = relativeX - paddleWidth/2;
}
}この関数ではまずビューポートの水平方向のマウスの位置 (e.clientX) からキャンバスの左端とビューポートの左端の距離 (canvas.offsetLeft) をひいてrelativeXの値を導出します。これはキャンバスの左端とマウスカーソルの距離とちょうど同じになります。もしカーソルの相対X座標が0より大きくCanvasの幅より小さいのならば、カーソルはキャンバス内にあります。また、座標paddleX (パドルの左端と紐付けられている) は、パドルの中点で対称に動くようにrelativeXの値からパドルの幅の半分をひいた値に設定されます。
パドルはマウスカーソルの位置を追うようになりますが、動きをCanvasの大きさに制限しているため、両端で消え失せてしまうようなことはありません。
自分のコードと比べる
比較用にコードの最新の状態を示します。
練習: パドル動作の境界を調節して、Canvasの両端でもパドルの半分ではなく全体が見えるようにしてください。