https://mpp.terrium.net/ raycaster

raycaster.js

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

function drawPixel(x, y, color) {
    MPP.addons.draw.mkline(x - 1, y, x, y, 100, color)
}

function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
    return "#" + componentToHex(parseInt(r)) + componentToHex(parseInt(g)) + componentToHex(parseInt(b));
}

function getRandomColor() {
    return rgbToHex(parseInt(Math.random() * 255), parseInt(Math.random() * 255), parseInt(Math.random() * 255))
}

var centerX = 50;
var centerY = 50;
var ii = 0;
var size = 23;

const w = 155;


async function clean() {
    let ii = 0;
    return new Promise((resolve, reject) => {
        for (let y = 0; y < 255 / 2; y += 1) {
            setTimeout(() => {
                MPP.addons.draw.mkline(255 - w, y, 255, y, 100, y < 255 / 4 ? rgbToHex(y / 1, y / 2, y / 1) : rgbToHex(y * 1, y * 1, y * 1));
                if (y === parseInt(255 / 2) - 1) {
                    resolve('foo');
                }
            }, ++ii * 3)
        }
    })
}


(async function() {
    let posX = 9.3;
    let posY = 9.4;
    let dirX = -1;
    let dirY = 0;
    let planeX = 0;
    let planeY = 0.99;
    let rotSpeed = -Math.PI / 8;
    setInterval(async () => {

        let oldDirX = dirX;
        dirX = dirX * Math.cos(-rotSpeed) - dirY * Math.sin(-rotSpeed);
        dirY = oldDirX * Math.sin(-rotSpeed) + dirY * Math.cos(-rotSpeed);
        let oldPlaneX = planeX;
        planeX = planeX * Math.cos(-rotSpeed) - planeY * Math.sin(-rotSpeed);
        planeY = oldPlaneX * Math.sin(-rotSpeed) + planeY * Math.cos(-rotSpeed);


        let map = [
            [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, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [1, 1, 0, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0],
            [0, 1, 0, 1, 0, 1, 1, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0],
            [1, 0, 1, 0, 0, 1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0],
            [1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0],
            [1, 1, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 1, 0, 1, 0, 1, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 1, 1, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 1, 1, 1, 0, 1, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0]
        ]

        await clean();
        console.log("done");

        ii = 0;

        for (let x = 0; x < w; x += 1) {


            setTimeout(() => {

                let cameraX = 2 * x / w - 1;
                const rayDirX = dirX + planeX * cameraX;
                const rayDirY = dirY + planeY * cameraX;
                let mapX = parseInt(posX);
                let mapY = parseInt(posY);
                let sideDistX, sideDistY;
                const deltaDistX = Math.abs(1 / rayDirX);
                const deltaDistY = Math.abs(1 / rayDirY);
                let stepX;
                let stepY;
                let hit = false;
                let side = 0;
                if (rayDirX < 0) {
                    stepX = -1;
                    sideDistX = (posX - mapX) * deltaDistX;
                } else {
                    stepX = 1;
                    sideDistX = (mapX + 1.0 - posX) * deltaDistX;
                }
                if (rayDirY < 0) {
                    stepY = -1;
                    sideDistY = (posY - mapY) * deltaDistY;
                } else {
                    stepY = 1;
                    sideDistY = (mapY + 1.0 - posY) * deltaDistY;
                }
                while (!hit) {
                    //jump to next map square, OR in x-direction, OR in y-direction
                    if (sideDistX < sideDistY) {
                        sideDistX += deltaDistX;
                        mapX += stepX;
                        side = 0;
                    } else {
                        sideDistY += deltaDistY;
                        mapY += stepY;
                        side = 1;
                    }
                    //Check if ray has hit a wall
                    if (map[mapY] === undefined || map[mapY][mapX] === undefined) break;
                    if (map[mapY][mapX] > 0) hit = true;

                }
                if (hit) {
                    if (side === 0) perpWallDist = (mapX - posX + (1 - stepX) / 2) / rayDirX;
                    else perpWallDist = (mapY - posY + (1 - stepY) / 2) / rayDirY;


                    const height = 128 / 2 / perpWallDist;
                    const baseColor = side === 0 ? [180, 200, 200] : [255, 255, 240];
                    baseColor[0] = x % 2 == 0 ? baseColor[0] += 10 : baseColor[0]
                    MPP.addons.draw.mkline(255 - x, 255 / 4 - height / 2, 255 - x, 255 / 4 + height / 2, 100, rgbToHex(baseColor[0] - (w / 2) / height * 40, baseColor[1] - (w / 2) / height * 40, baseColor[2] - (w / 2) / height * 40));


                }


            }, ii++ * 4)
        }
    }, 1000);
})()