javascript - 我的播放器和二维数组中的 block 之间的碰撞检测

Question

我正在尝试制作一个小游戏，只是为了好玩，但我遇到了一些碰撞问题。

我在 Canvas 上绘制了一个播放器，在另一个 Canvas 上绘制了一些 block (16 x 16px)。

但是我在检测水平碰撞时遇到了问题。

...

我的问题归结为:

我的播放器使用存储为的 x y 坐标:

var p_x; var p_y;

这些值是以像素为单位的玩家左下角坐标。

但是我的 block 在一个二维数组中，名为:

var g_levelarray;

每个 block 都是 16 x 16 像素，所以例如如果我这样做:

g_levelarray[3][2] = 1;

表示 block 将绘制在 Canvas 左侧:48px 和 Canvas 底部 32px

...

但是我有我的代码来检查 block 是否存在(根据玩家)，其中 x 和 y 是玩家坐标

function blockexists(x, y) {
    var xpos = parseInt(x / g_blocksize);
    var ypos = parseInt(y / g_blocksize);


    $("#checkedblock").html("checked block: " + xpos + " " + ypos);


    if (g_levelarray[xpos][ypos] != undefined) {
        return true;
    }
    else {
        return false;
    }
}

但该检查有一些错误，因为它会向下舍入数字，所以当我从顶部的一半击中一个方 block 时(如下图所示)，它允许玩家进入方 block 内部。

_{(来源:userhome.org)}

我也尝试过 Math.round 而不是 parseInt，但这只会在玩家中间造成问题。

那么我怎样才能以正确的方式编写这段代码，这样我的玩家就不会进入障碍？

提前谢谢

Answer 1

不要只使用 parseInt 和 round 尝试使用一个范围。

获取下限 (Math.floor) 和上限 Math.ceil 并通过检查数组中的这些值来检查该 block 是否存在于该范围内。