javascript - Canvas 2D 迷宫 torch 效果

Question

我正在从事一个包含这些条件的学校元素:

• 只使用 JS、HTML5 和 CSS 制作迷宫。
• 在 Angular 色周围制作 torch 效果。你不能穿墙照明。

我开始使用 Canvas 制作这款游戏​​。我已经成功地在 Angular 色周围制作了 torch 效果，如下所示:

http://people.inf.elte.hu/tunyooo/web2/HTML5-Maze.html

但是，我无法做到不穿墙照明。

我很确定我应该这样做:从 Angular 色的当前位置开始在所有方向上循环，直到它到达 View 距离或者如果 context.getImageData() 返回 [0,0,0,255]。通过这种方式，我可以获得 Angular 色与北墙、东墙、西墙和南墙的距离。然后，我可以用 (viewdistance-DistanceFrom*Wall) 矩形照亮 Angular 色周围的迷宫。

不幸的是，在考虑了 15 个小时之后，我已经想不出如何让它发挥作用的想法了。任何提示表示赞赏。

Answer 1

一个更简单的方法是(ps:我在提供的链接上收到“禁止”错误，所以我看不到你做了什么):

• 有迷宫的磨砂版，透明的白色图像，其中白色代表允许的绘图区域。此 mask 图像的大小和位置应与迷宫图像匹配。
• 创建一个与 torch 图像大小相同的离屏 Canvas
• 当您需要绘制 torch 时，请先将 mask 图像绘制到离屏 Canvas 中。将其绘制偏移，以便绘制 mask 的正确部分。例如:如果将在迷宫的第 100、100 位置绘制 torch ，则将 mask 绘制到屏幕外 Canvas 的 -100、-100 处 - 或者简单地创建与迷宫大小相同的 Canvas 并在 mask 中绘制在 0,0 和 torch 在相对位置。使用更多内存但更易于维护。
• 将复合模式更改为source-in，然后绘制 torch 。将复合模式改回 copy 以进行下一次绘制。

现在你的手电筒被夹在墙上。现在只需将屏幕外 Canvas 而不是手电筒绘制到主 Canvas 上即可。

注意:重要的是手电筒不能到达墙壁的另一侧(直径大小)，否则它会在迷宫墙壁“下方”发光 - 这可以通过其他方式解决，但使用 mask 根据玩家位置选择的不同区域(此处未显示)。

要在下面的演示中移动，只需将鼠标移到 Canvas 区域上即可。

Live demo

function mousemoved(e) {

    var rect = canvas.getBoundingClientRect(),   // adjust mouse pos.:
        x = e.clientX - rect.left - iTorch.width * 0.5, // center of torch
        y = e.clientY - rect.top - iTorch.height * 0.5;
        
    octx.drawImage(iMatte, 0, 0);                // draw matte to off-screen
    octx.globalCompositeOperation = 'source-in'; // change comp mode
    octx.drawImage(iTorch, x, y);                // clip torch
    octx.globalCompositeOperation = 'copy';      // change comp mode for next
    
    ctx.drawImage(iMaze, 0, 0);                  // redraw maze
    ctx.drawImage(ocanvas, 0, 0);                // draw clipped torch on top
}

在演示中，手电筒的大小或多或少是随机的，实际上有点太大了——这是我快速而肮脏的东西。但是尝试在迷宫路径内移动以查看它是否被剪裁。屏幕外 Canvas 被添加到主 Canvas 的大小上以显示发生了什么。

一个额外的好处是您可以使用相同的 mask 进行 HitTest 。