1

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

祝大家有个愉快的一天

4

2 回答 2

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 轴的位置是否在每个砖块的左右边缘之间。这里还有一种情况没有涉及：从顶部击中砖块。我会把那个留给你。

于 2012-08-17T23:26:02.757 回答
1

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

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

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

于 2012-08-17T23:27:07.277 回答