Question

我有一个逻辑问题，也许你聪明的家伙可以帮我解决。我正在学习使用Canvas的Javascript，我正在尝试使用纯Javascript构建一种“制动”游戏。

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

我创建了球拍，球，然后是一个块数组 - 具有不同属性的对象（xPos，yPos，width ...等），现在我试图检测球与块上的碰撞屏幕上方。

这就是我的方式：

//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”是“＆lt;”然后是块数组中的一个块的“Y”（循环槽并检查每个块），他必须删除该块并反弹。

但它的作用总是取消该行块中左边的第一个块，而不是他触摸的块。

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

祝大家度过愉快的一天

Answer 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轴的位置是在每个砖的左边和右边之间。还有一个场景没有在这里讨论：砖被击中顶部。我会把那个留给你。

Answer 2

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

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

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

html5 javascript碰撞对象数组

2 个答案: