maze.html

<html>
<head>
    <title>3D maze render</title>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script type="text/javascript">
        var person = {
            x: 1.5,
            y: 1.5,
            a: Math.PI / 2
        };
        var map =
                ["####################",
                 "#..#.#....#..#.#...#",
                 "#..#...##.#..#.#.W.#",
                 "#.###.....#..#.#...#",
                 "#...###...#..#.#.W.#",
                 "#WW.#........#.#...#",
                 "#...WWWW.#...#.#...#",
                 "###....#.#...#.#.W.#",
                 "#.WWWW.#.#...#.#...#",
                 "#......#...........#",
                 "#..W.WW#####.###.W.#",
                 "#..W.W...#.....#...#",
                 "#..W...#######.#...#",
                 "#.WW.#...#...#.#.W.#",
                 "#.W..###.##..#.#...#",
                 "#.W..#.........#...#",
                 "#...##.#.##..#.#.W.#",
                 "###....#.#...#.#...#",
                 "#...#..#.#...#.#...#",
                 "####################"];

        var cherry = new Image();
        cherry.src = 'img/cherry.png';

        var img = new Image();
        img.src = 'wall.jpg';

        var wood = new Image();
        wood.src = 'wood.png';

        var img2 = new Image();
        img2.src = 'wall2.jpg';

        var sky = new Image();
        sky.src = 'sky.jpg';

        function rayCast(x) {
            var du = Math.atan(x);
            var rx = Math.cos(du + person.a);
            var ry = Math.sin(du + person.a);

            var result = {
                dx: rx * 200,
                dy: ry * 200,
                textureX: 0
            };
            var px = person.x;
            var py = person.y;

            for (var k = 0; k < 100; k++) {
                var i = Math.floor(px);
                var j = Math.floor(py);
                if (map[j][i] != "." && map[j][i] != "!") {
                    result.char = map[j][i];
                    return result;
                }
                var ty;
                if (ry > 0) {
                    ty = (j + 1 - py) / ry;
                } else {
                    ty = (j - py) / ry;
                }

                var tx;
                if (rx > 0) {
                    tx = (i + 1 - px) / rx;
                } else {
                    tx = (i - px) / rx;
                }

                if (tx > ty) {
                    px += rx * (ty + 0.001);
                    py += ry * (ty + 0.001);
                    result.textureX = (px - Math.floor(px))
                } else {
                    px += rx * (tx + 0.001);
                    py += ry * (tx + 0.001);
                    result.textureX = (py - Math.floor(py))
                }

                result.dx = px - person.x;
                result.dy = py - person.y;
            }
            return result;

        }

        function drawMap() {
            var ctx = document.getElementById("map").getContext("2d");
            var blockSize = 5;

            for (var j = 0; j < map.length; j++) {
                for (var i = 0; i < map[j].length; i++) {
                    if (map[j][i] == ".") {
                        ctx.fillStyle = "white";
                    } else if (map[j][i] == "!") {
                        ctx.fillStyle = "green";
                    } else {
                        ctx.fillStyle = "red";
                    }
                    ctx.fillRect(i * blockSize, j * blockSize, blockSize, blockSize);
                }
            }
        }

        function fillMap() {
            map = Array(80)
            for (var j = 0; j < map.length; j++) {
                map[j] = Array(80)
                for (var i = 0; i < map[j].length; i++) {
                    map[j][i] = "#";
                }
            }
            map[1][1] = ".";
            doStep(1, 2);
        }

        fillMap();

        function doStep(i, j, d) {
            if (map[j][i] != "#") {
                return
            }
            if (i == 0 || i == map[0].length - 1) {
                return
            }
            if (j == 0 || j == map.length - 1) {
                return
            }
            var number1 = 0
            var number2 = 0

            for (var di = -1; di <= 1; di++) {
                for (var dj = -1; dj <= 1; dj++) {
                    if (map[j + dj][i + di] != "#") {
                        number1++;
                        break;
                    }
                }
            }

            for (var dj = -1; dj <= 1; dj++) {
                for (var di = -1; di <= 1; di++) {
                    if (map[j + dj][i + di] != "#") {
                        number2++;
                        break;
                    }
                }
            }


            if (number1 > 1 && number2 > 1) {
                return
            }
            map[j][i] = "!"

            var a = shuffleArray([0, 1, 2, 3])

            if (Math.random() < 0.3) {
                a = [d].concat(a)
            }

            for(var k = 0; k < a.length; k++) {
                switch (a[k]) {
                    case 0:
                        doStep(i + 1, j, 0);
                        break;
                    case 1:
                        doStep(i - 1, j, 1);
                        break;
                    case 2:
                        doStep(i, j + 1, 2);
                        break;
                    case 3:
                        doStep(i, j - 1, 3);
                        break;
                }
            }
        }

        function shuffleArray(array) {
            for (var i = array.length - 1; i > 0; i--) {
                var j = Math.floor(Math.random() * (i + 1));
                var temp = array[i];
                array[i] = array[j];
                array[j] = temp;
            }
            return array;
        }

        function drawOnMap(result) {
            var ctx = document.getElementById("map").getContext("2d");

            ctx.strokeStyle = "yellow";
            ctx.beginPath();
            ctx.moveTo(person.x * 5, person.y * 5);
            ctx.lineTo((person.x + result.dx) * 5, (person.y + result.dy) * 5 );
            ctx.stroke();
        }

        function getWallHeight(result, x) {
            var du = Math.atan(x);
            var len = Math.sqrt(result.dx * result.dx + result.dy * result.dy);
            return 0.5 / len / Math.cos(du);
        }

        function drawSky(ctx, canvas) {
            var dx = -person.a * 50 / sky.width;
            dx = dx - Math.floor(dx);
            ctx.drawImage(sky, dx * canvas.width - canvas.width, 0, canvas.width, canvas.width);
            ctx.drawImage(sky, dx * canvas.width, 0, canvas.width, canvas.width);
        }

        function drawAll() {
            //drawMap();
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");

            drawSky(ctx, canvas);
            ctx.fillStyle = "black";
            ctx.fillRect(0, canvas.height / 2, canvas.width, canvas.height / 2);

            var zbuffer = new Array(canvas.width)


            for (var i = 0; i < canvas.width; i++) {
                var x = i / (canvas.width / 2) - 1;
                var result = rayCast(x);
                zbuffer[i] = calcProjection(result.dx + person.x , result.dy + person.y, 0).z
                //drawOnMap(result);
                var wallHeight = getWallHeight(result, x);

                var y1 = (-wallHeight + 1) * (canvas.height / 2);
                var y2 = (wallHeight + 1) * (canvas.height / 2);

                var len = Math.sqrt(result.dx * result.dx + result.dy * result.dy);
                var alpha = len / 8;
                if (alpha < 0.999) {
                    var t_x = Math.round(result.textureX * (img.width - 1));
                    var cimg
                    if (result.char == '#') {
                        cimg = img;
                    } else {
                        cimg = wood;
                    }

                    ctx.drawImage(cimg,
                            t_x, 0, 1, img.height,
                            i, y1, 1, y2 - y1);
                }

                if (alpha > 0.001) {
                    ctx.fillStyle = "rgba(0, 0, 0, " + alpha + ")";
                    ctx.fillRect(i, y1, 1, (y2 - y1) * 2 + 1);
                }


            }

            for (var j = 0; j < map.length; j++) {
                for (var i = 0; i < map[j].length; i++) {
                    if (map[j][i] == "!") {
                        var p = calcProjection(i + 0.5, j + 0.5, 0.0)


                        if (p.z > 0.1 && zbuffer[Math.floor(p.x)] > p.z) {
                            var width = 60 / p.z
                            var height = 60 / p.z
                            ctx.drawImage(cherry, p.x - width / 2, p.y - height, width, height)
                        }
                    }
                }
            }
        }

        function calcProjection(x, y, z) {
            x = x - person.x
            y = y - person.y
            z = Math.sin(person.a) * y + Math.cos(person.a) * x


            return {
                x : canvas.width / 2 + (Math.cos(person.a) * y - Math.sin(person.a) * x) * 200 / z,
                y : canvas.height / 2 + 100 / z,
                z : z
            }
        }

        window.addEventListener("load", function (event) {
            drawAll();
        }, false);

        function movePerson(x, y) {
            if (map[Math.floor(y)][Math.floor(x)] != "#") {
                if (map[Math.floor(y)][Math.floor(x)] == "!") {
                    map[Math.floor(y)][Math.floor(x)] = "."
                }
                person.x = x;
                person.y = y;
            }
        }

        window.addEventListener('keydown', function(event) {
            switch (event.keyCode) {
                case 37: // Left
                    person.a -= 0.1;
                    break;
                case 38: // Up
                    movePerson(person.x + Math.cos(person.a) * 0.1,
                               person.y + Math.sin(person.a) * 0.1);
                    break;
                case 39: // Right
                    person.a += 0.1;
                    break;
                case 40: // Down
                    movePerson(person.x - Math.cos(person.a) * 0.1,
                               person.y - Math.sin(person.a) * 0.1);
                    break;
            }
            drawAll();
        }, false);
    </script>
</head>
<body>
<div align=center>
<h1>3D maze</h1>

<canvas id="canvas" width="400" height="400"></canvas><br/>
    Move by arrow keys.
</div >

</body>
</html>