javascriptとcanvasで作るパドルボールゲーム

ソースコードの解説

ボールを弾ませる方法は、ボールの中心座標と、canvasの周囲との距離が、ボールの半径とちょうど等しくなったとき、動く向きを変える。

ボールの反射条件

  • ボールの中心座標 > canvasの長さ – ボールの半径
  • ボールの中心座標 < ボールの半径

ボタンをブーリアン値として定義、初期化。

var rightPressed = false;
var leftPressed = false;

ボタンを押す、離すを検知するため、2つのイベントリスナーを設定

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

Canvasの境界内でのみ動くようにする。

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

コメント

タイトルとURLをコピーしました