ゲームを作ろ！-MDN web docs(ブロック崩し)-5

ゲームオーバー

ゲームなので何らかの方法で勝ち負け、終わりのしくみが必要です。ブロック崩しだとボールがパドルで拾えなかった時にゲームオーバーとなります。しくみとしてはパドルがある壁にぶつかったら終了ということにします。今作っているものでは4辺全てで跳ね返るようになっていますが、パドルがある辺については除きます。

今現状では上下の壁については以下のようになています。

if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
   dy = -dy;
}

ここで下辺については

y + dy > canvas.height-ballRadius

で表現されているのでこれを使ってまず下辺に当たれば跳ね返らずに"Game Over"とアラートを出すようにします。

if(y + dy < ballRadius) {
   dy = -dy;
} else if(y + dy > canvas.height-ballRadius) {
   alert("GAME OVER");
   document.location.reload();
   clearInterval(interval);
}

document.location.reload()

については再読み込みさせる命令で以下のコード

clearInterval(interval);

を実行できるようにします。アラートが出たら終了させます。

次にゲームなので下辺の壁に当てないように防御が必要です。パドルを動かしパドルに当てることでそれを阻止でき流ようにします。

パドルのある部分、パドルの左端と右端の間にボウルがあるときは跳ね返るようにします。パドルの左端と右端については

x > paddleX && x < paddleX + paddleWidth

で取得できるので、ボールがパドルの範囲にある時には符号を逆にすることで跳ね返ります。

if(y + dy < ballRadius) {
   dy = -dy;
} else if(y + dy > canvas.height-ballRadius) {
   if(x > paddleX && x < paddleX + paddleWidth) {
       dy = -dy;
   }
   else {
       alert("GAME OVER");
       document.location.reload();
   }
}

全コードです。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function keyDownHandler(e) {
   if(e.key == "Right" || e.key == "ArrowRight") {
       rightPressed = true;
   }
   else if(e.key == "Left" || e.key == "ArrowLeft") {
       leftPressed = true;
   }
}
function keyUpHandler(e) {
   if(e.key == "Right" || e.key == "ArrowRight") {
       rightPressed = false;
   }
   else if(e.key == "Left" || e.key == "ArrowLeft") {
       leftPressed = false;
   }
}
function drawBall() {
   ctx.beginPath();
   ctx.arc(x, y, ballRadius, 0, Math.PI*2);
   ctx.fillStyle = "#0095DD";
   ctx.fill();
   ctx.closePath();
}
function drawPaddle() {
   ctx.beginPath();
   ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
   ctx.fillStyle = "#0095DD";
   ctx.fill();
   ctx.closePath();
}
function draw() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   drawBall();
   drawPaddle();
   
   if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
       dx = -dx;
   }
   if(y + dy < ballRadius) {
       dy = -dy;
   }
   else if(y + dy > canvas.height-ballRadius) {
       if(x > paddleX && x < paddleX + paddleWidth) {
           dy = -dy;
       }
       else {
           alert("GAME OVER");
           document.location.reload();
           clearInterval(interval); 
       }
   }
   
   if(rightPressed && paddleX < canvas.width-paddleWidth) {
       paddleX += 7;
   }
   else if(leftPressed && paddleX > 0) {
       paddleX -= 7;
   }
   
   x += dx;
   y += dy;
}
var interval = setInterval(draw, 10);