html5 javascript在对象数组上的冲突答案

【问题标题】：html5 javascript collision over array of Objectshtml5 javascript在对象数组上的冲突
【发布时间】：2012-08-18 07:47:37
【问题描述】：

我有一个逻辑问题，也许你们聪明的人可以帮我解决。我正在使用 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”是“

但它所做的总是取消该行块中左侧的第一个块，而不是他触摸的块。

这应该是我的代码link的链接 *请注意我在代码中使用了 mattoni 这个词而不是块

祝大家有个愉快的一天

【问题讨论】：

你可能不得不/希望在没有库的情况下编写代码，但值得指出的是，像 Kinetic.JS 这样的东西可以自动处理碰撞检测等事情，所以你不必这样做。
可以在jsfiddle.net中设置代码吗？
这应该是我的代码jsfiddle.net/43mwc的链接 *请注意我在我的代码中使用了mattoni这个词而不是块
顺便说一句，你应该让你击球的位置影响弹跳的角度，否则游戏总是一样的。

标签： javascript canvas collision

【解决方案1】：

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

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

对此（用你的 jsfiddle 的措辞）：

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

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

【讨论】：

虽然它与措辞问题没有直接关系，但我还应该提到，您似乎没有跟踪哪些砖块已经被“破坏”。你可能已经想到了这一点，但只要知道你会想要这样做并免除他们的碰撞检查（否则你的球将继续“击中”看不见的已经破碎的砖块）。

【解决方案2】：

您在碰撞检查中只检查了 y 值，而不是 x 值。每当你碰到最后一行的砖块时，最左边的砖块就会被清除，因为它与 y 值匹配。之后，你就跳出循环。

其次，您没有跟踪已清除的块。结果，每个循环清除了最后一行的左砖，而其他砖没有得到清除的更改，因为您在那之后退出了循环。

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

【讨论】：