From aee98df56042e10f291384656e0dd9c6fa6a60e9 Mon Sep 17 00:00:00 2001
From: Jerry George <102449400+jrygeorge@users.noreply.github.com>
Date: Sun, 22 Sep 2024 06:17:25 +0100
Subject: [PATCH 1/2] Added maze_escape_raycaster.html

Added maze_escape_raycaster.html, a maze game that uses raycasting
---
 entries/maze_escape_raycaster.html | 545 +++++++++++++++++++++++++++++
 1 file changed, 545 insertions(+)
 create mode 100644 entries/maze_escape_raycaster.html
diff --git a/entries/maze_escape_raycaster.html b/entries/maze_escape_raycaster.html
new file mode 100644
index 00000000..12a75c39
--- /dev/null
+++ b/entries/maze_escape_raycaster.html
@@ -0,0 +1,545 @@
+<!-- A little raycasting game called Maze Escape. Jerry G (jrygeorge). -->
+<head>
+    <link rel="icon" href="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAJOgAACToAYJjBRwAAACSSURBVEhLY6xZ8+I/A40BE5SmKRi1hCRAlYjPkjkBZWEHFPskim8PlIUbUGRJMMc2KAs/INsS51+roCzCgHFhTzVZcSInJc4gwMfDwM7GBqbxgeGThEctIQmMWkISoIsljOr1hmTl+BnqibTP8Rk350NZhAFFwRVxejKUhR9QHCeBR3uhLNyA7DghBdAhdTEwAAAjyRl/u18AXgAAAABJRU5ErkJggg=="/>
+    <title>Maze Escape by jrygeorge</title>
+    <style>
+        h1 {
+            font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+            text-align: center;
+            color: antiquewhite;
+            margin: 5px;
+            text-shadow: 0px 0px 6px rgb(0, 0, 0);
+        }
+        h3 {
+            font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+            text-align: center;
+            color: antiquewhite;
+            margin: 3px;
+        }
+        h4 {
+            font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+            text-align: center;
+            color: rgb(2, 38, 41);
+            margin: 0px;
+        }
+        .stripPart{
+            width: 100%;
+             height: calc(100% / 3);
+        }
+        .sky{
+            background: rgb(124, 172, 232);
+        }
+        .wall{
+            background: rgb(230, 200, 176);
+        }
+        .ground{
+            background: rgb(39, 127, 49);
+        }
+    </style>
+</head>
+
+<body style="background-color:rgb(2, 73, 80);">
+
+<div id="casted" style="margin: auto; width: 60%; height: 80%;  background: black; box-shadow: 0px 0px 10px rgb(18,18,18);">
+    <div id="strip0" style="float: left; width: 100%; height: 100%;">
+        <div class="stripPart sky" id="sky"> </div>
+        <div class="stripPart wall" id="wall"> </div>
+        <div class="stripPart ground" id="ground"> </div>
+    </div>
+</div>
+
+<h1> 
+   &lt Maze Escape &gt<br>
+</h1> 
+<h4 id="level" style="color: antiquewhite;">
+    - Level 1 -
+</h4>
+<h3>
+    AD or ←→ or click and use Mouse to look around <br>
+    WS or ↑↓ to move 
+</h3>
+<h4>
+    made by jrygeorge :)
+</h4>
+
+<script>
+
+function changePlayerAngle(dir,control){
+    /*
+    dir is if the angle is to be increased or decreased
+    control is if we're using Mouse or Keyboard, as the amount moved is different for each
+    */
+    playerAngle = (playerAngle + dir*playerAngleStepSize[control] + 2*PI)%(2*PI);
+}
+
+function distanceToPlayer(otherX,otherY){
+    return Math.sqrt((otherX-playerPosition.x)**2 + (otherY-playerPosition.y)**2);
+}
+
+function blockInPath(newX, newY){
+    /*
+    Return the type of the block in present in the direction we're moving
+    Used to check if movement is possible.
+    */
+    let coX = Math.floor(newX/blockSize)
+    let coY = Math.floor(newY/blockSize)
+    return map[currentLevel][coY][coX];
+}
+
+function advanceLevel(){
+    // if this is the last level
+    if (currentLevel+1==map.length){
+        document.exitPointerLock();
+        alert("Congrats ! You won !!");
+         }
+    // next level or loop back to zero
+    currentLevel = (currentLevel + 1) % map.length;
+    document.querySelector("#level").textContent = "- Level "+(currentLevel+1)+" -";
+
+    playerAngle = playerStartingAngles[currentLevel];
+    playerPosition.x = playerStartingPositions[currentLevel][0];
+    playerPosition.y = playerStartingPositions[currentLevel][1];
+    }
+
+
+function computeHorizontalStripData(rayAngle){
+    // I . Distance to closest Horizontal Edge
+    let horizontalDistance = Infinity;
+    let blockType = 0;
+    let depth = 30;
+    
+    let roundY = Math.floor( playerPosition.y / blockSize) * blockSize;
+    let roundX = playerPosition.x + (-playerPosition.y+ roundY)/Math.tan(rayAngle)
+    let toCheckX = 0
+    let toCheckY = 0
+
+    // I (a) . Horizontal Edge - Looking UP
+    if ( (rayAngle > 0) && (rayAngle < PI) ){
+        let offsetY = blockSize;
+        let offsetX = blockSize / Math.tan(rayAngle);
+        toCheckX = roundX + offsetX;
+        toCheckY = roundY + offsetY;
+        while (depth > 0){
+
+            mapX = Math.floor(toCheckX / blockSize);
+            mapY = Math.floor(toCheckY / blockSize);
+            if ((mapX >=0) && (mapY>=0) && (mapX<map[currentLevel][0].length) && (mapY<map[currentLevel].length) ){
+                if (map[currentLevel][mapY][mapX] > 0){
+                    depth = -1;
+                    blockType = map[currentLevel][mapY][mapX];
+                }
+                else{
+
+                    toCheckX += offsetX;
+                    toCheckY += offsetY;
+                    depth -= 1;
+                }}
+            else{toCheckX = Infinity;
+                toCheckY = Infinity;
+                depth = -1}
+        }
+    }
+    // I (b) . Horizontal Edge - Looking DOWN
+    if ( (rayAngle > PI) && (rayAngle < 2*PI) ){
+        let offsetY = - blockSize;
+        let offsetX = - blockSize / Math.tan(rayAngle);
+        toCheckX = roundX ;
+        toCheckY = roundY ;
+        while (depth > 0){
+            mapX = Math.floor(toCheckX / blockSize);
+            mapY = Math.floor(toCheckY / blockSize)-1;
+            if ((mapX >=0) && (mapY>=0) && (mapX<map[currentLevel][0].length) && (mapY<map[currentLevel].length) ){
+                if (map[currentLevel][mapY][mapX] > 0){
+                    depth = -1;
+                    blockType = map[currentLevel][mapY][mapX];
+                }
+                else{
+                    toCheckX += offsetX;
+                    toCheckY += offsetY;
+                    depth -=1 ;
+                }}
+            else{toCheckX = Infinity;
+                toCheckY = Infinity;
+                depth = -1}
+        }
+    }
+    if ( (rayAngle == 0) || (rayAngle == PI) ){
+        toCheckX = Infinity;
+        toCheckY = Infinity;
+    }
+
+    horizontalDistance = distanceToPlayer(toCheckX,toCheckY);
+    return [horizontalDistance,blockType]
+}
+
+function computeVerticalStripData(rayAngle){
+    // II . Distance to closest Vertical Edge
+    let verticalDistance = Infinity;
+    let blockType = 0;
+    let depth = 30;
+
+    let roundX = Math.floor( playerPosition.x / blockSize) * blockSize;
+    let roundY = playerPosition.y + (-playerPosition.x+ roundX)*Math.tan(rayAngle);
+    let toCheckX = 0;
+    let toCheckY = 0;
+
+    // II (a) . Vertical Edge - Looking RIGHT
+    if ( (rayAngle > 1.5*PI) || (rayAngle < PI/2) ){
+        let offsetX = blockSize;
+        let offsetY = blockSize * Math.tan(rayAngle);
+        toCheckX = roundX + offsetX;
+        toCheckY = roundY + offsetY;
+        while (depth > 0){
+            mapX = Math.floor(toCheckX  / blockSize);
+            mapY = Math.floor(toCheckY  / blockSize);
+            if ((mapX >=0) && (mapY>=0) && (mapX<map[currentLevel][0].length) && (mapY<map[currentLevel].length) ){
+                if (map[currentLevel][mapY][mapX] > 0){
+                    depth = -1;
+                    blockType = map[currentLevel][mapY][mapX];
+                }
+                else{
+                    toCheckX += offsetX;
+                    toCheckY += offsetY;
+                    depth -= 1;
+                }}
+            else{
+                toCheckX = Infinity;
+                toCheckY = Infinity;
+                depth = -1}
+        }
+    }
+    // II (b) . Vertical Edge - Looking LEFT
+    if ( (rayAngle < 1.5*PI) && (rayAngle > PI/2) ){
+        let offsetX = - blockSize;
+        let offsetY = - blockSize * Math.tan(rayAngle);
+        toCheckX = roundX ;
+        toCheckY = roundY ;
+        while (depth > 0){
+            mapX = Math.floor(toCheckX / blockSize)-1;
+            mapY = Math.floor(toCheckY / blockSize);
+            if ((mapX >=0) && (mapY>=0) && (mapX<map[currentLevel][0].length) && (mapY<map[currentLevel].length) ){
+                if (map[currentLevel][mapY][mapX] > 0){
+                    depth = -1;
+                    blockType = map[currentLevel][mapY][mapX];
+                }
+                else{
+                    toCheckX += offsetX;
+                    toCheckY += offsetY;
+                    depth -= 1 ;
+                }}
+            else{
+                toCheckX = Infinity;
+                toCheckY = Infinity;
+                depth = -1}
+        }
+    }
+    if ( (rayAngle == PI/2 ) || (rayAngle == 1.5*PI) ){
+        toCheckX = Infinity;
+        toCheckY = Infinity;
+    }
+
+    verticalDistance = distanceToPlayer(toCheckX,toCheckY);
+    return [verticalDistance,blockType]
+}
+
+function computeStripData(){
+    stripData = []
+    for(let ray=0 ; ray<stripNumber ; ray++){
+        /*
+        Ray 0 is at angle : playerAngle + radsPerStrip*(stripNumber/2)
+        Ray N is at angle : playerAngle - radsPerStrip*(stripNumber/2)
+        i.e. Half the strips are on one side, half on the other.
+        */
+        let rayAngle = (playerAngle + radsPerStrip*(stripNumber/2 - ray) + 2*PI)%(2*PI);
+
+        horizontalData = computeHorizontalStripData(rayAngle)
+        verticalData = computeVerticalStripData(rayAngle)
+        fishCorrection = Math.cos( (playerAngle - rayAngle + 2*PI )%(2*PI) );
+
+        if (horizontalData[0] < verticalData[0])
+            {stripData.push([horizontalData[0]*fishCorrection,"H",horizontalData[1]]);}
+        else
+            {stripData.push([verticalData[0]*fishCorrection,"V",verticalData[1]]);}
+    }
+    return stripData
+}
+
+function generateStrips(){
+    for (let i = 1; i < stripNumber ; i++){
+        let currentStrip = document.querySelector('#strip0');
+        let clonedStrip = currentStrip.cloneNode(true);
+        clonedStrip.id = 'strip'+ (stripNumber-i) ;
+        currentStrip.after(clonedStrip)
+    }
+}
+
+
+function updateRandomStrips(){
+    /*
+    Genearates a sine-wave looking thing.
+    What I used initially to test if the strips were all working.
+    Not deleting it because I think it looks cool.
+    */
+    let shift = Math.random()*2 - 1
+    for (let i=0; i<stripNumber; i++){
+        let stripName = "strip" + i
+        let wallHeight = Math.abs(Math.sin(shift + (2*Math.PI*i)/(1.5*stripNumber)))*35
+        let skyGroundHeight = (100 - wallHeight)/2
+        document.querySelector("#"+stripName+" #wall").style.height = wallHeight + "%";
+        document.querySelector("#"+stripName+" #sky").style.height = skyGroundHeight + 10 + "%";
+        document.querySelector("#"+stripName+" #ground").style.height = skyGroundHeight - 10 + "%";
+    }
+}
+
+function updateAllStrips(rayInfo){
+    const blockToWallColour = new Map([
+                        ["1V", "rgb(167, 147, 130)"],
+                        ["1H", "rgb(230, 200, 176)"],
+                        ["2V", "rgb(250, 0, 0)"],
+                        ["2H", "rgb(100, 0, 0)"],
+                        ["3V", "rgb(0, 150, 0)"],
+                        ["3H", "rgb(0, 50, 0)"],
+                        ["4V", "rgb(0, 0, 256)"],
+                        ["4H", "rgb(0, 0, 100)"],
+                        ["5V", "rgb(201, 121, 16)"],
+                        ["5H", "rgb(235, 180, 52)"],
+                        ["6V", "rgb(56, 24, 150)"],
+                        ["6H", "rgb(83, 45, 196)"]
+                    ])
+
+    for (let i=0;i<stripNumber;i++){
+        
+        distance = rayInfo[i][0];
+        direction = rayInfo[i][1];
+        bType = rayInfo[i][2];
+        combo = bType+direction;
+
+        let stripName = "strip" + i;
+        let wallHeight =  Math.min(150 * blockSize / distance, 100);
+        let skyGroundHeight = (100 - wallHeight)/2;
+       
+        // Setting heights of strip components
+        document.querySelector("#"+stripName+" #wall").style.height = wallHeight + "%";
+        document.querySelector("#"+stripName+" #sky").style.height = skyGroundHeight + "%";
+        document.querySelector("#"+stripName+" #ground").style.height = skyGroundHeight + "%";
+
+        // Setting colour of wall strip component
+        document.querySelector("#"+stripName+" #wall").style.background = blockToWallColour.get(combo);
+        
+}}
+
+function updateSingleStrip(n,distance,direction){
+    let stripName = "strip" + n
+    let wallHeight =  Math.min(150 * blockSize / distance, 100)
+    let skyGroundHeight = (100 - wallHeight)/2
+
+    document.querySelector("#"+stripName+" #wall").style.height = wallHeight + "%";
+    document.querySelector("#"+stripName+" #sky").style.height = skyGroundHeight + "%";
+    document.querySelector("#"+stripName+" #ground").style.height = skyGroundHeight + "%";
+
+    if (direction == "V") {document.querySelector("#"+stripName+" #wall").style.background = "rgb(167, 147, 130)";}
+    if (direction == "H") {document.querySelector("#"+stripName+" #wall").style.background = "rgb(230, 200, 176)";}
+}
+
+
+let PI = Math.PI;
+const FOV = PI / 3;
+const stripNumber = 180;
+const radsPerStrip = FOV / stripNumber;
+let blockSize = 50 // Width and Height of a "block" on the Map
+let currentLevel = 0 
+
+// Setting width of first strip, this is then cloned
+document.getElementById("strip0").style.width = (100/stripNumber)+"%"
+
+// PLAYER INFORMATION
+let playerStepSize = 4
+let playerAngleStepSize = {"key":PI/90, "mouse":PI/360}
+let playerPosition = {x:0,y:0}
+let playerAngle = 0
+
+ // starting location for each map, [0,0] is top-left
+let playerStartingPositions = [[75,125],[75,75],[210,540],[225,75],[55,55]]
+let playerStartingAngles = [0,PI/2,15*PI/8,0,PI/4]
+
+/*
+-1    = GOAL / EXIT
+0     = SPACE
+1,2...= WALLS
+*/
+let map = [[
+            [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,1],
+            [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+            [1,0,0,0,0,0,1,0,0,0,0,0,0,0,1],
+            [1,1,1,1,1,1,1,1,1,1,1,0,0,0,1],
+            [1,1,0,0,0,0,0,0,0,1,1,0,0,0,1],
+            [1,0,0,0,0,0,0,0,0,0,1,0,0,0,1],
+            [1,0,0,0,0,0,1,1,0,0,1,0,0,0,1],
+            [1,0,0,0,0,0,1,0,0,0,1,0,0,1,1],
+            [1,0,0,0,0,0,1,0,0,0,1,0,0,0,1],
+            [1,0,0,0,0,0,1,0,0,0,1,1,0,0,1],
+            [1,0,0,0,0,0,1,0,0,0,0,0,0,0,1],
+            [1,0,0,0,0,0,1,0,0,0,0,0,0,0,1],
+            [1,0,0,0,0,0,1,0,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,1,1,1],
+            [1,0,1,0,0,0,0,0,0,0,0,0,0,0,1],
+            [1,0,1,0,1,1,1,0,3,1,1,1,1,0,1],
+            [1,0,1,0,1,0,0,0,1,0,0,0,0,0,1],
+            [1,0,1,0,1,0,1,1,1,1,1,1,1,1,1],
+            [1,0,1,0,1,0,1,0,0,0,1,0,0,0,-1],
+            [1,0,1,0,1,0,1,0,1,0,1,0,1,1,1],
+            [1,0,0,0,1,0,1,0,1,0,1,0,1,0,1],
+            [1,0,2,1,1,0,1,0,1,0,1,0,1,0,1],
+            [1,0,1,0,0,0,1,0,1,0,1,0,1,0,1],
+            [1,0,1,0,1,1,1,1,1,0,4,0,1,0,1],
+            [1,0,1,0,0,0,0,0,0,0,0,0,1,0,1],
+            [1,0,1,1,1,1,1,1,1,1,1,1,1,0,1],
+            [1,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+            [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
+        ],
+        [   
+            [2,2,2,2,2,5,5,5,5,5,5,5,5,5,5],
+            [2,0,0,2,0,0,0,0,0,0,0,0,0,0,5],
+            [2,0,0,0,0,0,2,0,0,5,0,0,5,0,5],
+            [2,0,2,2,2,2,2,2,2,5,0,0,5,5,5],
+            [2,0,0,2,0,0,0,0,0,0,0,0,5,0,5],
+            [2,0,0,0,0,0,0,0,0,0,5,0,0,0,5],
+            [2,0,2,2,2,2,2,0,5,5,5,5,5,0,5],
+            [3,0,0,2,0,0,0,0,0,0,0,5,0,0,5],
+            [3,3,0,2,0,0,0,0,0,0,0,5,0,5,5],
+            [3,0,0,2,0,0,0,0,0,0,0,5,0,0,4],
+            [3,0,0,0,0,0,0,0,0,0,0,5,0,0,4],
+            [3,0,0,2,0,0,0,0,0,0,0,0,0,0,4],
+            [3,0,2,2,0,0,0,0,0,0,0,4,0,0,4],
+            [3,0,0,2,0,0,0,0,0,0,0,4,0,0,4],
+            [3,0,0,3,3,3,3,3,0,4,4,4,0,0,4],
+            [3,3,0,0,3,0,0,0,0,4,0,0,0,4,4],
+            [3,0,0,0,0,0,3,0,0,0,0,4,0,0,4],
+            [3,0,0,3,3,3,3,3,3,3,4,4,4,4,4],
+            [3,0,0,0,3,0,0,0,0,0,0,0,0,0,4],
+            [3,0,0,0,0,0,0,0,0,0,4,0,0,0,4],
+            [3,3,3,3,3,3,3,3,4,4,4,-1,4,4,4]
+        ],
+        [   [1,-1,1,1,1,1,2,2,1,2,1,2,2,2,2,2,2,2,1,1,1],
+            [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5],
+            [1,0,1,1,1,1,2,1,2,2,1,2,2,2,2,2,2,2,0,0,5],
+            [2,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5],
+            [1,0,1,0,5,5,0,1,1,1,1,1,1,0,0,0,0,0,0,0,5],
+            [2,0,1,0,0,0,0,0,0,0,0,0,0,0,0,4,4,0,4,0,5],
+            [1,0,2,2,2,2,2,0,1,1,1,1,1,0,0,0,4,0,4,0,5],
+            [1,0,2,0,0,0,0,0,0,0,0,0,1,5,0,0,4,0,4,0,5],
+            [2,0,2,0,0,3,0,4,0,3,0,0,1,0,0,0,4,0,4,0,5],
+            [2,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0,4,0,4,0,5],
+            [1,0,1,0,0,4,0,3,0,4,0,0,1,0,0,4,4,0,0,0,5],
+            [2,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,4,4,2,4,5],
+            [2,0,2,0,0,3,0,4,0,3,0,0,4,4,0,0,0,0,0,0,5],
+            [1,0,1,4,0,0,0,0,0,0,0,0,4,0,0,1,1,1,1,0,5],
+            [1,0,0,3,3,1,1,1,0,4,4,0,4,0,0,0,0,0,1,0,5],
+            [1,5,0,0,3,0,0,3,0,4,0,0,4,4,1,1,1,1,1,0,5],
+            [1,0,0,0,0,0,3,3,0,0,0,0,0,0,0,0,0,0,0,0,5],
+            [1,0,0,1,1,1,1,1,1,1,4,4,1,1,1,0,0,0,0,0,5],
+            [1,0,0,0,1,0,0,0,0,0,0,0,5,0,0,0,3,3,3,3,5],
+            [1,0,0,0,0,0,0,0,0,0,4,0,0,0,5,0,0,0,0,0,5],
+            [1,3,3,3,3,3,3,3,4,4,4,1,4,4,5,5,5,5,5,5,5]
+        ],
+        [   [2, 3, 4, 5, 4, 3, 4, 5, 2, 3, 4, 2, 3, 4, 5, 2, 3, 4, 2, 5, 3, 2, 4, 5, 3, 5],
+            [3, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6],
+            [4, 0, 2, 4, 5, 3, 2, 0, 3, 0, 5, 3, 4, 2, 3, 0, 4, 3, 4, 0, 2, 5, 0, 0, 0, 3],
+            [2, 0, 3, 0, 0, 0, 4, 0, 4, 0, 4, 0, 0, 0, 5, 0, 5, 0, 0, 0, 3, 0, 0, 6, 0, 4],
+            [4, 0, 6, 0, 2, 0, 3, 0, 2, 0, 3, 0, 2, 0, 3, 0, 2, 0, 0, 2, 0, 0, 5, 2, 0, 3],
+            [6, 0, 2, 0, 4, 0, 2, 0, 3, 0, 2, 0, 3, 0, 4, 0, 5, 5, 4, 0, 0, 3, 0, 0, 0, 5],
+            [3, 0, 4, 0, 3, 0, 4, 0, 5, 0, 4, 0, 4, 0, 6, 0, 6, 3, 0, 0, 6, 5, 3, 4, 0, 6],
+            [6, 0, 5, 0, 5, 0, 3, 0, 0, 0, 3, 0, 5, 0, 5, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 5],
+            [4, 0, 0, 0, 4, 0, 4, 5, 3, 2, 4, 0, 4, 0, 6, 0, 2, 5, 4, 0, 0, 3, 0, 5, 0, 3],
+            [2, 4, 3, 2, 5, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 3, 0, 3, 2, 0, 5, 0, 3, 0, 4],
+            [6, 0, 0, 0, 0, 0, 5, 3, 2, 3, 6, 5, 3, 5, 3, 2, 4, 0, 0, 0, 0, 4, 0, 2, 0, 3],
+            [3, 0, 4, 5, 3, 2, 4, 0, 4, 0, 0, 0, 5, 0, 0, 0, 0, 0, 3, 2, 3, 5, 0, 4, 0, 2],
+            [2, 0, 2, 0, 0, 0, 3, 0, 0, 0, 6, 0, 3, 0, 3, 0, 2, 0, 4, 0, 0, 0, 0, 6, 0, 6],
+            [6, 0, 3, 0, 2, 0, 2, 5, 4, 2, 3, 0, 0, 0, 5, 4, 3, 0, 5, 0, 5, 3, 4, 2, 0, 4],
+            [2, 0, 0, 0, 3, 0, 0, 0, 0, 0, 2, 4, 6, 4, 3, 0, 0, 0, 0, 0, 3, 0, 2, 0, 0, 2],
+            [5, 4, 3, 0, 4, 5, 3, 5, 2, 0, 0, 0, 0, 0, 2, 5, 4, 3, 2, 0, 0, 0, 0, 0, 4, 3],
+            [6, 0, 0, 0, 0, 0, 0, 0, 3, 5, 2, 3, 6, 0, 0, 0, 0, 0, 4, 2, 3, 5, 4, 5, 3, 4],
+            [2, 0, 4, 0, 2, 3, 4, 0, 0, 0, 0, 0, 4, 2, 5, 3, 4, 0, 0, 0, 0, 0, 0, 0, 0, 5],
+            [4, 0, 3, 0, 2, 0, 5, 3, 6, 4, 3, 0, 0, 0, 0, 0, 5, 2, 3, 2, 4, 6, 0, 4, 0, 4],
+            [3, 0, 4, 0, 0, 0, 0, 0, 0, 0, 2, 5, 4, 2, 5, 0, 0, 0, 0, 0, 6, 0, 0, 2, 0, 3],
+            [5, 0, 2, 4, 5, 6, 4, 2, 3, 4, 2, 0, 0, 0, 3, 2, 4, 5, 3, 0, 2, 0, 4, 3, 0, 2],
+            [4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 3, 4, 0, 0, 0, 0, 0, 0, 0, 6, 0, 0, 0, 0, 5],
+            [2, 5, 6, 2, 4, 0, 2, 4, 3, 0, 0, 0, 0, 0, 0, 3, 0, 2, 0, 3, 4, 3, 2, 4, 5, 3],
+            [6, 0, 0, 0, 6, 0, 3, 0, 2, 4, 5, 4, 3, 2, 5, 2, 0, 6, 0, 2, 0, 0, 0, 3, 0, 5],
+            [4, 0, 5, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 3, 0, 0, 0, 4],
+            [5, -1, 6, 2, 3, 2, 5, 4, 6, 3, 4, 2, 6, 3, 6, 5, 4, 2, 3, 2, 4, 5, 2, 4, 3, 2]
+    ]
+]
+
+// Throwing my own errors because I'm a professional
+if ((map.length != playerStartingAngles.length)||
+    (map.length != playerStartingPositions.length)||
+    (playerStartingAngles.length != playerStartingPositions.length)){
+        throw new Error("Map, playerStartingPositions, playerStartingAngles must have same length !!")
+    }
+
+
+document.addEventListener('keydown', function(event){
+
+    if (["a","ArrowLeft"].includes(event.key)){
+        changePlayerAngle(1,"key");
+    }
+    if (["d","ArrowRight"].includes(event.key)){
+        changePlayerAngle(-1,"key");
+    }
+    if (["w","ArrowUp"].includes(event.key)){
+        futureX = playerPosition.x + playerStepSize*Math.cos(playerAngle);
+        futureY = playerPosition.y + playerStepSize*Math.sin(playerAngle);
+        if (blockInPath(futureX,futureY)==0){
+            playerPosition.x = futureX;
+            playerPosition.y = futureY;
+        }
+        if (blockInPath(futureX,futureY)==-1){
+            advanceLevel();
+        }
+    }
+    if (["s","ArrowDown"].includes(event.key)){
+        futureX = playerPosition.x - playerStepSize*Math.cos(playerAngle);
+        futureY = playerPosition.y - playerStepSize*Math.sin(playerAngle);
+        if (blockInPath(futureX,futureY)==0){
+            playerPosition.x = futureX;
+            playerPosition.y = futureY;
+        }
+        if (blockInPath(futureX,futureY)==-1){
+            advanceLevel();
+        }
+    }
+    if (["w","a","s","d","ArrowUp","ArrowRight","ArrowDown","ArrowLeft"].includes(event.key)){
+        SD = computeStripData();
+        updateAllStrips(SD);
+    }
+} );
+
+window.addEventListener('load', function(event){
+    generateStrips();
+    playerPosition.x = playerStartingPositions[currentLevel][0];
+    playerPosition.y = playerStartingPositions[currentLevel][1];
+    playerAngle = playerStartingAngles[currentLevel]
+    updateAllStrips(computeStripData());
+    }
+  );
+
+document.body.addEventListener("mousemove", function (e) {
+    if(document.pointerLockElement !== null){
+        changePlayerAngle(-e.movementX,"mouse");
+        updateAllStrips(computeStripData());
+}});
+
+document.addEventListener("click", function (e) {
+    document.body.requestPointerLock();
+    });
+
+
+
+</script>
+
+</body>
\ No newline at end of file

From 61649854d0264977f6752c736fea236688e321f2 Mon Sep 17 00:00:00 2001
From: Jerry George <102449400+jrygeorge@users.noreply.github.com>
Date: Sun, 22 Sep 2024 06:24:59 +0100
Subject: [PATCH 2/2] Added maze_escape_raycaster.html to entries.js

---
 entries.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/entries.js b/entries.js
index 5d90a0d4..fca3e50e 100644
--- a/entries.js
+++ b/entries.js
@@ -609,4 +609,11 @@ const entries = [
 		author: "Rupesh Soni",
 		github: "rsoni124"
 	},
+	{
+		title: "Maze Escape",
+		filename: "maze_escape_raycaster.html",
+		description: "A game where you have to escape from a maze. Works by using raycasting.",
+		author: "Jerry George",
+		github: "jrygeorge"
+	}
 ];
