当对象与javascript画布中的另一个对象碰撞时如何停止

Question

OK，所以我正在使用HTML5制作Pacman游戏。 问题是，每当我击中一个砖块时，我都希望精灵停止移动，但它会一直移动直到撞到最左边的砖块对象。 我该如何解决？ 请帮助...这是我用来停止精灵运行的代码。

这是我的所有代码，如果您有时间，请解析它，然后告诉我我做错了什么。

function init(){
    var canvas=document.getElementById("ctx");
    var ctx = canvas.getContext("2d");
    var player = {sx:6,sy:6,sw:15,sh:15,x:230,y:377,w:20,h:20}
    var ss = new Image();
    ss.src="SS.png";
    var right=false,left= true,up = false,down = false
    var b = [{x:0,y:0,w:25,h:((canvas.height/2)-25)},{x:0,y:((canvas.height/2)),w:25,h:((canvas.height/2))},{x:50,y:25,w:50,h:50},{x:125,y:25,w:75,h:50},{x:225,y:0,w:25,h:75},{x:275,y:25,w:75,h:50},{x:375,y:25,w:50,h:50},{x:50,y:100,w:50,h:25},{x:125,y:100,w:25,h:125},{x:125,y:150,w:75,h:25},{x:175,y:100,w:125,h:25},{x:225,y:125,w:25,h:50},{x:325,y:100,w:25,h:125},{x:275,y:150,w:75,h:25},{x:375,y:100,w:50,h:25},{x:25,y:150,w:75,h:75},{x:375,y:150,w:75,h:75},{x:375,y:250,w:75,h:75},{x:25,y:250,w:75,h:75},{x:125,y:250,w:25,h:75},{x:325,y:250,w:25,h:75},{x:175,y:300,w:125,h:25},{x:225,y:325,w:25,h:50},{x:50,y:350,w:50,h:25},{x:75,y:350,w:25,h:75},{x:125,y:350,w:75,h:25},{x:275,y:350,w:75,h:25},{x:375,y:350,w:50,h:25},{x:375,y:350,w:25,h:75},{x:25,y:400,w:25,h:25},{x:125,y:400,w:25,h:75},{x:50,y:450,w:150,h:25},{x:275,y:450,w:150,h:25},{x:325,y:400,w:25,h:50},{x:425,y:400,w:25,h:25},{x:175,y:400,w:125,h:25},{x:225,y:425,w:25,h:50},{x:450,y:0,w:50,h:((canvas.height/2)-25)},{x:450,y:(canvas.height/2),w:50,h:((canvas.height/2))}];
    function gen(){
        for(var i=0;i<b.length;i++){
           ctx.fillStyle="blue"
           ctx.fillRect(b[i].x,b[i].y,b[i].w,b[i].h) 
        }
        ctx.drawImage(ss,player.sx,player.sy,player.sw,player.sh,player.x,player.y,player.w,player.h) 
    }
    function move(){
    for(var i=0;i<b.length;i++){
     //((a.x + a.width) < b.x)
        if(left &&
     player.x > b[i].x && (player.x + player.w) < (b[i].x + b[i].w) &&
player.y > b[i].y && (player.y + player.h) < (b[i].y + b[i].h)) {
    // here you can tell that the user is colliding an object
 player.x-=1

        }
        else {

        }
    }
    }
    function animate(){
     ctx.save()
     ctx.clearRect(0,0,canvas.width,canvas.width);
     gen()
     move()
     ctx.restore();   
    }
var ani = setInterval(animate, 30)
}
window.addEventListener("load",function(){
 init()   
})

Answer 1

首先，我可以看到您的if条件的第一部分有问题：

left = true && ...

应该

left === true && ...

甚至更好

left && ...

现在对于碰撞部分，它通常位于对象的左上角或中间

我建议进行左上角的原点碰撞检查：

if(left &&
   (player.x >= b[i].x && player.x + player.w <= b[i].x + b[i].w) &&
   (player.y >= b[i].y && player.y + player.h <= b[i].y + b[i].h) {
        // here you can tell that the user is colliding an object
    }

它检查几种情况，这部分

(player.x >= b[i].x && player.x + player.w <= b[i].x + b[i].w)

如果玩家的x（及其宽度分量）在当前对象的x占用范围内，将满足要求

第二部分

(player.y >= b[i].y && player.y + player.h <= b[i].y + b[i].h)

如果玩家的y（及其高度分量）在当前对象的y范围内，则将满足要求。

如果以上两种情况都满足条件，它将仅执行if语句。

通过将播放器x分量减去对象的x分量，可以确定是将播放器重新定位在左侧还是右侧，顶部或底部的y分量也是如此。 仅当您逐格在一个网格单元格中移动时，上一句话才有效。