Checking if map valid, correcting speed according to framerate

README.md

@@ -84,8 +84,8 @@ const tiles = {
 | `skybox` | `string` | `none` | Source from the skybox to display |
 | `floor` | `string` | `none` | Source from the floor to display |
 | `ceiling` | `string` | `none` | Source from the ceiling to display |
-| `speed` | `number` | `10` | Sets movement speed |
-| `rotSpeed` | `number` | `2.5` | Sets the rotation speed |
+| `speed` | `number` | `20` | Sets movement speed |
+| `rotSpeed` | `number` | `3` | Sets the rotation speed |
 
 ## Types
 

example/src/App.tsx

@@ -1,6 +1,6 @@
 import './App.css'
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { FaAdjust } from "react-icons/fa";
 import { FaArrowDown19, FaGripLinesVertical } from 'react-icons/fa6';
 
@@ -12,13 +12,14 @@ import wood from "./assets/tex/wood.png"
 import skybox from "./assets/tex/cubemap.png"
 
 import Raycaster from '../../src';
+import { Tiles } from '../../src/types/RaycastTypes';
 
 function App() {
   const [raystep, setRaystep] = useState(2)
   const [shading, setShading] = useState(true)
   const [showFPS, setShowFPS] = useState(false)
 
-  const map = [
+  const map = useMemo(() => ([
     [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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],
     [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
@@ -43,55 +44,57 @@ function App() {
     [1, 4, 0, 0, 0, 0, 0, 0, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
     [1, 4, 4, 4, 4, 4, 4, 4, 4, 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, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
-  ];
+  ]), []);
+
+  const tiles: Tiles = useMemo(() => ({
+    1: {
+      type: "wall",
+      src: obsidian,
+      collision: true,
+    },
+    2: {
+      type: "wall",
+      src: oakPlanks,
+      collision: true,
+    },
+    3: {
+      type: "sprite",
+      src: barrel,
+      collision: true,
+    },
+    4: {
+      type: "wall",
+      src: obsidian,
+      collision: true,
+    },
+    5: {
+      type: "sprite",
+      src: pillar,
+      collision: true,
+    },
+    6: {
+      type: "door",
+      src: wood,
+      collision: true,
+    }
+  }), [])
+
+  const player = useMemo(() => ({
+    x: 15,
+    y: 8,
+  }), [])
 
   return (
     <div>
       <Raycaster
-        showFPS={showFPS}
         map={map}
+        tiles={tiles}
+        player={player}
+        showFPS={showFPS}
         raystep={raystep}
-        width={1000}
-        height={600}
         floor={oakPlanks}
         skybox={skybox}
         shading={shading}
-        player={{
-          x: 15,
-          y: 8,
-        }}
-        tiles={{
-          1: {
-            type: "wall",
-            src: obsidian,
-            collision: true,
-          },
-          2: {
-            type: "wall",
-            src: oakPlanks,
-            collision: true,
-          },
-          3: {
-            type: "sprite",
-            src: barrel,
-            collision: true,
-          },
-          4: {
-            type: "wall",
-            src: obsidian,
-            collision: true,
-          },
-          5: {
-            type: "sprite",
-            src: pillar,
-            collision: true,
-          },
-          6: {
-            type: "door",
-            src: wood,
-            collision: true,
-          }
-        }}
       />
 
       <form>

src/classes/Game.tsx → src/classes/Game.ts

@@ -1,10 +1,13 @@
 import { Doors, Tiles, PlayerType } from "../types/RaycastTypes"
+import MapError from "./MapError"
 
 export default class Game {
     constructor(map: number[][], tiles: Tiles, player: PlayerType, w: number, h: number) {
         this.map = map
         this.tiles = tiles
 
+        this.checkMap(JSON.parse(JSON.stringify(map)), player.x, player.y)
+
         this.pX = player.x + .5
         this.pY = player.y + .5
 
@@ -25,6 +28,25 @@ export default class Game {
         this.doors = Array.from(Array(map.length), () => Array(map[0].length).fill(0));
     }
 
+    checkMap = (m: number[][], x: number, y: number) => {
+        if (x < 0 || y < 0 || x > m.length - 1 || y > m[x].length - 1)
+            throw new MapError("Player initial position has to be in an enclosed map");
+
+        if (m[x][y] !== 0 && this.tiles[m[x][y]].type === "wall" && this.tiles[m[x][y]].collision)
+            return;
+
+        m[x][y] = 1;
+
+        //Fill Prev row
+        this.checkMap(m, x - 1, y);
+        //Fill Next row
+        this.checkMap(m, x + 1, y);
+        //Fill Prev col
+        this.checkMap(m, x, y - 1);
+        //Fill next col
+        this.checkMap(m, x, y + 1);
+    }
+
     getMapType = (x: number, y: number) => {
         if (this.tiles[this.map[x][y]])
             return this.tiles[this.map[x][y]].type

src/classes/MapError.ts

@@ -0,0 +1,6 @@
+export default class MapError extends Error {
+    constructor(message: string) {
+        super(message);
+        this.name = "MapError";
+    }
+}