1つの変数が私の単純なプログラムを壊しています、なぜですか？

Question

私はチュートリアルに続き、いくつかのコードを修正しようとしています。コードが現在立っているので、ボールが正方形の周りを跳ね返り、底面のパドルから外れるようにするためにはすべてが正常に動作し、パドルから跳ね返ったときボールを大きくすることがすべてです。ボールはサイズ15から始まり、1-4でインクリメントすることができますが、5以上では、ボールがその位置に留まり、画面の半分に成長してそこにとどまるバグがあります。私はそれが成長するにつれて、パドルのヒットボックスに戻ってクリップし、別の成長を繰り返して繰り返すと思います。しかし、私は全くわかりません。誰か光を当てることはできますか？私は、コードの途中にある責任変数に大文字のコメントをつけます。ご協力いただきありがとうございます！

var canvas = document.getElementById("myCanvas"); 
 
var ctx = canvas.getContext("2d"); 
 

 
var x = canvas.width/2; //starting coordinates 
 
var y = canvas.height - 30; 
 

 
var dx = 2; //rate of movement for ball 
 
var dy = -2; 
 

 
var ballRadius = 15; 
 

 
var paddleHeight = 10; 
 
var paddleWidth = 75; 
 
var paddleX = (canvas.width - paddleWidth)/2; 
 

 
var rightPressed = false; 
 
var leftPressed = false; 
 

 
function drawBall() { 
 
    ctx.beginPath(); 
 
    ctx.arc(x, y, ballRadius, 0, Math.PI * 2); 
 
    ctx.fillStyle = "#ff0000"; 
 
    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(); 
 
    x += dx; 
 
    y += dy; 
 

 
    if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) { //these ifs cause the ball to bounce off walls 
 
    dx = -dx; 
 
    } 
 

 
    if (y + dy < ballRadius) { 
 
    dy = -dy; 
 
    } else if (y + dy > canvas.height - ballRadius) { 
 
    if (x > paddleX && x < paddleX + paddleWidth) { //detects paddlebox detection 
 
     dy = -dy; 
 
     ballRadius += 7; //TROUBLESOME VARIABLE! Work with 1-4 but breaks beyond that. 
 

 
    } else { 
 
     alert("GAME OVER"); 
 
     document.location.reload(); 
 
    } 
 
    } 
 
    if (rightPressed && paddleX < canvas.width - paddleWidth) { 
 
    paddleX += 7; 
 
    } else if (leftPressed && paddleX > 0) { 
 
    paddleX -= 7; 
 
    } 
 
} 
 
document.addEventListener("keydown", keyDownHandler, false); 
 
document.addEventListener("keyup", keyUpHandler, false); 
 

 
function keyDownHandler(e) { 
 
    if (e.keyCode == 39) { 
 
    rightPressed = true; 
 
    } else if (e.keyCode == 37) { 
 
    leftPressed = true; 
 
    } 
 
} 
 

 
function keyUpHandler(e) { 
 
    if (e.keyCode == 39) { 
 
    rightPressed = false; 
 
    } else if (e.keyCode == 37) { 
 
    leftPressed = false; 
 
    } 
 
} 
 

 
setInterval(draw, 10);

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
canvas { 
 
    background: #eee; 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<canvas id="myCanvas" width="480" height="320"></canvas>

Answer 1

問題は、あなたのドロー機能が10ms毎にexcecutesということでした。だからあなたのボールがパドルに当たったとき、それは実際にボールが複数回に亘って成長するようにトリガーする。私の解決策は、ボールのサイズを大きくして、描画機能が次回に発生する前に移動する時間があるように、タイムアウト/遅延をどのようにするかということでした。コードをheresします。

注：より良いゲームを表示するフルスクリーンでスニペットを開き

var canvas = document.getElementById("myCanvas"); 
 
var ctx = canvas.getContext("2d"); 
 

 
var x = canvas.width/2; //starting coordinates 
 
var y = canvas.height - 30; 
 

 
var dx = 2; //rate of movement for ball 
 
var dy = -2; 
 

 
var ballRadius = 15; 
 

 
var paddleHeight = 10; 
 
var paddleWidth = 75; 
 
var paddleX = (canvas.width - paddleWidth)/2; 
 

 
var rightPressed = false; 
 
var leftPressed = false; 
 

 
function drawBall() { 
 
    ctx.beginPath(); 
 
    ctx.arc(x, y, ballRadius, 0, Math.PI * 2); 
 
    ctx.fillStyle = "#ff0000"; 
 
    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(); 
 
    x += dx; 
 
    y += dy; 
 

 
    if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) { //these ifs cause the ball to bounce off walls 
 
    dx = -dx; 
 
    } 
 

 
    if (y + dy < ballRadius) { 
 
    dy = -dy; 
 
    } else if (y + dy > canvas.height - ballRadius) { 
 
    if (x > paddleX && x < paddleX + paddleWidth) { //detects paddlebox detection 
 
     dy = -dy; 
 
     setTimeout(function(){ ballRadius += 7; }, 100); 
 
     
 

 
    } else { 
 
     alert("GAME OVER"); 
 
     document.location.reload(); 
 
    } 
 
    } 
 
    if (rightPressed && paddleX < canvas.width - paddleWidth) { 
 
    paddleX += 7; 
 
    } else if (leftPressed && paddleX > 0) { 
 
    paddleX -= 7; 
 
    } 
 
} 
 
document.addEventListener("keydown", keyDownHandler, false); 
 
document.addEventListener("keyup", keyUpHandler, false); 
 

 
function keyDownHandler(e) { 
 
    if (e.keyCode == 39) { 
 
    rightPressed = true; 
 
    } else if (e.keyCode == 37) { 
 
    leftPressed = true; 
 
    } 
 
} 
 

 
function keyUpHandler(e) { 
 
    if (e.keyCode == 39) { 
 
    rightPressed = false; 
 
    } else if (e.keyCode == 37) { 
 
    leftPressed = false; 
 
    } 
 
} 
 

 
setInterval(draw, 10);

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
canvas { 
 
    background: #eee; 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<canvas id="myCanvas" width="480" height="320"></canvas>