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

【问题标题】：Canvas Maze character's distance from walls画布迷宫角色与墙壁的距离
【发布时间】：2014-04-12 16:21:26
【问题描述】：

我正在开发一款 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 矩形请求此方法一次，然后检查该巨大数组中的黑色像素，那么滞后可以大大减少。但是，我还是想继续逐行搜索，因为只找到一个黑色像素会返回错误的 distNorth 值。

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

【问题讨论】：

是图片数据万一发生了变化
没有。如果我在其他任何地方调用 getImageData() 方法，它就会完美运行。虽然，在其他情况下，我要么只检查一个像素，要么只检查一条线。（所以 getImageData 不会在循环中被调用，其他任何地方，只有在这里。）这就是为什么我怀疑该方法是滞后的来源。
重新计算 posY - viewDistance 和 4 * charSize 对性能没有好处。我假设它们是循环不变的。

标签： javascript algorithm canvas

【解决方案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

【讨论】：