Javascript Canvas Breakout 碰撞检测问题

Question

我正在用 JavaScript 编写一个突破游戏，并且遇到了 Racket 碰撞检测的问题。

在运行程序时，球与 Racket 的所有碰撞都没有问题，直到它第一次未命中。此时程序将球放回中心并再次将其送出。然而，这次 Racket 表面周围的代码被忽略了，但在该点之后确定球已经离开边界的代码正在工作，就像球在下次球离开屏幕时仍然被重置一样。

有个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 = {
	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

我终于到了那里。

我的代码期望球面与 Racket 表面完全匹配。但是，由于一次增量为 3 个像素，所以有一个点球表面刚好在 Racket 表面上方，而在下一帧中它刚好超出 Racket 表面。

我通过修改为“大于桨表面且小于 Canvas 区域”条件来修复。

更新 fiddle 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 的编辑 - 自从我发布以来已经有一段时间了。我可能仍然没有完美地完成这篇文章。)。