やっぱりJavaScript! - やっぱりゲーム！5

ゲームオーバーの条件を決めていきます。あとパドルにあたれば跳ね返すようにもします。

ゲームの止め方ですが、

clearInterval()

を使えば止まります。

clearInterval() - Web API | MDN

setInterval() で作る繰り返し動作を取り消します。

使う準備ですが、まず変数を作ります。

const interval = setInterval(draw, 10);

引数に入れてやります。

clearInterval(interval)

でゲーム(繰り返し)を止めることができます。

条件としては

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

else if (y + dy > canvas.height-ballRadius)

ボールが下の端を越えれば"Game Over"とアラートを出して

clearInterval(interval);

止めます。

パドルを追加したコード。これでパドルで打ち返すことができます。

  if (x > paddleX && x < paddleX + paddleWidth) {

パドルにあたれば

    dy = -dy;

跳ね返ります。

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

の部分を

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);
  }
}

とするとうまくパドルに当たった時のみ跳ね返るようになります。