大家好
我开始写一个关于球和砖块的小游戏，但在碰撞检测方面遇到了一些问题。这是我的代码http://jsbin.com/ibufux/9 。我知道检测是通过数组实现的，但我不知道该如何将其应用到我的代码中。
下面是我尝试过的方法：
bricksCollision: function() {
for (var i = 0; i < $bricks.length; i++) {
if ($ball.t == $bricks[i].offset().top) {
$bricks[i].splice(i, 1);
}
}
游戏中的每一个砖块都是通过for循环生成，并进入$bricks数组。每个砖块在生成后都会接收到顶部和左侧位置，并拥有绝对位置。我尝试检查$ball.t（我的球体对象的属性，它检测球的顶部位置）是否到达砖块，然后删除砖块。
感谢任何帮助。我刚开始学习JS，所以我的代码很费解。
首先，让我们谈谈一些代码错误
$ball.t 可能应该是 $ball.top$ 作为前缀，对于您的代码，它只是一个变量，而您正在调用 $ball 而不是 ball，这会导致假设错误！对于那些假设错误，以下是您犯的错误：
$ball 是一个 DOM 元素，而不是 jQuery 元素$bricks 同样也是$ball 是一个数组通过一些console.log()得出结论后，我们尝试修复代码：
由于只有一个球，应该使用其数组元素来调用$ball[0]，同时由于您有指向 DOM 元素而不是 jQuery 元素的变量，因此需要将其包装在 jQuery 中：
if ( $($ball[0]).top === $($bricks[i]).offset().top ) { ...
为了避免混淆，一个好的想法是仅在jQuery元素中使用$，在变量中加前缀并不会使它们成为jQuery元素。
并且每次当你看到像“元素x没有方法y”的错误时，总是假设你正在从DOM元素中调用方法，而不是从jQuery元素中调用。
想象一下两个重叠的范围（范围a部分重叠范围b）
[100 .|.. 300]
[200 ..|. 400]
[50 ... 150]
[75...125]
Math.min (150,125) //125 作为结束值，Math.max (50,75) // 75 作为起始值，这导致重叠值为125 - 75 = 50
让我们看一下最后一个例子（范围a不在范围b中）。[50 ... 150]
[200 ... 300]
Math.min(150, 300) - Math.max(50, 200) // -50，其绝对值为两个范围之间的差距，即50。> 0的值对我们有用。鉴于此，我们可以将其放入一个条件中。
Math.min((Brick["Right"], Ball["Right"]) - Math.max(Brick["Left"], Ball["Left"]) > 0)
如果元素重叠，则将产生true，否则将产生false。bricksCollision: function () {
for (var i = 0; i < $bricks.length; i++) {
var $brick = $($bricks[i]);
var offset = $brick.offset();
var brickBounds = [offset.left - field.l]; //brick left pos
brickBounds[1] = brickBounds[0] + 40 //bricks right pos -> left pos + .bricks.width;
var ballBounds = [ball.l]; //balls left pos
ballBounds[1] = ballBounds[0] + 20 //balls right pos -> left pos + #ball.width;
if (ball.t <= (offset.top + 20) && (Math.min(brickBounds[1], ballBounds[1]) - Math.max(brickBounds[0], ballBounds[0])) > 0) {
$bricks[i].style.opacity = 0; //Make the brick opaque so it is not visible anymore
$bricks.splice(i, 1) //remove the brick from the array -> splice on the array, not the element
return true;
}
}
}
通过这个方法，当球碰到砖块时，我们可以在移动函数中返回true。
但是，我们希望它以正确的方向弹开，所以我们将面临另一个问题。因此，我们可以返回一个新的方向，让球应该移动，而不是返回一个布尔值，表示砖块是否发生碰撞。
为了能够轻松地仅更改方向的x或y部分，我们应该使用类似于向量的东西。
为此，我们可以使用整数的2位，其中位 b0 表示x方向，位 b1 表示y方向。如下所示。
Dec Bin Direction
0 -> 00 -> Down Left
^ -> Left
^ -> Down
1 -> 01 -> Down Right
^ -> Right
^ -> Down
2 -> 10 -> Up Left
^ -> Left
^ -> Up
3 -> 11 -> Up Right
^ -> Right
^ -> Up
... && overlap < 2。bricksCollision: function (direction) {
var newDirection = direction
var ballBounds = [ball.l]; //balls left pos
ballBounds[1] = ballBounds[0] + 20 //balls right pos -> left pos + #ball.width;
for (var i = 0; i < $bricks.length; i++) {
var $brick = $($bricks[i]);
var offset = $brick.offset();
var brickBounds = [offset.left - field.l]; //brick left pos
brickBounds[1] = brickBounds[0] + 40 //bricks right pos -> left pos + .bricks.width;
var overlap = Math.min(brickBounds[1], ballBounds[1]) - Math.max(brickBounds[0], ballBounds[0]);
if (ball.t <= ((offset.top - field.t) + 20) && overlap > 0) {
$bricks[i].style.opacity = 0; //Make the brick opaque so it is not visible anymore
$bricks.splice(i, 1) //remove the brick from the array -> splice on the array, not the element
if (ballBounds[1] - brickBounds[0] == overlap && overlap < 2) { //ball comes from the left side
newDirection &= ~(1); //Turn the right bit off -> set x direction to left
} else if (brickBounds[1] - ballBounds[0] == overlap && overlap < 2) { //ball comes from the right side
newDirection |= 1; // Turn the right bit on -> set x direction to right;
} else {
if (ball.t > (offset.top + (20 / 2))) //Ball comes from downwards
newDirection &= ~(2) // Turn the left bit off -> set y direction to down;
else //Ball comes from upwards
newDirection |= 2; // Turn the left bit on -> set y direction to up;
}
//console.log("Coming from: %s Going to: %s", field.directionsLkp[direction], field.directionsLkp[newDirection], direction)
return newDirection;
}
}
return direction;
}
moveXX函数，以使用返回的新方向。field中，该对象保存方向的数字，以保持可读性。var field = {
directions: {
uR : 3, // 11
dR : 1, // 01
dL : 0, // 00
uL : 2 // 10
},
directionsLkp: [
"dL","dR","uL","uR"
],
...
}
ballCondact: function () {
var moves = [moveDl,moveDr,moveUl,moveUr]
var timeout = 5;
function moveUr() {
var timer = setInterval(function () {
$ball.css({
top: (ball.t--) + "px",
left: (ball.l++) + "px"
})
var newDirection = game.bricksCollision(field.directions.uR) //get the new direction from the collision function
if (newDirection !== field.directions.uR) {
clearInterval(timer);
moves[newDirection](); //move in the new direction
}
}, timeout);
}
...
}
bricksCollision: function (direction) {
...
if (ball.t <= field.t)
newDirection &= ~(2); //Ball is at top, move down
else if (ball.l <= 0) //Ball is at the left, move right
newDirection |= 1;
else if (ball.t >= field.b - ball.height) //Ball is at the bottom, move up
newDirection |= 2;
else if (ball.l > field.width - ball.width) //Ball is at the right, move left
newDirection &= ~(1);
if (direction !== newDirection)
return newDirection
...
}
$varName命名约定。您可以将您的砖块数组称为bricks而不是$bricks。 - Benjamin Gruenbaum