对象数组上的html5 javascript冲突

html5 javascript collision over array of Objects

本文关键字：javascript 冲突 html5 数组 对象      更新时间：2023-09-26

我有一个逻辑问题，也许你们这些聪明人可以帮我解决。我正在用Canvas学习Javascript，并试图用纯Javascript构建一种"刹车"游戏。

http://www.seas.upenn.edu/~cis120e/hw/SwingGame/images/breakout.png

我创建了球拍、球，然后创建了一组块具有不同属性（xPos、yPos、宽度等）的对象，现在我正试图检测球与屏幕顶部块的碰撞。

我就是这样做的：

//This is my block Object definition
function block(x,y,width,height){
this.x = x;
this.y = y;
this.width = width;
this.height = height;
ctxBlock.fillStyle = 'green';
ctxBlock.fillRect(this.x, this.y, this.width, this.height);

}

//This is for draw blocks on the canvas
mattone.prototype.draw = function(){
ctxBlock.fillStyle = 'green';
ctxBlock.fillRect(this.x, this.y, this.width, this.height);

}

//This is the check for collision method
var blocks = [];
function checkCollision(){
for (var i = 0; i < blocks.length; i++){
    if(ballY - ballRadius <= blocks[i].y + blockWidth){
        ctxBlocks.clearRect(tmpx, tmpy, blockWidth, blockHeight);
        speedY = (-speedY);
        break;
    }
}
checkColl = requestAnimationFrame(checkCollision);

}

基本上，我试图告诉画布，当球的"Y"是"<"，然后是块阵列中某个块的"Y）时（循环通过并检查每个块），他必须删除该块并向下反弹。

但它所做的总是取消那一行方块中左边的第一个方块，而不是他碰到的方块。

这应该是我的代码链接*请注意，我在代码中使用了单词mattoni而不是block

祝大家度过美好的一天

非常好！也感谢您提供完整的jsfiddle。我对此进行了更新：
http://jsfiddle.net/43mwc/2/。现在来解释一下：碰撞检查只需要检查每个块的所有边界，而不仅仅是底部。所以我改了这个：

if(ballY - ballRadius <= blocks[i].y + blockWidth){

对此（用你的措辞）：

if(ballY-ballRadius <= mattoni[i].y + 10- padding && (ballX - ballRadius) >= mattoni[i].x && (ballX + ballRadius) <= (mattoni[i].x + mattWidth)){

为了解释，您的代码在每个砖块中循环，检查球是否在每个砖块的正下方。整个最底层的一排砖都满足该标准，因此循环中位于最底层的第一块砖上的循环断开（如break;中所示）。现在，球沿x轴的位置被检查为位于每块砖的左右边缘之间。这里还有一种情况没有涉及：砖块被从顶部击中。我把那个留给你。

您在碰撞检查中只检查了y值，而没有检查x值。每当你击中最后一排的砖块时，最左边的砖块就会被清除，因为它与y值匹配。之后，你就脱离了循环。

其次，您没有跟踪哪个区块已经被清除。因此，最后一行的左砖块在每个循环中都被清除了，而其他砖块没有得到清除的更改，因为在那之后你就脱离了循环。

http://jsfiddle.net/43mwc/3/

相关文章：