Two-dimensional array for map

raycaster/index.html

@@ -27,7 +27,7 @@
         this.onTouchEnd(e);
         if (t.pageY < window.innerHeight * 0.5) this.onKey(true, { keyCode: 38 });
         else if (t.pageX < window.innerWidth * 0.5) this.onKey(true, { keyCode: 37 });
-        else if (t.pageY > window.innerWidth * 0.5) this.onKey(true, { keyCode: 39 });
+        else if (t.pageX > window.innerWidth * 0.5) this.onKey(true, { keyCode: 39 });
       };
 
       Controls.prototype.onTouchEnd = function(e) {
@@ -80,7 +80,10 @@
 
       function Map(size) {
         this.size = size;
-        this.wallGrid = new Uint8Array(size * size);
+        this.wallGrid = new Array(size);
+        for (i=0; i < size; i++){
+            this.wallGrid[i] = new Array(size);
+        }
         this.skybox = new Bitmap('assets/deathvalley_panorama.jpg', 2000, 750);
         this.wallTexture = new Bitmap('assets/wall_texture.jpg', 1024, 1024);
         this.light = 0;
@@ -90,14 +93,29 @@
         x = Math.floor(x);
         y = Math.floor(y);
         if (x < 0 || x > this.size - 1 || y < 0 || y > this.size - 1) return -1;
-        return this.wallGrid[y * this.size + x];
+        return this.wallGrid[x][y];
       };
 
-      Map.prototype.randomize = function() {
+
+    Map.prototype.randomize_old = function() {
         for (var i = 0; i < this.size * this.size; i++) {
-          this.wallGrid[i] = Math.random() < 0.3 ? 1 : 0;
+            this.wallGrid[i] = Math.random() < 0.3 ? 1 : 0;
         }
-      };
+    };
+
+    Map.prototype.randomize = function() {
+        var genBorder = false;
+        for (var x = 0; x < this.size; x++) {
+            for (var y = 0; y < this.size; y++) {
+                // Build a border!
+                // This should be combined w/ an actual maze-generation-algorithm, otherwise you might wind up stuck in a wall and/or w/ an unsolvable maze
+                if(genBorder && x === 0 || x === 0) {
+                    this.wallGrid[x][y] = 1;
+                }
+                    this.wallGrid[x][y] = Math.random() < 0.3 ? 1 : 0;
+            }
+        }
+    };
 
       Map.prototype.cast = function(point, angle, range) {
         var self = this;
@@ -147,6 +165,7 @@
       };
 
       function Camera(canvas, resolution, focalLength) {
+        this.canvas = canvas;
         this.ctx = canvas.getContext('2d');
         this.width = canvas.width = window.innerWidth * 0.5;
         this.height = canvas.height = window.innerHeight * 0.5;
@@ -162,6 +181,7 @@
         this.drawSky(player.direction, map.skybox, map.light);
         this.drawColumns(player, map);
         this.drawWeapon(player.weapon, player.paces);
+        this.drawMap(0, 0, this.canvas.width * 0.2, map, player);
       };
 
       Camera.prototype.drawSky = function(direction, sky, ambient) {
@@ -232,6 +252,41 @@
         }
       };
 
+      Camera.prototype.drawMap = function(x, y, size, map, player) {
+        // Draw the map
+        var gridElementSize = size / map.size;
+        for (var xx = 0; xx < map.size; xx++) {
+          for (var yy = 0; yy < map.size; yy++) {
+            var color = map.get(xx, yy) ? "rgba(0, 0, 0, 0.5)" : "rgba(255, 255, 255, 0.5)";
+            this.ctx.fillStyle = color;
+            this.ctx.fillRect(x + xx * gridElementSize, y + yy * gridElementSize, gridElementSize, gridElementSize);
+          }
+        }
+        // Draw the player field of view 
+        var playerSize = gridElementSize * 0.7;
+        var halfPlayerSize = playerSize * 0.5;
+        var halfFOV = this.focalLength * 0.5;
+        var sin = Math.sin(player.direction - halfFOV);
+        var cos = Math.cos(player.direction - halfFOV);
+        var range = this.range * gridElementSize;
+        this.ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
+        this.ctx.beginPath();
+        xx = x + player.x * gridElementSize;
+        yy = y + player.y * gridElementSize;
+        this.ctx.moveTo(xx, yy);
+        this.ctx.lineTo(xx + cos * range, yy + sin * range);
+        sin = Math.sin(player.direction + halfFOV);
+        cos = Math.cos(player.direction + halfFOV);
+        this.ctx.lineTo(xx + cos * range, yy + sin * range);
+        this.ctx.closePath();
+        this.ctx.fill();
+        this.ctx.arc(xx, yy, range, player.direction + halfFOV, player.direction - halfFOV, true);
+        this.ctx.fill();
+        // Draw the player
+        this.ctx.fillStyle = "red";
+        this.ctx.fillRect(x + player.x * gridElementSize - halfPlayerSize, y + player.y * gridElementSize - halfPlayerSize, playerSize, playerSize);
+      }
+
       Camera.prototype.project = function(height, angle, distance) {
         var z = distance * Math.cos(angle);
         var wallHeight = this.height * height / z;