JavaScript ボール壁に2回衝突で停止

実現したいこと

壁にボールが2回当たったら、ボールの動きを停止させたいです。

現在JavaScriptでピンボールゲームを作成しておりまして、
下記のコードでは、「ボタン」をクリックしたら青色のボールが発射して
上部の壁に当たるとボールが止まるという処理になっております。

上下左右かかわらず、壁に2回当たったらボールを停止させるという処理に書き換えたいのですが、
良い方法が思いつきません。

お手数ですがご教示いただけますと幸いです。

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let ballRadius = 15;
let x = canvas.width / 2;
let y = canvas.height - 15;
let dx = 2;
let dy = -2;

function drawBall() {
  ctx.beginPath();
  ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}


function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBall();

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

  if (y + dy == canvas.height - ballRadius - 2 || y + dy == ballRadius - 2) {
    dx = 0;
    dy = 0;
  }
}
draw();

document.getElementById("button").onclick = function() {
  setInterval(draw, 10);
};

↓結果

行動規範の内容に同意します

回答1件

ベストアンサー

壁に当たった回数を保持する変数宣言を追加します

JavaScript
1let dx = 2;
2let dy = -2;
3let cntBounce = 0;  // この行追加

壁に当たったときに、(1)の変数をカウントアップする処理を追加します

JavaScript
1  if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
2    dx = -dx;
3    cntBounce++;  // この行追加
4  }
5  if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
6    dy = -dy;
7    cntBounce++;  // この行追加
8  }

ボールの停止条件を、(1)の変数が 2 以上だったら、に書き換えます

JavaScript
1  // if (y + dy == canvas.height - ballRadius - 2 || y + dy == ballRadius - 2) {
2  //   dx = 0;
3  //   dy = 0;
4  // }
5  if (cntBounce >= 2) {  // このように書き換え
6    dx = 0;
7    dy = 0;
8  }