feat: rethink architecture

ufocoder · Apr 14, 2024 · 246e383 · 246e383
1 parent 7bbd61e
commit 246e383
Show file tree

Hide file tree

Showing 19 changed files with 519 additions and 252 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,11 @@
     <link rel="icon" type="image/svg+xml" href="/maze.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Maze</title>
+    <style>
+      #app {
+        position: absolute;
+      }
+    </style>
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/entities/Player.ts b/src/entities/Player.ts
@@ -0,0 +1,114 @@
+import { degreeToRadians } from "src/lib/utils.ts";
+
+const keyCodes = {
+    up: "KeyW",
+    down: "KeyS",
+    left: "KeyA",
+    right: "KeyD",
+}
+
+export default class Player {
+    readonly map: LevelMap;
+
+    x: number;
+    y: number;
+    angle: number;
+
+    radius: number = 0.5;
+    fov: number = 60;
+
+    moveSpeed: number = 2;
+    rotationSpeed: number = 36;
+
+    direction = {
+        up: false,
+        down: false,
+        left: false,
+        right: false,
+    };
+
+    constructor(level: Level) {
+        this.map = level.map;
+        this.x = level.player.x;
+        this.y = level.player.y;
+        this.angle = level.player.angle;
+    }
+
+    update(dt: number) {
+        this.rotate(dt);
+        this.move(dt);
+    }
+
+    protected rotate(dt: number) {
+        let k = 0
+
+        if (this.direction.right) {
+            k = 1;
+        }
+
+        if (this.direction.left) {
+            k = -1;
+        }
+
+        if (k) {
+            this.angle = this.angle + k * this.rotationSpeed * dt;
+            this.angle %= 360;
+        }
+    }
+
+    protected move(dt: number) {
+        let k = 0
+
+        if (this.direction.up) {
+            k = 1;
+        }
+
+        if (this.direction.down) {
+            k = -1;
+        }
+
+        if (k) {
+            const playerCos = Math.cos(degreeToRadians(this.angle));
+            const playerSin = Math.sin(degreeToRadians(this.angle));
+            const newX = this.x + k * playerCos * this.moveSpeed * dt;
+            const newY = this.y + k * playerSin * this.moveSpeed * dt;
+            const checkX = Math.floor(newX + k * playerCos * this.radius);
+            const checkY = Math.floor(newY + k * playerSin * this.radius);
+
+            if (this.map[checkY][checkX] == 0) {
+                this.y = newY;
+                this.x = newX;
+            } 
+        }
+    }
+
+    activateDirectionByKeyCode = (keyCode: string) => {
+        if (keyCode === keyCodes.up) {
+            this.direction.up = true;
+        }
+        if (keyCode === keyCodes.down) {
+            this.direction.down = true;
+        }
+        if (keyCode === keyCodes.left) {
+            this.direction.left = true;
+        }
+        if (keyCode === keyCodes.right) {
+            this.direction.right = true;
+        }
+    };
+
+    deactivateDirectionByKeyCode = (keyCode: string) => {
+        if (keyCode === keyCodes.up) {
+            this.direction.up = false;
+        }
+        if (keyCode === keyCodes.down) {
+            this.direction.down = false;
+        }
+        if (keyCode === keyCodes.left) {
+            this.direction.left = false;
+        }
+        if (keyCode === keyCodes.right) {
+            this.direction.right = false;
+        }
+    };
+}
diff --git a/src/global.d.ts b/src/global.d.ts
@@ -1,3 +1,22 @@
+type LevelMap = number[][];
+
+interface Level {
+    map: LevelMap;
+    player: {
+        x: number;
+        y: number;
+        angle: number;
+    };
+    exit: {
+        x: number;
+        y: number;
+    };
+    world: {
+        top: string;
+        bottom: string;
+    }
+}
+
 interface TexturePreset {
     id: string;
     url: string;
@@ -13,5 +32,5 @@ interface Texture {
     id: string;
     width: number;
     height: number;
-    colors: string[];
+    colors: string[][];
 }
diff --git a/src/lib/level.ts → src/levels/base.ts b/src/lib/level.ts → src/levels/base.ts
@@ -1,18 +1,17 @@
-export type Map = number[][];
-
-export interface Level {
-    map: Map;
-    world: {
-        top: string;
-        bottom: string;
-    }
-}
-
 const level: Level = {
     world: {
         top: '#000',
         bottom: '#54625c',
     },
+    player: {
+        x: 2,
+        y: 2,
+        angle: -30,
+    },
+    exit: {
+        x: 8,
+        y: 8,
+    },
     map: [
         [1,1,1,1,1,1,1,1,1,1],
         [1,0,0,0,0,0,0,0,0,1],

diff --git a/src/lib/canvas.ts b/src/lib/canvas.ts
@@ -13,6 +13,14 @@ interface DrawLineProps {
     color: string | CanvasGradient | CanvasPattern;
 }
 
+interface DrawVerticalLineProps {
+    x: number;
+    y1: number;
+    y2: number;
+    color: string | CanvasGradient | CanvasPattern;
+}
+
+
 interface DrawRectProps {
     x: number;
     y: number;
@@ -29,9 +37,12 @@ interface DrawCircleProps {
 }
 
 interface DrawTextProps {
+    x: number;
+    y: number;
+    align?: CanvasTextAlign;
     text: string;
     font: string;
-    color: string | CanvasGradient | CanvasPattern;
+    color?: string | CanvasGradient | CanvasPattern;
 }
 
 export default class Canvas {
@@ -65,6 +76,16 @@ export default class Canvas {
         this.context.fillRect(0, 0, this.width, this.height);
     }
 
+    drawVerticalLine({ x, y1, y2, color }: DrawVerticalLineProps) {
+        this.context.fillStyle = color;
+        this.context.fillRect(
+            x,
+            y1,
+            1,
+            y2 - y1,
+        );
+    }
+
     drawLine({ x1, y1, x2, y2, color }: DrawLineProps) {
         this.context.strokeStyle = color;
         this.context.beginPath();
@@ -84,19 +105,24 @@ export default class Canvas {
     }
 
     drawCircle({ x, y, radius, color }: DrawCircleProps) {
-        this.context.beginPath()
-        this.context.arc(x, y, radius, 0, 2 * Math.PI)
+        this.context.beginPath();
+        this.context.arc(x, y, radius, 0, 2 * Math.PI);
         this.context.fillStyle = color;
-        this.context.fill()
+        this.context.fill();
     }
 
-    drawText({ color, font, text }: DrawTextProps) {
-        this.context.fillStyle = color;
+    drawText({ x, y, color, font, text, align }: DrawTextProps) {
+        if (align) {
+            this.context.textAlign = align;
+        }
+        if (color) {
+            this.context.fillStyle = color;
+        }
         this.context.font = font;
-        this.context.fillText(text, 37, this.height / 2);
+        this.context.fillText(text, x, y);
     }
 
     clear() {
         this.context.clearRect(0, 0, this.width, this.height);
-    }    
+    }
 }
diff --git a/src/lib/loop.ts b/src/lib/loop.ts
@@ -0,0 +1,45 @@
+export interface Loop {
+    play: () => void;
+    pause: () => void;
+    checkRunning: () => boolean;
+}
+
+export default function createLoop(cb: (dt: number) => void): Loop {
+    let isRunning: boolean = false;
+    let previousTime: number;
+
+    function play() {
+        previousTime = performance.now();
+        isRunning = true;
+
+        function loop() {
+            if (!isRunning) {
+                return;
+            }
+            const currentTime = performance.now();
+            const dt = (currentTime - previousTime) / 1000;
+
+            cb(dt);
+
+            previousTime = currentTime;
+
+            requestAnimationFrame(loop);
+        }
+
+        requestAnimationFrame(loop);
+    }
+
+    function pause() {
+        isRunning = false;
+    }
+
+    function checkRunning() {
+        return isRunning;
+    }
+
+    return {
+        play,
+        pause,
+        checkRunning,
+    }
+}