Question

我一直在寻找这么多次的答案，但我没有找到任何东西。

我正在尝试在基于磁贴的游戏中进行碰撞检测。平铺的宽度和高度为32px，这就是我创建地图的方式：

function map(){
    var tileset = new Image();
    tileset.src = "images/tileset.png";
    var mapIndexOffset = -1;
    var rows = 16;
    var col = 24;
    var tileMap = [

     [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ,[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]

    ];

    for(mapRows = 0; mapRows < rows; mapRows++){
        for(mapCol = 0; mapCol < col; mapCol++){
            var tileId = tileMap[mapRows][mapCol]+mapIndexOffset;
            var sourceX = tileId * 32;
            var sourceY = 0;
            var tileW = 32;
            var tileH = 32;
            var tileX = mapCol * 32;
            var tileY = mapRows * 32;

            ctx.drawImage(tileset, sourceX, sourceY, tileW, tileH, tileX, tileY, tileW, tileH);

        }
    }
}

然后我做了类似的事情（在这个for循环中。）：

if(tileId == 1){//1 is actually 2
    //collision detection here...
}

因此，当 tileId 为1（ tileMap 数组中为2）时，会发生冲突。并且它可以工作，但只有当一个图块在地图上时，当有更多图块时，碰撞仅适用于最后一个图块。

玩家每3个像素移动一次，而不是32个，就像很多基于游戏的游戏一样。

这是我的碰撞检测代码：

var leftCollision   = o1x + o1w == o2x && o1y + o1h >= o2y && o1y <= o2y + o2h;
var topCollision    = o1y + o1h == o2y && o1x + o1w >= o2x && o1x <= o2x + o2w;
var rightCollision  = o1x == o2x + o2w && o1y + o1h >= o2y && o1y <= o2y + o2h;
var bottomCollision = o1y == o2y + o2h && o1x + o1w >= o2x && o1x <= o2x + o2w;

if(leftCollision){
    //left collision is true
}else if(rightCollision){
    //right collision is true
}else if(topCollision){
    //top collision is true
}else if(bottomCollision){
    //bottom collision is true
}

o1 是玩家。
o2 是图块。

玩家的宽度为32px，高度为48px。

基于图块的游戏的碰撞检测。 - 有多个图块时发生碰撞

0 个答案: