Javascript Canvas Breakout碰撞检测问题

Question

我正在使用JavaScript编写一个突破性游戏，并且在桨式碰撞检测方面存在问题。

在运行程序时，球与桨的所有碰撞都是正常的，直到它第一次错过。 此时程序将球放回中心并再次将其发送出去。 然而，这次在桨叶表面周围的时间被忽略了，但超过该点以确定球离开边界的代码正在工作，就像当球在下一次仍然复位时离开屏幕时。

有一个jsFiddle代码是在这里 。

我已经尝试了几个if/else变体来修复它，但无法弄清楚为什么稍后会忽略代码。

代码段

 var canvas = document.querySelector("canvas"); var surface = canvas.getContext("2d"); var button = document.querySelector("button"); button.addEventListener("click", playGame, false); //Game results var score = 0; var lives = 4; var gameOver = false; //Create a ball object var ball = { radius: 10, x: canvas.height - 30, y: canvas.width/2, dx: 3, dy: -3, }; //Create a paddle object var paddle = { width: 75, height: 10, x: (canvas.width -75)/2, y: canvas.height - 10 }; //add key controls document.addEventListener("keydown", keydownHandler, false); document.addEventListener("keyup", keyupHandler, false); var moveLeft = false; var moveRight = false; function playGame() { requestAnimationFrame (playGame, canvas); render(); moveBall(); movePaddle(); } function render() { //Clear the canvas surface surface.clearRect(0,0,canvas.width,canvas.height); drawBall(); drawPaddle(); //Keep ball within boundary if(ball.x + ball.dx < 0 + ball.radius || ball.x + ball.dx > canvas.width - ball.radius ) { //Reverse the direction of the ball in x direction ball.dx = -ball.dx; } if(ball.y + ball.dy < 0 + ball.radius ) { //Reverse the direction of the ball in the y direction ball.dy = -ball.dy; } //Make ball bounce of top surface of paddle if(Math.floor(ball.y) === Math.floor(canvas.height - ball.radius - paddle.height) && ball.x + ball.radius > paddle.x && ball.x - ball.radius < paddle.x + paddle.width) { //ball has hit paddle ball.dy = -ball.dy; } if (ball.y + ball.dy > canvas.height + ball.radius) { //ball has gone outside area console.log('Out of Bounds'); //Set new ball position ball.y = canvas.height -30; ball.x = canvas.width/2; ball.dy = -ball.dy; } } function drawBall() { surface.beginPath(); surface.arc(ball.x,ball.y,ball.radius,0, Math.PI*2); surface.fillStyle = "yellow"; surface.fill(); surface.closePath(); } function drawPaddle() { surface.beginPath(); surface.rect(paddle.x, paddle.y, paddle.width, paddle.height); surface.fillStyle = "lightblue"; surface.fill(); surface.closePath(); } function movePaddle() { if (moveLeft && paddle.x > 0) { paddle.x -= 7; } if (moveRight && paddle.x + paddle.width < canvas.width) { paddle.x +=7; } } function moveBall() { //Give ball a starting velocity ball.x += ball.dx; ball.y += ball.dy; } function keydownHandler(event) { if(event.keyCode === 37) { moveLeft = true; } if(event.keyCode === 39) { moveRight = true; } } function keyupHandler(event) { if(event.keyCode === 37) { moveLeft = false; } if(event.keyCode === 39) { moveRight = false; } } function scoreboard() { surface.font = "20px Arial"; surface.fillStyle = "#00FF00"; surface.fillText("Score: " + score, 8, 20); surface.fillText("Lives: " + lives, 730, 20); } 

 canvas { background-color: #000; border: 3px solid green; } 

 <canvas id="myCanvas" width="800" height="480"></canvas> <button>Run</button> 

Answer 1

我最终到了那里。

我的代码期望桨表面上的球表面完全匹配。 然而，由于增量一次是3个像素，因此存在球表面刚好在桨叶表面上方并且在下一帧上它刚刚超出它的点。

我通过修改“大于桨面和小于帆布区域”的条件来修复。

更新了小提琴https://jsfiddle.net/Geejayz/bnLbzgg0/6/ ：

 var canvas = document.querySelector("canvas"); var surface = canvas.getContext("2d"); var button = document.querySelector("button"); button.addEventListener("click", playGame, false); //Game results var score = 0; var lives = 4; var gameOver = false; //Create a ball object var ball = { radius: 10, x: canvas.height - 30, y: canvas.width/2, dx: 3, dy: -3, }; //Create a paddle object var paddle = { width: 75, height: 10, x: (canvas.width -75)/2, y: canvas.height - 10 }; //add key controls document.addEventListener("keydown", keydownHandler, false); document.addEventListener("keyup", keyupHandler, false); var moveLeft = false; var moveRight = false; function playGame() { requestAnimationFrame (playGame, canvas); render(); moveBall(); movePaddle(); } function render() { //Clear the canvas surface surface.clearRect(0,0,canvas.width,canvas.height); drawBall(); drawPaddle(); //Keep ball within boundary if(ball.x + ball.dx < 0 + ball.radius || ball.x + ball.dx > canvas.width - ball.radius ) { //Reverse the direction of the ball in x direction ball.dx = -ball.dx; } if(ball.y + ball.dy < 0 + ball.radius ) { //Reverse the direction of the ball in the y direction ball.dy = -ball.dy; } //Make ball bounce of top surface of paddle if(ball.y > canvas.height - ball.radius - paddle.height && ball.y < canvas.height - ball.radius && ball.x + ball.radius > paddle.x && ball.x - ball.radius < paddle.x + paddle.width) { //ball has hit paddle ball.dy = -ball.dy; } if (ball.y + ball.dy > canvas.height + ball.radius) { //ball has gone outside area console.log('Out of Bounds'); //Set new ball position ball.y = canvas.height -30; ball.x = canvas.width/2; ball.dy = -ball.dy; } } function drawBall() { surface.beginPath(); surface.arc(ball.x,ball.y,ball.radius,0, Math.PI*2); surface.fillStyle = "yellow"; surface.fill(); surface.closePath(); } function drawPaddle() { surface.beginPath(); surface.rect(paddle.x, paddle.y, paddle.width, paddle.height); surface.fillStyle = "lightblue"; surface.fill(); surface.closePath(); } function movePaddle() { if (moveLeft && paddle.x > 0) { paddle.x -= 7; } if (moveRight && paddle.x + paddle.width < canvas.width) { paddle.x +=7; } } function moveBall() { //Give ball a starting velocity ball.x += ball.dx; ball.y += ball.dy; } function keydownHandler(event) { if(event.keyCode === 37) { moveLeft = true; } if(event.keyCode === 39) { moveRight = true; } } function keyupHandler(event) { if(event.keyCode === 37) { moveLeft = false; } if(event.keyCode === 39) { moveRight = false; } } function scoreboard() { surface.font = "20px Arial"; surface.fillStyle = "#00FF00"; surface.fillText("Score: " + score, 8, 20); surface.fillText("Lives: " + lives, 730, 20); } 

 canvas { background-color: #000; border: 3px solid green; } 

 <canvas id="myCanvas" width="800" height="480"></canvas> <button>Run</button> 

（也感谢AgataB和zow的编辑 - 自从我发布以来已经有一段时间了。我可能还没有完成这篇文章。）。