当一个对象与javascript画布中的另一个对象发生冲突时，如何停止该对象

how to stop an object when it collides with another object in javascript canvas

本文关键字：一个对象 冲突 何停止 对象 javascript 布中      更新时间：2023-09-26

好吧，所以我正在使用HTML5制作一个吃豆人游戏。问题是，每当我碰到一个砖块时，我都希望精灵停止移动，但它一直移动，直到碰到最左边的砖块对象。我该怎么解决这个问题？请帮忙。。。这是我用来让精灵停止的代码。

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

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()   
})

首先，我可以看到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分量也是如此。前一句只有在逐个单元格的网格中移动时才有效。

相关文章：