![見出し画像](https://assets.st-note.com/production/uploads/images/103527852/rectangle_large_type_2_ce269c7ffa91a8e8127367c645f81f54.png?width=1200)
やっぱりJavaScript! - やっぱりゲーム!5
ゲームオーバーの条件を決めていきます。あとパドルにあたれば跳ね返すようにもします。
ゲームの止め方ですが、
clearInterval()
を使えば止まります。
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);
}
}
とするとうまくパドルに当たった時のみ跳ね返るようになります。
この記事が気に入ったらサポートをしてみませんか?