これはゲーム開発Canvasチュートリアルの10ステップのうち4番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson4.htmlで入手できます。

ボールは壁で自由に弾み、あなたはずっとそれを見ていることができますが、今の所何の対話要素もありません。操作できないものなんてゲームじゃありません! ですからユーザーとの対話要素、操作できるパドルを追加しましょう。

ボールにぶつかるパドルを定義する

そういうわけで、ボールに当てるパドルが必要になりました。パドルに用いるいくつかの変数を定義しましょう。次の変数を、他の変数と一緒にコードの一番上に追加してください。

var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;

ここではパドルの高さと幅、x軸上の開始地点を定義しています。続くコードではこれらを用いてさらなる計算が行われます。パドルを画面上に表示する関数を作成しましょう。drawBall()のすぐ下に次の関数を追加してください。

function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

パドルを操作できるようにする

こにパドルを描画しても良いですが、ユーザーの行動に応答する必要があります。キーボード操作を実装するのです。必要なものは次のとおりです。

  • 左の操作ボタンが押されているか、右の操作ボタンが押されているかという情報を保存する2つの変数。
  • keydownイベントとkeyupイベントの2つのイベントリスナー。ボタンが押されたときにパドルの動きを扱うコードを走らせたいのです。
  • keydownイベントとkeyupイベントを扱い、ボタンが押されたときに実行されるコード。
  • パドルを左や右に動かす機能

押されているボタンはこのとおり、ブーリアン値として定義、初期化できます。このコードをどこか他の変数の近くに追記してください。

var rightPressed = false;
var leftPressed = false;

最初は制御ボタンは押されていないため、どちらにおいてもデフォルトの値はfalseです。ボタンが押されたのを検知するため、2つのイベントリスナーを設定します。JavaScriptの最後にあるsetInterval()の行のちょうど上に次のコードを追記してください。

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

キーボードのキーのどれかに対してkeydownイベントが発火したとき (どれかが押されたとき) 、keyDownHandler()関数が実行されます。2つ目のリスナーについても同様で、(そのキーが押されなくなったき) keyupイベントはkeyUpHandler()関数を呼び出します。自分のaddEventListener()の行の下に次のコードを追記してください。

function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
    }
}

function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
    }
}

キーが押されたとき、その情報は変数に保存されます。それぞれの場合で関連する変数がtrueに設定されます。キーが離されたときに変数はfalseに戻されます。

どちらの関数も変数eで表されるイベントをパラメーターとしてとります。これから有用な情報が手に入ります。keyCodeは押されたキーについての情報を持っています。例えばキーコード37は左カーソルキーで39は右カーソルキーです。もし左カーソルが押されたら、変数leftPressedtrueに、離されたら変数leftPressedfalseに設定されます。右カーソルと変数rightPressedについても同様です。

パドルの移動ロジック

押されているキーについての情報を保存している変数、そして関連する関数が設定されました。ではそれらを使う実際のコードに手を入れて画面上のパドルを動かしてみましょう。draw()関数の中で、各々のフレームを描画するときに左カーソルキーが押されているか、右カーソルが押されているか確認しましょう。次のようなコードになっているでしょう。

if(rightPressed) {
    paddleX += 7;
}
else if(leftPressed) {
    paddleX -= 7;
}

左カーソルが押されていたら7ピクセル左に動き、右カーソルが押されていたら7ピクセル右に動きます。これだけでも良さそうですが、どちらかのキーを長く押し続けたらパドルがCanvasの縁から消えてしまいます。コードを次のように変えることでCanvasの境界内でのみ動くように改善できます。

if(rightPressed && paddleX < canvas.width-paddleWidth) {
    paddleX += 7;
}
else if(leftPressed && paddleX > 0) {
    paddleX -= 7;
}

ここで用いられている位置paddleXは期待されているように左端の0と右端のcanvas.width-paddleWidth間で動きます。

上記のコード片をdraw()関数の最後、閉じ波括弧のちょうど前に追記してください。

あとはdrawPaddle()関数をdraw()関数から呼び出し、実際に画面に表示するようにすれば完了です。次の行をdraw()関数の、ちょうどdrawBall()を呼ぶ行の下に追記してください。

drawPaddle();

自分のコードと比べる

自分のコードと比べられる、実際に動くコードがこちらになります。

 

 

練習: パドルを速く、または遅く動くようにしたり、大きさを変えたりしてみましょう。

次のステップ

ゲームっぽい要素を追加しましょう。今問題なのはただパドルでボールを永遠に打ち続けることしか出来ないという点です。これは第5章、ゲームオーバーでゲームの終了状態を追加することで完全に変わることになります。

ドキュメントのタグと貢献者

 このページの貢献者: nekomanma
 最終更新者: nekomanma,