1

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

我正在尝试在基于图块的游戏中进行碰撞检测。该图块的宽度和高度为 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是瓷砖。

播放器的宽度为 32 像素，高度为 48 像素。

4

0 回答 0