Start to draw map

levels/1.json

@@ -1,16 +1,17 @@
 {
-    "dimensions": [80, 40],
+    "dimensions": [40, 40],
     "delay": 200,
     "walls": [
-        [5,5], [5,6], [5,7], [5,8], [70, 35], [71, 35], [72, 35]
+        [5,5], [5,6], [5,7], [5,8], [40, 35], [38, 35], [23, 35]
     ],
     "food": [
-        [10,10]
+        [10,10],
+        [20, 20]
     ],
     "snake": [
-      [60,60],
+      [6,10],
-      [60,59],
+      [6,11],
-      [60,58]
+      [6,12]
     ]
 
 }

script.js

@@ -2,11 +2,43 @@
  * Game config
  */
 const number_levels = 2;
-const cell_width = 10;
+const cell_width = 20;
-const cell_height = 10;
+const cell_height = 20;
 
-function byId(el) {
+/**
-    return document.getElementById(el);
+ * Cells content
+ */
+let i = 0;
+const EMPTY = i++;
+const SNAKE = i++;
+const WALL = i++;
+const FOOD = i++;
+delete i;
+
+/**
+ * Get & return an element by its ID
+ * 
+ * @param {String} id The ID of the element to get
+ * @return {HTMLElement} The target element
+ */
+function byId(id) {
+    return document.getElementById(id);
+}
+
+/**
+ * Draw a line in a canvas rendering context
+ * 
+ * @param {CanvasRenderingContext2D} ctx Target context
+ * @param {Number} x1 Starting x
+ * @param {Number} y1 Starting y
+ * @param {Number} x2 Ending x
+ * @param {Number} y2 Ending y
+ */
+function drawLine(ctx, x1, y1, x2, y2) {
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2,y2);
+    ctx.stroke();
 }
 
 // Get elements
@@ -28,6 +60,9 @@ function showMainScreen() {
 
 /**
  * Start a new game
+ * 
+ * The scope of the function is the main
+ * game scope
  */
 async function startGame(gameID) {
     startScreen.style.display = "none";
@@ -45,9 +80,87 @@ async function startGame(gameID) {
 
     // Create & apply the canvas
     const canvas = document.createElement("canvas");
-    canvas.width = cell_width * level.dimensions[0];
+    canvas.width = cell_width * level.dimensions[1];
-    canvas.height = cell_height * level.dimensions[1];
+    canvas.height = cell_height * level.dimensions[0];
     canvasTarget.appendChild(canvas);
+
+    const ctx = canvas.getContext('2d');
+
+    // Initialize the map & snake arrays
+    let map = [];
+    let snake = [];
+
+    /// First with empty cells...
+    for(let i = 0; i < level.dimensions[0]; i++) {
+        let cell = [];
+        for(let j = 0; j < level.dimensions[1]; j++) {
+            cell.push(EMPTY);
+        }
+        map.push(cell)
+    }
+
+    /// ... then with cells content
+    level.walls.forEach((w) => {
+        map[w[0]-1][w[1]-1] = WALL
+    })
+
+    level.food.forEach((f) => {
+        map[f[0]-1][f[1]-1] = FOOD
+    })
+
+    level.snake.forEach((s) => {
+        map[s[0]-1][s[1]-1] = SNAKE
+        snake.push([s[0]-1, s[1]-1]);
+    })
+
+
+    /**
+     * Step function
+     * 
+     * I placed this function here to inherit
+     * the map, snake, canvas & ctx variables...
+     */
+    let interval = setInterval(() => step(), level.delay);
+    function step() {
+
+        
+        // Redraw screen
+        ctx.clearRect(0, 0, canvas.width, canvas.height)
+        
+        // First, draw the grid
+        for(let i = 0; i <= level.dimensions[1]; i++) {
+            drawLine(ctx, i*cell_width, 0, i*cell_width, canvas.height)
+        }
+        for(let i = 0; i <= level.dimensions[0]; i++) {
+            drawLine(ctx, 0, i*cell_height, canvas.width, i*cell_height, canvas.height)
+        }
+
+        
+        // Now draw the map
+        for(let y = 0; y < map.length; y++) {
+            for(let x = 0; x < map[y].length; x++) {
+
+                switch(map[y][x]) {
+
+                    case WALL:
+                        ctx.fillStyle = "darkRed";
+                        ctx.fillRect(x*cell_width, y*cell_height, cell_width, cell_height)
+                        break;
+                    
+                    case FOOD:
+                        ctx.fillStyle = "darkGreen";
+                        ctx.fillRect(x*cell_width, y*cell_height, cell_width, cell_height)
+                        break;
+
+                    case SNAKE:
+                        
+
+
+                }
+
+            }
+        }
+    }
 }
 
 /**