3
我正在編寫一個突破遊戲JavaScript，並且在碰撞檢測中遇到了問題。Javascript帆布突破碰撞檢測問題
在運行程序時，球與槳之間的所有碰撞都很好，直到第一次碰撞爲止。此時程序將球重新放回中間並再次發送。然而，這次槳葉表面被忽略了，但超出該點的代碼確定球已經離開邊界，就像在球下一次仍然重置時離開屏幕一樣。有一個jsFiddle的代碼是here。
我已經嘗試了幾個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 = {
\t radius: 10,
\t x: canvas.height - 30,
\t y: canvas.width/2,
\t dx: 3,
\t dy: -3,
};
//Create a paddle object
var paddle = {
\t width: 75,
\t height: 10,
\t x: (canvas.width -75)/2,
\t 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() {
\t requestAnimationFrame (playGame, canvas);
\t \t render();
\t \t moveBall();
\t \t movePaddle();
}
function render() {
\t //Clear the canvas surface
\t surface.clearRect(0,0,canvas.width,canvas.height);
\t
\t drawBall();
\t drawPaddle();
\t
\t //Keep ball within boundary
\t if(ball.x + ball.dx < 0 + ball.radius || ball.x + ball.dx > canvas.width - ball.radius) {
\t \t //Reverse the direction of the ball in x direction
\t \t ball.dx = -ball.dx;
\t }
\t if(ball.y + ball.dy < 0 + ball.radius) {
\t \t //Reverse the direction of the ball in the y direction
\t \t ball.dy = -ball.dy;
\t }
\t
\t //Make ball bounce of top surface of paddle
\t if(Math.floor(ball.y) === Math.floor(canvas.height - ball.radius - paddle.height) &&
\t \t ball.x + ball.radius > paddle.x && ball.x - ball.radius < paddle.x + paddle.width) {
\t \t \t //ball has hit paddle
\t \t \t ball.dy = -ball.dy;
\t }
\t
\t if (ball.y + ball.dy > canvas.height + ball.radius) {
\t \t \t //ball has gone outside area
\t \t \t console.log('Out of Bounds');
\t \t \t
\t \t \t //Set new ball position
\t \t \t ball.y = canvas.height -30;
\t \t \t ball.x = canvas.width/2;
\t \t \t ball.dy = -ball.dy;
\t }
\t
}
\t
function drawBall() {
\t surface.beginPath();
\t surface.arc(ball.x,ball.y,ball.radius,0, Math.PI*2);
\t surface.fillStyle = "yellow";
\t surface.fill();
\t surface.closePath();
}
function drawPaddle() {
\t surface.beginPath();
\t surface.rect(paddle.x, paddle.y, paddle.width, paddle.height);
\t surface.fillStyle = "lightblue";
\t surface.fill();
\t surface.closePath();
}
function movePaddle() {
\t if (moveLeft && paddle.x > 0) {
\t \t paddle.x -= 7;
\t }
\t if (moveRight && paddle.x + paddle.width < canvas.width) {
\t \t paddle.x +=7;
\t }
}
function moveBall() {
\t //Give ball a starting velocity
\t ball.x += ball.dx;
\t ball.y += ball.dy;
}
function keydownHandler(event) {
\t if(event.keyCode === 37) {
\t \t moveLeft = true;
\t }
\t if(event.keyCode === 39) {
\t \t moveRight = true;
\t }
}
function keyupHandler(event) {
\t if(event.keyCode === 37) {
\t \t moveLeft = false;
\t }
\t if(event.keyCode === 39) {
\t \t moveRight = false;
\t }
}
function scoreboard() {
\t surface.font = "20px Arial";
\t surface.fillStyle = "#00FF00";
\t surface.fillText("Score: " + score, 8, 20);
\t surface.fillText("Lives: " + lives, 730, 20);
}canvas {
\t background-color: #000;
\t border: 3px solid green;
}<canvas id="myCanvas" width="800" height="480"></canvas>
<button>Run</button>
請注意，jsfiddles實際上需要與他們的代碼。學習閱讀系統給你的信息，當它阻止你發佈時，請。 – Blubberguy22