Eine Variable bricht mein einfaches Programm, warum?

Question

Ich folge einem Tutorial und versuche, etwas Code zu ändern. Wie der Code derzeit aussieht, ist alles in Ordnung, um einen Ball um einen Platz herum und von einem Paddel auf dem Boden springen zu lassen, und alles, was ich tun möchte, ist, den Ball größer zu machen, wenn er vom Paddel springt. Die Bälle fangen bei Größe 15 an und ich kann sie um 1-4 erhöhen, aber bei 5 und darüber hinaus gibt es einen Fehler, der dazu führt, dass der Ball in Position bleibt und auf die Hälfte des Bildschirms wächst und dann einfach dort bleibt. Ich denke, wenn es wächst, wird es in die Hitbox für das Paddel zurückgeschnitten und aktiviert dann ein weiteres Wachstum und Wiederholung. Ich bin jedoch völlig unsicher. Kann jemand etwas Licht abwerfen? Ich werde einen großen Kommentar zu der Variablen machen, die auf halbem Wege des Codes verantwortlich ist. Vielen Dank für Ihre Hilfe!

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

Das Problem war, dass Ihr alle 10ms Funktion excecutes ziehen. Wenn Ihr Ball also das Paddel berührt, löst es den Ball mehrere Male aus. Meine Lösung war, wie ein Timeout/eine Verzögerung, wenn Sie die Größe des Balls erhöhen, so dass es Zeit hat, wegzugehen, bevor das nächste Mal die Zeichenfunktion ausgelöst wird. Heres der Code.

HINWEIS: Öffnen Sie den Code-Schnipsel in vollem Umfang nutzen bis das Spiel besser

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>