帆布2D迷宫火炬效应

Question

我正在从事一项学校项目，其中包括以下条件：

• 只使用JS，HTML5和CSS制作迷宫。
• 在角色周围制造火炬效果。你不能透过墙壁发光。

我开始用画布制作这个游戏。我成功地在角色周围产生了火炬效应，如下所示：

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

然而，我不能让它不通过墙壁照明。

我确信我应该这样做:从字符的当前位置开始一个全方位的循环，直到到达视图距离，或者如果context.getImageData()返回0,0,0,255。这样，我就可以从北墙、东墙、西墙和南墙得到角色的距离。然后，我可以用一个矩形(视距-距离*墙)照亮角色周围的迷宫。

但不幸的是，经过15个小时的思考，我已经没有办法让这件事发挥作用了。任何小贴士都会很感激。

Answer 1

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

• 有一个哑光版的迷宫，一个透明和白色的图像，其中白色代表允许的绘图区域。这个哑光图像应该在大小和位置上与迷宫图像相匹配。
• 创建与火炬图像大小相同的屏幕外画布。
• 当你需要画手电筒的时候，先在屏幕外的画布上画一个哑光的图像。画它的偏移，以便正确的部分，光画。例如:如果火炬被画在100,100在迷宫上，然后画在屏幕外画布在-100，-100 -或简单地创建相同大小的画布，在0,0和火炬在相对位置。使用了更多的内存，但维护起来更简单。
• 将复合模式更改为source-in，然后绘制火炬。将复合模式更改为copy，以便进行下一次抽签。

现在你的手电筒被夹在墙上。现在只需将屏幕外的画布画到主画布上，而不是火炬。

注意:重要的是，火炬不能到达墙的另一边(直径大小)，或者它会在迷宫的墙壁下发光

要在下面的演示中移动，只需将鼠标移动到画布区域。

现场演示

​

​

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
}

在演示中，火炬或多或少是随机大小的，实际上有点太大了但是试着在迷宫中移动，看它被剪裁。屏幕外画布被添加到主画布的大小上，以显示正在发生的事情。

一个额外的好处是，你可以使用同样的冰霜进行命中测试。

Answer 2

把你迷宫般的走廊变成剪裁的小径。

您的火炬效果将包含在剪裁路径中。

基于发问者评论的补充回答

若要从现有迷宫图像创建剪辑路径，请执行以下操作：

在油漆程序中打开你的迷宫图像。鼠标光标X/Y位置通常显示在迷宫图像上。

将每个迷宫走廊的左上角和右下角记录在一个数组中。

var hallways=[];

hallways.push({left:100, y:50, right: 150, bottom: 65});  // for each hallway

监听鼠标事件，并确定鼠标在哪个走廊。

// hallwayIndex is the index of the hallway the mouse is inside

var hallwayIndex=-1;

// x=mouse's x coordinate, y=mouse's y coordinate

for(var i=0;i<hallways;i++){

    var hall=hallways[i];

    if(x>=hall.left && 
       x<=hall.right && 
       y>=hall.top && 
       y<=hall.bottom)
       { hallwayIndex=i; }
}

在画布上重新画迷宫

为当前的走廊创建一个剪辑路径：

var width=hall.right-hall.left;
var height=hall.bottom-hall.top;

ctx.beginPath();
ctx.Rect(hall.left,hall.top,width,height);
ctx.clip();

把player+torch画到走廊里(火炬不会在墙上发光)。

Answer 3

关于这个主题有一篇精彩的文章：http://www.redblobgames.com/articles/visibility/

然而，准确地这样做是一项很大的工作。如果你想提出一个快速而肮脏的解决方案，我建议如下。从大块构建世界(想想追溯像素)。这也使得碰撞检测变得更简单。现在你可以考虑火炬半径内的所有点。沿着一条直线从人物走到终点。如果你到达终点而没有撞到墙壁，那就让它明亮。

(对于1像素块也可以这样做，但可能会遇到性能问题。)