const cols = ["lightgreen", "red", "magenta"]; var map = ` 11111311111 10000010001 10111111101 10001000101 10100010001 11111111101 10100000101 10001010001 11111011111 00000000000 00000000000`.substr(1).split("\n").map(line => line.split("")); var boxes = []; var goalBox; for(var y = 0; y < map.length; y++) { for(var x = 0; x < map[y].length; x++) { if(map[y][x] != 0) { if(map[y][x] == 3) { goalBox = new Box(x * 20, y * 20, cols[map[y][x] - 1]); boxes.push(goalBox); } else { boxes.push(new Box(x * 20, y * 20, cols[map[y][x] - 1])); } } } } const showMinimap = false; var resDiv = 1; const stepSize = 0.5; const maxRayDis = 140; const heightDividend = 5000; const shadingDivisor = 150; const projectionDis = 10; const projectionLength = 15; var playerAng = 0; var playerPos = [110, 210]; var playerStepSize = 2; const selectEl = query => document.querySelector(query); const getTime = () => (new Date()).getTime(); const angToRad = ang => (ang - 90) * pi / 180; const {PI: pi, round, min, max, abs, hypot, sqrt} = Math; const sin = theta => Math.sin((theta - 90) * pi / 180); const cos = theta => Math.cos((theta - 90) * pi / 180); const atan2 = (x, y) => Math.atan2(x, y) / pi * 180; const lerp = (min, max, n) => (n * (max - min)) + min; var lastTime = 0; var frames = 0; var frameRate = 0; var can, ctx; var joystickEl, joystickCenter; var joystick = { x: 0, y: 0, a: 0 }; window.onload = function() { alert("3D Maze Raycaster\nMade by Rowsej\nFramerate steadier by Baron\n\nUse the joystick in the bottom-right corner to escape the maze!\n\nGreen: wall\nPurple/magenta: Exit"); alert("If you have lots of lag, try changing JS lines 32 and 33."); can = selectEl("canvas"); window.onkeydown = function(e) { var key = e.key.toLowerCase(); switch(key) { case "w": movePlayer(cos(playerAng) * playerStepSize, sin(playerAng) * playerStepSize); break; case "s": movePlayer(cos(playerAng) * -playerStepSize, sin(playerAng) * -playerStepSize); break; case "a": playerAng -= playerStepSize * 2; break; case "d": playerAng += playerStepSize * 2; break; default: break; } }; ctx = can.getContext("2d"); ctx.textBaseline = "top"; ctx.font = "10px Arial"; joystickEl = selectEl(".joystick"); joystickCenter = selectEl(".joystickCenter"); var joystickMoveFunc = function(e) { var joystickDims = joystickEl.getBoundingClientRect(); var joystickScale = joystickDims.width / 200; var x = (e.targetTouches[0].clientX - joystickDims.x) / joystickScale - 100; var y = (e.targetTouches[0].clientY - joystickDims.y) / joystickScale - 100; var a = -atan2(x, y) + 180; var dis = hypot(x, y); if(dis > 100 * joystickScale || dis < -100 * joystickScale) { x = cos(a) * 100 * joystickScale; y = sin(a) * 100 * joystickScale; } joystickCenter.style.transform = `translate(${x}px, ${y}px)`; joystick.x = x; joystick.y = y; joystick.a = a; e.preventDefault(); }; joystickEl.addEventListener("touchstart", joystickMoveFunc); joystickEl.addEventListener("touchmove", joystickMoveFunc); joystickEl.addEventListener("touchend", function() { joystickCenter.style.transform = "none"; joystick.x = 0; joystick.y = 0; joystick.a = 0; }); lastTime = getTime(); loop(); }; function loop() { ctx.clearRect(0, 0, can.width, can.height); ctx.fillStyle = "#888"; ctx.fillRect(0, can.height / 2, can.width, can.height / 2); for(var x = 0; x < can.width; x += resDiv) { var rayPos = [playerPos[0], playerPos[1]]; var xPercent = x / can.width; var posOnProjection = lerp(-projectionLength / 2, projectionLength / 2, xPercent); var a = atan2(posOnProjection, projectionDis) + playerAng; var lineHeight = 0; var i = 0; var hit = false; var col = ""; while((i * stepSize) < maxRayDis && rayPos[0] >= 0 && rayPos[0] <= map[0].length * 20 && rayPos[1] >= 0 && rayPos[1] <= map.length * 20) { rayPos[0] += cos(a) * stepSize; rayPos[1] += sin(a) * stepSize; boxes.forEach(function(box) { if(box.checkCollision(rayPos[0], rayPos[1])) { hit = true; col = box.col; } }); if(hit) { if(i == 0) { lineHeight = can.height; } else { lineHeight = heightDividend / (i * stepSize); } break; } i++; } ctx.fillStyle = col; ctx.fillRect(x, (can.height - lineHeight) / 2, resDiv, lineHeight); var lighting = max((i * stepSize) / shadingDivisor, 0.1); ctx.fillStyle = `rgba(0, 0, 0, ${lighting})`; ctx.fillRect(x, (can.height - lineHeight) / 2, resDiv, lineHeight); ctx.fillStyle = `rgba(255, 255, 255, ${0.3 - lighting})`; ctx.fillRect(x, (can.height - lineHeight) / 2, resDiv, lineHeight); } if(showMinimap) { ctx.fillStyle = "white"; ctx.fillRect(0, 0, map[0].length * 20, map.length * 20); boxes.forEach(function(box) { box.draw(); }); ctx.fillStyle = "rgba(0, 0, 0, 0.2)"; ctx.fillRect(0, 0, map[0].length * 20, map.length * 20); ctx.fillStyle = "lightgreen"; ctx.beginPath(); ctx.arc(playerPos[0], playerPos[1], 3, 0, pi * 2); ctx.fill(); ctx.fillStyle = "green"; ctx.beginPath(); ctx.moveTo(playerPos[0], playerPos[1]); ctx.arc(playerPos[0], playerPos[1], 3, angToRad(playerAng - angleRange / 2), angToRad(playerAng + angleRange / 2)); ctx.moveTo(playerPos[0], playerPos[1]); ctx.fill(); } if(joystick.y < -30) { movePlayer(cos(playerAng) * playerStepSize / 4, sin(playerAng) * playerStepSize / 4); } else if(joystick.y > 30) { movePlayer(cos(playerAng) * -playerStepSize / 4, sin(playerAng) * -playerStepSize / 4); } if(joystick.x < -30) { playerAng -= playerStepSize / 2; } else if(joystick.x > 30) { playerAng += playerStepSize / 2; } frames++; if(getTime() - lastTime >= 1000) { frameRate = frames; frames = 0; lastTime = getTime(); // Thanks @Baron for this line which steadies the framerate excellently! resDiv = round(50 / sqrt(frameRate)); } ctx.fillStyle = "black"; ctx.fillText("FPS: " + frameRate, 0, 0); if(goalBox.checkCollision(...playerPos)) { alert("You made it out of the maze!\n\nComment '#IEscaped'"); } else { window.requestAnimationFrame(loop); } } function generateMap(map) { map = map.substr(1).split("\n").map(line => line.split("")); boxes = []; for(var y = 0; y < map.length; y++) { for(var x = 0; x < map[y].length; x++) { if(map[y][x] != 0) { if(map[y][x] == 3) { goalBox = new Box(x * 20, y * 20, cols[map[y][x] - 1]); boxes.push(goalBox); } else { boxes.push(new Box(x * 20, y * 20, cols[map[y][x] - 1])); } } } } } function movePlayer(x, y) { playerPos[0] += x; var hitting = false; boxes.forEach(function(box) { if(box.col == "magenta") return; if(box.checkCollision(playerPos[0], playerPos[1])) { hitting = true; } }); if(hitting) { playerPos[0] -= x; } playerPos[0] = min(max(playerPos[0], 0), map[0].length * 20); playerPos[1] += y; hitting = false; boxes.forEach(function(box) { if(box.col == "magenta") return; if(box.checkCollision(playerPos[0], playerPos[1])) { hitting = true; } }); if(hitting) { playerPos[1] -= y; } playerPos[1] = min(max(playerPos[1], 0), map.length * 20); } function Box(x, y, col) { this.x = x; this.y = y; this.w = 20; this.h = 20; this.col = col; this.checkCollision = function(x, y) { return x >= this.x && x <= (this.x + this.w) && y >= this.y && y <= (this.y + this.h); }; this.draw = function() { ctx.fillStyle = this.col; ctx.fillRect(this.x, this.y, this.w, this.h); }; }

3D Maze Raycaster w/Shading