JavaScript 游戏中的碰撞检测？

我的地图数组;;

map[0] = [0,0,0,0,0,0]
map[1] = [0,1,0,1,0,1]
map[2] = [0,0,0,0,0,0]
map[3] = [1,0,1,0,1,0]
map[4] = [0,0,0,0,0,0]
map[5] = [0,1,0,1,0,1]
  

1=跨栏 0 = 没有

我必须检测玩家和地图中的障碍之间的碰撞检测。

player.x 和player.y 是来自左上角的引用。 每个障碍的宽度和长度均为 40px。

我需要一个粗略的概念而不是代码

您必须将玩家位置标准化为碰撞贴图单位，因为玩家位置位于px单位和你的碰撞图是在array index单位，然后测试玩家尝试进入的区域是否不是障碍。

function normalizePosition(entity){
    return { 
        x: Math.ceil(entity.pos.x / TILE_WIDTH), 
        y: Math.ceil(entity.pos.y / TILE_HEIGHT) 
    }
}

标准化位置将为您提供碰撞地图上的实体坐标，接下来您必须测试实际碰撞以查看实体进入的图块类型

function mapCollision(entity, map){
    var mapCoords = normalizePosition(entity),
        tileType = map[mapCoords.y][mapCoords.x];
    return tileType;
}

它将返回地图上玩家标准化位置的图块类型代码，以防您想要有不同的东西，然后只是像某种减速陷阱或任何其他熊坑之类的块。然后，您可以处理不同的情况，其中零默认接受玩家进入图块。

希望我没有说太多:)

祝你的游戏好运，如果你还记得的话，如果你在游戏完成后与我分享效果，我会很高兴:)

Tom

Update

为了更好的解释，我做了一个简单的例子：http://fiddle.jshell.net/qFCyn/1/ http://fiddle.jshell.net/qFCyn/1/