3D射线广播-当射线朝上或朝右时，墙上的怪异线

问题描述

我正在尝试制作光线投射游戏。正确绘制了所有内容，除非在墙上绘制了光线朝上（角度> PI）或朝右（角度> 0.5PI和

我没有足够的声誉来发布图片。

左右光线墙。 （https://i.imgur.com/DKlfzM3.png）

墙壁紧闭。 （https://i.imgur.com/orP89sT.png）

左右光线墙。 （https://i.imgur.com/YVggx51.png）

代码：

        let rayX,rayY,rayAngle,rayDeltaX,rayDeltaY

        for (let i = 0; i < this.screen.width; i ++) {
            rayAngle = this.angle - this.fov / 2 + i * (this.fov / this.screen.width)
            
            if (rayAngle < 0) {
                rayAngle += Math.PI * 2
            }
            else if (rayAngle > Math.PI * 2) {
                rayAngle -= Math.PI * 2
            }

            rayX = this.x
            rayY = this.y

            let stepY

            if (rayAngle > Math.PI) {
                stepY = -this.tileSize
                rayY = Math.floor(rayY / this.tileSize) * this.tileSize - 1
            }
            else {
                stepY = this.tileSize
                rayY = Math.floor(rayY / this.tileSize) * this.tileSize + this.tileSize
            }

            rayX = this.x  + (rayY - this.y) / Math.tan(rayAngle)
         
            rayDeltaY = stepY
            rayDeltaX = stepY / Math.tan(rayAngle)

            while(true) {
                if (this.Map.map[Math.floor(rayY / this.tileSize) * this.Map.width + Math.floor(rayX / this.tileSize)] == '#') {
                    break
                }

                rayX += rayDeltaX
                rayY += rayDeltaY
            }

            let rayHorizontalX = rayX
            let rayHorizontalY = rayY
            let rayDistanceHorizontal = Math.sqrt((this.x - rayHorizontalX) ** 2 + (this.y - rayHorizontalY) ** 2)

            rayX = this.x
            rayY = this.y

            let stepX

            if (rayAngle > 0.5 * Math.PI && rayAngle < 1.5 * Math.PI) {
                stepX = -this.tileSize
                rayX = Math.floor(rayX / this.tileSize) * this.tileSize - 1
            }
            else {
                stepX = this.tileSize
                rayX = Math.floor(rayX / this.tileSize) * this.tileSize + this.tileSize
            }

            rayY = this.y + (rayX - this.x) * Math.tan(rayAngle)
    
            rayDeltaY = stepX * Math.tan(rayAngle)
            rayDeltaX = stepX

            while(true) {
                if (this.Map.map[Math.floor(rayY / this.tileSize) * this.Map.width + Math.floor(rayX / this.tileSize)] == '#') {
                    break
                }
    
                rayX += rayDeltaX
                rayY += rayDeltaY
            }
            
            let rayVerticalX = rayX
            let rayVerticalY = rayY
            let rayDistanceVertical = Math.sqrt((this.x - rayVerticalX) ** 2 + (this.y - rayVerticalY) ** 2)
            
            let rayFinalDistance

            if (rayDistanceHorizontal < rayDistanceVertical) {
                rayFinalDistance = rayDistanceHorizontal
                ctx.fillStyle = 'darkblue'
            }
            else {
                rayFinalDistance = rayDistanceVertical
                ctx.fillStyle = 'blue'
            }

            let rayCorrectedDistance = rayFinalDistance * Math.cos(rayAngle - this.angle)

            let lineHeight = this.tileSize * (this.screen.width / 2 / Math.tan(this.fov / 2)) / rayCorrectedDistance
            let lineBottom = this.projectionPlane.centerY + lineHeight * 0.5
            let lineTop = this.projectionPlane.height - lineBottom

            ctx.fillRect(i,lineTop,1,lineHeight)
        }

任何帮助将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）