我正在尝试将我的碰撞代码与落球和划桨代码结合起来，到目前为止，我的碰撞代码工作正常，但我只有一个球落下，当我清除碰撞代码时，多个球会掉落。关于如何将两者结合起来的任何解决方案？我想要做的是，如果其中一个随机落球将击中桨，游戏结束。这是代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Gamedev Canvas Workshop</title>
<style>
* { padding: 0; margin: 0; }
canvas { background: #eee; display: block; margin: 0 auto; }
</style>
</head>
<body>
<canvas id="myCanvas" width="480" height="500"></canvas>
<script>
var spawnRate = 100;
var spawnRateOfDescent = 2;
var lastSpawn = -10;
var objects = [];
var startTime = Date.now();
function spawnRandomObject() {
var t;
if (Math.random() < 0.50) {
t = "red";
} else {
t = "blue";
}
var object = {
type: t,
x: Math.random() * (canvas.width - 30) + 15,
y: 0,
r: 8
}
objects.push(object);
}
function animate() {
var time = Date.now();
if (time > (lastSpawn + spawnRate)) {
lastSpawn = time;
spawnRandomObject();
}
for (var i = 0; i < objects.length; i++) {
var object = objects[i];
object.y += spawnRateOfDescent;
ctx.beginPath();
ctx.arc(object.x, object.y, object.r, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = object.type;
ctx.fill();
//Collision code starts here
var distX = Math.abs(object.x - paddleX-paddleWidth/2);
var distY = Math.abs(object.y - paddleY-paddleHeight/2);
if (distX > (paddleWidth/2 + 8)) { return false; }
if (distY > (paddleHeight/2 + 8)) { return false; }
if (distX <= (paddleWidth/2)) { alert("hello"); }
if (distY <= (paddleHeight/2)) { alert("hello"); }
//Collsion code ends here
}
}
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var paddleHeight = 10;
var paddleWidth = 60;
var paddleY = 480
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
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;
}
}
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, paddleY, paddleWidth, paddleHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function move(){
if(rightPressed && paddleX < canvas.width-paddleWidth) {
paddleX += 3;
}
else if(leftPressed && paddleX > 0) {
paddleX -= 3;
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPaddle();
animate();
move();
}
setInterval(draw, 10);
</script>
</body>
</html>
我是javascript的新手，所以如果它太复杂了，我的appologies。（如果碰到球，请小心无休止的循环）
答案 0 :(得分：1)
如果球拍和球碰撞，如何停止比赛：
在animate()内进行3部分碰撞测试......
碰撞测试第1部分：
测试球是否尚未到达球拍。
如果球尚未到达球拍，则停止测试是否与该球发生碰撞并通过continue处理下一个球。
碰撞测试第2部分：
测试球是否已经从球拍下方通过。
如果球已经从球拍下方经过，则停止测试与该球发生碰撞并通过continue处理下一个球。
碰撞测试第3部分：
如果到达此点，则球与桨垂直碰撞。现在测试球是否与桨叶水平碰撞。
如果球不是水平地在球拍上方，那么停止测试与该球的碰撞并通过continue处理下一个球。
如果球在水平方向上方，则用clearInterval停止游戏循环。
以下是您的代码的重构：
var spawnRate = 100;
var spawnRateOfDescent = 2;
var lastSpawn = -10;
var objects = [];
var startTime = Date.now();
function spawnRandomObject() {
var t;
if (Math.random() < 0.50) {
t = "red";
} else {
t = "blue";
}
var object = {
type: t,
x: Math.random() * (canvas.width - 30) + 15,
y: 0,
r: 8
}
objects.push(object);
}
function animate() {
var time = Date.now();
if (time > (lastSpawn + spawnRate)) {
lastSpawn = time;
spawnRandomObject();
}
// calculate the bounds of the paddle
var paddleLeft=paddleX;
var paddleRight=paddleX+paddleWidth;
var paddleTop=paddleY;
var paddleBottom=paddleY+paddleHeight;
for (var i = 0; i < objects.length; i++) {
var object = objects[i];
object.y += spawnRateOfDescent;
ctx.beginPath();
ctx.arc(object.x, object.y, object.r, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = object.type;
ctx.fill();
//Collision code starts here
// calculate bounds of this ball
var objectTop=object.y-object.r;
var objectBottom=object.y+object.r;
var objectLeft=object.x-object.r;
var objectRight=object.x+object.r;
// Collision test: Part 1
// Has the ball not yet reached the paddle?
if(objectBottom<paddleY){
// no collision yet so no collision is happening
continue;
}
// Collision test: Part 2
// Has the ball already passed below the paddle?
if(objectTop>paddleBottom){
// the ball is under the paddle so no collision is happening
continue;
}
// Collision test: Part 3
// Is the ball now horizontally over the paddle?
if(objectRight>paddleLeft && objectLeft<paddleRight){
// ball is colliding with paddle
// end the game
clearInterval(theInterval);
alert('Game Over - ball has collided with paddle');
}
//Collsion code ends here
}
}
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var paddleHeight = 10;
var paddleWidth = 60;
var paddleY = 480
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
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;
}
}
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, paddleY, paddleWidth, paddleHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function move(){
if(rightPressed && paddleX < canvas.width-paddleWidth) {
paddleX += 3;
}
else if(leftPressed && paddleX > 0) {
paddleX -= 3;
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPaddle();
animate();
move();
}
var theInterval=setInterval(draw, 25);* { padding: 0; margin: 0; }
canvas { background: #eee; display: block; margin: 0 auto; }<canvas id="myCanvas" width="480" height="500"></canvas>