javascript - 碰撞检测难度,玩家飞

标签 javascript canvas collision-detection 2d-games

我今天创建了一个 2d 平台游戏。玩家可以左右移动并跳跃。不允许爬上墙的一侧。当您在墙边按例如向右和向上时,它会爬上墙。你能看看我错过了什么吗?

function updateMe()
{
    x+=vx;
    y+=vy;

    //gravity
    vy+= gravity;
    if(y>=HEIGHT-playerH)
    {
        y=HEIGHT-playerH;
        vy=0;
    }

    //collision y
    var maxR=WIDTH/tileW-1;
    if(vy>0)
    {
        //going down
        var temp2 = Math.floor((y+vy+playerH)/tileH);
        for(var i=Math.max(0,Math.floor(x/tileW)),len=Math.min(maxR,Math.ceil((x+playerW)/tileW)); i<len; i++)
        {
            if(map[temp2][i]!=0)
            {   
                y=temp2*tileH-playerH;
                vy=0;
                break;
            }
        }
    }
    else if(vy<0)
    {
        //going down
        var temp2 = Math.floor((y+vy)/tileH);
        for(var i=Math.max(0,Math.floor(x/tileW)),len=Math.min(maxR,Math.ceil((x+playerW)/tileW)); i<len; i++)
        {
            if(map[temp2][i]!=0)
            {   
                y=temp2*tileH+tileH;
                vy=0.01;//make it fall down
                break;
            }
        }
    }

    //momentum
    if(vx>0)
        vx-=momentum/2;
    else if(vx<0)
        vx+=momentum/2;

    //collsion
    maxR=WIDTH-playerW;
    if(vx>0)
    {
        //going right
        if(x+vx<maxR)
        {
            var temp2 = Math.floor((x+vx+playerW)/tileW);
            for(var i=Math.floor(y/tileH),len=Math.ceil((y+playerH)/tileH); i<len; i++)
            {
                if(map[i][temp2]!=0)
                {   
                    x=temp2*tileW-playerW;
                    vx=0;
                    break;
                }
            }
        }
        else
        {
            vx=maxR-x;
        }
    }
    else if(vx<0)
    {
        //going left
        if(x+vx>0)
        {
            var temp2 = Math.floor((x+vx)/tileW);
            for(var i=Math.floor(y/tileH),len=Math.ceil((y+playerH)/tileH); i<len; i++)
            {
                if(map[i][temp2]!=0)
                {   
                    x=temp2*tileW+tileW;
                    vx=0;
                    break;
                }
            }
        }
        else
        {
            vx=x;
        }
    }

    //x boundaries
    if(x<=0)
    {
        x=vx=0;
    }
    else if(x>=WIDTH-playerW)
    {
        x=WIDTH-playerW;
    }

    //draw
    ctx.fillRect(x,y,playerW,playerH);
}

最佳答案

很有可能是操作顺序的问题,没看太多,相信感动

x+=vx;

之间

else if(vy<0)
{
    //going down
    var temp2 = Math.floor((y+vy)/tileH);
    for(var i=Math.max(0,Math.floor(x/tileW)),len=Math.min(maxR,Math.ceil((x+playerW)/tileW)); i<len; i++)
    {
        if(map[temp2][i]!=0)
        {   
            y=temp2*tileH+tileH;
            vy=0.01;//make it fall down
            break;
        }
    }
}

//momentum
if(vx>0)
    vx-=momentum/2;
else if(vx<0)
    vx+=momentum/2;

而不是在顶部意味着您不会遇到它被轻微移动到墙上并尝试根据它是否与下面的物体碰撞来调整 y 的问题,它将会是。

关于javascript - 碰撞检测难度,玩家飞,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14913497/

相关文章:

javascript - 如何在服务器端处理基于 Web 的简单实时聊天的消息?

javascript - Node Canvas 图像抗锯齿似乎不起作用

collision-detection - 三角形到三角形的 3D 碰撞检测

algorithm - 用于二维碰撞检测的技术资源?

javascript - 如何更改我的 js 代码以使菜单正常工作

javascript - GeoExt MapPanel 完全加载后正确删除 LoadMask

javascript - 在 PHP 中更新图像的问题

javascript - eBay 中的价格趋势功能在 IE 中如何工作?

javascript 将 x 像素移向鼠标

javascript - 为什么这只鸟没有撞到壁架上?