Javascript 基于栅格的环境中的二维光线投射

大家好，我的社区。最近，我一直在努力让一个合适的光线投射系统工作。目前，我已经完全在2D中工作，使用2D地图和播放器表示。但是，我在创建基于网格的环境时遇到了一些问题。我认为问题在于我投射光线的方式根本不是基于网格的。我有一个我的问题的例子。正如你所看到的，光线呈现出波状和畸形。有人能给我一些关于基于网格的系统如何工作的见解吗？谢谢你的帮助

以下是完整的源代码（我使用PIXI.js进行渲染）：

var-world=[
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1],
[1,0,1,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,1,0,0,1,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,1],
[1,0,1,1,1,1,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0,1,1,1,1,1],
[1,0,0,0,0,0,0,0,0,1,1,1,1,0,1,1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1],
[1,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,1],
[1,0,1,0,1,0,1,0,0,0,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
];
变量宽度=世界[0]。长度；
var高度=世界长度；
var量表=8；
var-posX=1；
var-posY=1；
var偏航=0；
var m=0；
var renderer=new PIXI.WebGLRenderer（宽度*比例，高度*比例）；
//var renderer=new PIXI.WebGLRenderer（320200）；
document.body.appendChild（renderer.view）；
var阶段=新PIXI.阶段（0xFFFFFF）；
var graphics=new PIXI.graphics（）；
stage.addChild（图形）；
函数drawMap（）
{
对于（变量x=0；x=宽度| |光线<0 | |光线>=高度）
{
打破
}
}
dist=Math.sqrt（Math.pow（posX-rayX，2）+Math.pow（posY-rayY，2））；
图形.线型（1,0x00FFCC）；
图形。移动到（posX*比例+2，posY*比例+2）；
graphics.lineTo（rayX*scale+Math.cos（（rayYaw）*（Math.PI/180））+2，rayY*scale+Math.sin（（rayYaw）*（Math.PI/180））+2）；
//抽绳（x+160，距离）；
rayX=posX；
rayY=posY；
}
}
功能抽绳（x，d）
{
变量切片=（32*d/160）；
变量开始=（100-（切片/2））；
图形.线型（1,0xCCCC）；
图形。移动到（x，开始）；
图形.lineTo（x，切片）；
}
函数main（）
{
drawMap（）；
move（）；
drawPlayer（）；
卡斯特雷斯（）；
渲染器。渲染（舞台）；
graphics.clear（）；
}
document.onkeydown=checkKey；
功能检查键（e）{
e=e | | window.event；
如果（e.keyCode=='38'）
{
//向上箭头
m=1；
}
否则如果（e.keyCode=='40'）
{
//向下箭头
m=-1；
}
否则如果（e.keyCode=='37'）
{
//左箭头
偏航-=0.1；
}
否则如果（e.keyCode=='39'）
{
//右箭头
偏航+=0.1；
}
}
设置间隔（主，1000/30）；

您的问题是将地图视为矩阵，而isColliding（）过于简单。您确实应该将矩阵中的每个1视为一个正方形，以确定光线是否以及在何处准确击中它

我会将castRays完全改写为更传统的光线跟踪方法：

for each point on your "screen":
  define vector V from point of view P through this point on screen
  for each line S + L*y forming sides of each square, find if your vector intersects it:
      P + V*k = S + L*y when k>0 and y is in 0..1

如果存在最短的k，则形成您的行。
沿着这条路走下去，有很大的优化空间

更新

我不想全部写出来，但这里有一篇关于光线盒交点优化的好文章，特别是当长方体或矩形与轴对齐时：

for each point on your "screen":
  define vector V from point of view P through this point on screen
  for each line S + L*y forming sides of each square, find if your vector intersects it:
      P + V*k = S + L*y when k>0 and y is in 0..1