finished snake moving logic; added game over checking;

js/main.js

@@ -1,14 +1,33 @@
-import { Matrix } from './matrix.js'
+import Matrix from './matrix.js';
+import Snake from './snake.js';
 
 window.onload = function (e) {
   let field = document.querySelector('.fields');
-  let matrix = new Matrix(field);
 
   // set board dimensions and cell size
   let boardDimensions = {
     x: 20,
-    y: 13,
-    cellSize: 30 }
+    y: 10,
+    cellSize: 40
+  }
 
-  matrix.create(boardDimensions);
-}
+  // create gameboard(matrix) and snake objects
+  let matrix = new Matrix(field, boardDimensions);
+  let snake = new Snake(matrix, 5, 1, 'right');
+
+  // create gameboard and snake on the page
+  matrix.create();
+  snake.show();
+  snake.initInputListener();
+
+  // game loop
+  let gameLoop = setInterval(() => {
+    if(!snake.snekDead) {
+      snake.move(snake.direction);
+    } else {
+      console.log('snek is dead');
+      clearInterval(gameLoop);
+    }
+  }, 500);
+
+}

js/matrix.js

@@ -1,16 +1,18 @@
-export class Matrix {
-  
-  constructor(elem) {
+export default class Matrix {
+
+  constructor(elem, boardDimensions) {
     this.elem = elem;
+    this.cells = [];
+    this.boardDimensions = boardDimensions;
   }
 
   // creates a game board with given parameters
-  create(boardDimensions) {
+  create() {
     // calculate cells and board dimensions using given parameters
-    const cellsTotal = boardDimensions.x * boardDimensions.y;
-    const cellWidth = boardDimensions.cellSize + 'px';
-    const boardWidth = boardDimensions.x * boardDimensions.cellSize + 'px';
-    const boardHeight = boardDimensions.y * boardDimensions.cellSize + 'px';
+    const cellsTotal = this.boardDimensions.x * this.boardDimensions.y;
+    const cellSize = this.boardDimensions.cellSize + 'px';
+    const boardWidth = this.boardDimensions.x * this.boardDimensions.cellSize + 'px';
+    const boardHeight = this.boardDimensions.y * this.boardDimensions.cellSize + 'px';
 
     // assign widht and height to the board
     this.elem.style.width = boardWidth;
@@ -19,17 +21,28 @@ export class Matrix {
     // create cells and set their dimensions
     for(let i = 0; i < cellsTotal; i++) {
       let div = document.createElement('div');
-      div.style.width = cellWidth;
-      div.style.height = cellWidth;
+      div.style.width = cellSize;
+      div.style.height = cellSize;
       this.elem.appendChild(div);
+      this.cells[i] = '';
     }
   }
 
+  // return cell
   getCell(x, y) {
-
+    let num = this._calcNum(x, y);
+    return this.cells[num];
   }
 
+  // set cell value
   setCell(x, y, val) {
+    let num = this._calcNum(x, y, this.boardDimensions);
+    this.cells[num] = val;
+    this.elem.children[num].setAttribute('data-game', val);
+  }
 
+  // colculate cell number based on x and y coordinates
+  _calcNum(x, y) {
+    return ( y - 1 ) * this.boardDimensions.x  + ( x - 1 );
   }
 }

js/snake.js

@@ -0,0 +1,98 @@
+export default class Snake {
+
+  constructor(matrix, x, y, direction) {
+    this.matrix = matrix;
+    this.x = x;
+    this.y = y;
+    this.direction = direction;
+
+    this.snekDead = false;
+  }
+
+  show() {
+    this.matrix.setCell(this.x, this.y, 'snake');
+  }
+
+  move(direction) {
+    // save current snake position
+    let lastCoords = {
+      x: this.x,
+      y: this.y
+    }
+
+    switch(direction) {
+      case 'right':
+        this.x++;
+        break;
+
+      case 'left':
+        this.x--;
+        break;
+
+      case 'up':
+        this.y--;
+        break;
+
+      case 'down':
+        this.y++;
+        break;
+    }
+
+    if (this._snekDeadCheck()) {
+      this.snekDead = true;
+      return;
+    }
+
+    // remove snake from current cell
+    this.matrix.setCell(lastCoords.x, lastCoords.y, '');
+
+    // "move" (assign) snake to the next cell
+    this.matrix.setCell(this.x, this.y, 'snake');
+
+
+  }
+
+  initInputListener() {
+    let lastDirection = null;
+
+    window.addEventListener('keydown', (e) => {
+      switch(e.key) {
+        case 'w':
+        case 'W':
+        case 'ArrowUp':
+          if (lastDirection === 'down') break;
+          this.direction = 'up';
+          lastDirection = 'up';
+          break;
+
+        case 'a':
+        case 'A':
+        case 'ArrowLeft':
+          if (lastDirection === 'right') break;
+          this.direction = 'left';
+          lastDirection = 'left';
+          break;
+
+        case 's':
+        case 'S':
+        case 'ArrowDown':
+          if (lastDirection === 'up') break;
+          this.direction = 'down';
+          lastDirection = 'down';
+          break;
+
+        case 'd':
+        case 'D':
+        case 'ArrowRight':
+          if (lastDirection === 'left') break;
+          this.direction = 'right';
+          lastDirection = 'right';
+          break;
+      }
+    })
+  }
+
+  _snekDeadCheck() {
+    return this.x < 1 || this.x > this.matrix.boardDimensions.x || this.y < 1 || this.y > this.matrix.boardDimensions.y;
+  }
+}

style.css

@@ -25,4 +25,12 @@ html {
   float: left;
 
   box-sizing: border-box;
+}
+
+[data-game="fruit"] {
+  background-color: red;
+}
+
+[data-game="snake"] {
+  background-color: green;
 }