Merge pull request #5 from ufocoder/floor

Add floor textures

src/lib/Canvas.ts

@@ -29,6 +29,12 @@ interface DrawRectProps {
     color: string | CanvasGradient | CanvasPattern;
 }
 
+interface DrawPixelProps {
+    x: number;
+    y: number;
+    color: string | CanvasGradient | CanvasPattern;
+}
+
 interface DrawCircleProps {
     x: number;
     y: number;
@@ -76,6 +82,11 @@ export default class Canvas {
         this.context.fillRect(0, 0, this.width, this.height);
     }
 
+    drawPixel({ x, y, color }: DrawPixelProps) {
+        this.context.fillStyle = color;
+        this.context.fillRect(x, y, 1, 1);
+    }
+
     drawVerticalLine({ x, y1, y2, color }: DrawVerticalLineProps) {
         this.context.fillStyle = color;
         this.context.fillRect(

src/presets.ts

@@ -3,6 +3,10 @@ export const textures: TexturePreset[] = [
     id: "wall",
     url: "./assets/bricks.png",
   },
+  {
+    id: "floor",
+    url: "./assets/floor.png",
+  }
 ];
 
 export const sounds: SoundPreset[] = [

src/views/Firstperson.ts

@@ -26,14 +26,15 @@ export default class Firstperson {
 
     _rayCasting() {
         const player = this.player;
-        const height = this.height;
         const width = this.width;
         const halfHeight = this.height / 2;
         const incrementAngle =  player.fov / width;
         const precision = 100;
+        const wallTexture = this.textureManager.get('wall');
+        const floorTexture = this.textureManager.get('floor');
 
         let rayAngle = player.angle - player.fov / 2;
-    
+
         for (let rayCount = 0; rayCount < width; rayCount++) {
             const ray = {
                 x: player.x,
@@ -75,20 +76,19 @@ export default class Firstperson {
 
 
             if (wall) {
-                const texture = this.textureManager.get('wall');
                 this._drawTexture({
                     x: rayCount,
-                    texture,
+                    texture: wallTexture,
                     ray,
                     wallHeight
                 });
             }
 
-            this.canvas.drawVerticalLine({
-                x: rayCount, 
-                y1: halfHeight + wallHeight,
-                y2: height, 
-                color: this.level.world.bottom,
+            this._drawFloor({
+                x: rayCount,
+                texture: floorTexture,
+                wallHeight,
+                rayAngle,
             });
 
             rayAngle += incrementAngle;
@@ -122,6 +122,43 @@ export default class Firstperson {
         }
     }
 
+    _drawFloor({
+        x,
+        texture,
+        wallHeight,
+        rayAngle 
+    }: {
+        x: number,
+        texture: Texture,
+        wallHeight: number,
+        rayAngle: number
+    }) {
+        const halfHeight = this.height / 2;
+
+        const start = halfHeight + wallHeight + 1;
+        const directionCos = Math.cos(degreeToRadians(rayAngle));
+        const directionSin = Math.sin(degreeToRadians(rayAngle));
+        for (let y = start; y < this.height; y++) {
+            // Create distance and calculate it
+            let distance = this.height / (2 * y - this.height);
+            distance = distance / Math.cos(degreeToRadians(this.player.angle) - degreeToRadians(rayAngle)); // Inverse fisheye fix
+
+            // Get the tile position
+            let tileX = distance * directionCos;
+            let tileY = distance * directionSin;
+            tileX += this.player.x;
+            tileY += this.player.y;
+
+            // Define texture coords
+            const textureX = Math.floor(tileX * texture.width) % texture.width;
+            const textureY = Math.floor(tileY * texture.height) % texture.height;
+
+            // Get pixel color
+            const color = texture.colors[textureX][textureY];
+            this.canvas.drawPixel({ x, y, color });
+        }
+    }
+
     renderFocusLost() {
         this.canvas.drawBackground('rgba(0,0,0,0.5)');
         this.canvas.drawText({