Question

我正在使用帆布上的火炬效果进行2D迷宫游戏而不使用任何光线追踪。一切都很好，但火炬效应的算法在几个浏览器和计算机中造成了巨大的滞后。（同样奇怪的是，游戏在老式计算机上运行得更顺畅。最有趣的是，IExplorer在没有任何滞后的情况下运行游戏，而mozzila在每一步都死掉了。）

我解决这个问题的一般想法是，让角色离墙壁有多远（4个功能），让迷宫的其余部分变灰。

以下是北墙检测的示例： http://webprogramozas.inf.elte.hu/~ce0ta3/beadando/maze_example.png

一个例子，它是如何工作的，以及我希望在没有滞后问题的情况下实现的目标。 http://webprogramozas.inf.elte.hu/~ce0ta3/beadando/ce0ta3_html5_maze.html

正如我上面提到的，追踪角色与墙壁距离的算法造成了难以置信的滞后。

//Get the character's X,Y position as parameter
function distanceFromNorth (posX,posY)
{
    distNorth = 0;
    var l = false;
    //Start getting charSize x 1 px lines from the character position towards the up, until we reach the max viewDistance or we find a black pixel in the charSize x 1 line.
    for (var i = posY; i > posY - viewDistance && !l; i--)
    {
        var mazeWallData = context.getImageData(posX, i, charSize, 1);
        var data = mazeWallData.data;
        //Check if there are any black pixels in the line
        for (var j = 0; j < 4 * charSize && !l; j += 4)
        {
            l = (data[j] === 0 && data[j + 1] === 0 && data[j + 2] === 0);
        }
        distNorth++;
    }
    return distNorth;
}

我很确定，ctx.getImageData（）是此线性搜索中成本最高的方法，如果我只为charSize x viewDistance矩形请求此方法一次，然后检查该巨大数组中的黑色像素，那么滞后可以大大减少。但是，我仍然想继续搜索，因为只找到一个黑色像素会返回false distNorth值。

如果有人能将我的代码转换为我在前一段中提到的形式，我将不胜感激。

Answer 1

假设图像数据没有变化，那么您可以预先计算所有具有黑色像素的像素值。然后在其上使用简单的二进制搜索来获取给定范围内的任何黑色像素。

算法： -

cols[];
rows[];

for(int i=0;i<height;i++) {

 for(int j=0;j<width;j++) {

     if(pixel(j,i)==black) {
        row[i].add(j);
        col[j].add(i);
     }
  }
} 

for query on (x,y) :

distance = binarysearch(col[x],y,y-distance) - y

画布迷宫角色与墙壁的距离

1 个答案: