Question

好的，所以我正在使用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组件的顶部或底部。前一句只有在逐个单元格中移动时才有效。

如何在javascript画布中与另一个对象发生碰撞时停止对象

1 个答案: