added start logic

src/config.js

@@ -1,15 +1,15 @@
 
 export default {
-  unit: 10,
+  unit: 20,
   dimensions: {
-    width: 50,
+    width: 30,
-    height: 50,
+    height: 30,
   },
   snake: {
     direction: 'left',
     x: 25,
     y: 25,
-    body: 3,
+    body: 2,
     speed: 100,
     log: [],
   },

src/index.js

@@ -5,6 +5,8 @@ import _ from 'lodash';
 
 const { dimensions, unit, snake, food } = config;
 
+let GAME_STARTED = false;
+
 /**
  * Draw the board
  */
@@ -21,12 +23,11 @@ createDivElement('board', {
 
 for (let i = 0; i < dimensions.height; i++) {
   for (let j = 0; j < dimensions.width; j++) {
-
     createDivElement(`${i + 1}.${j + 1}`, {
       width: `${unit}px`,
       height: `${unit}px`,
       display: 'inline-block',
-      background: '#eee',
+      background: '#000',
     }, 'board');
   }
 }
@@ -44,7 +45,7 @@ const showSnake = () => {
     const logEvent = snake.log[snake.log.length - (1 + i)];
 
     setBrickColor(
-      'deeppink',
+      'yellow',
       (logEvent || {}).x,
       (logEvent || {}).y,
     );
@@ -56,7 +57,7 @@ const hideSnake = () => {
     const logEvent = snake.log[snake.log.length - (1 + snake.body + i)];
 
     setBrickColor(
-      '#eee',
+      '#000',
       (logEvent || {}).x,
       (logEvent || {}).y,
     );
@@ -91,18 +92,18 @@ const moveSnake = (direction) => {
   }
 
   if (snake.y < 1) {
-    snake.y = 50;
+    snake.y = dimensions.height;
   }
 
   if (snake.x < 1) {
-    snake.x = 50;
+    snake.x = dimensions.width;
   }
 
-  if (snake.x > 50) {
+  if (snake.x > dimensions.width) {
     snake.x = 1;
   }
 
-  if (snake.y > 50) {
+  if (snake.y > dimensions.height) {
     snake.y = 1;
   }
 
@@ -122,6 +123,11 @@ setSnakeDirection = (direction) => snake.direction = direction;
 
 document.onkeydown = function(e) {
   switch (e.keyCode) {
+    case 13:
+      if (GAME_STARTED) {
+        return;
+      }
+      startGame();
     case 37:
       setSnakeDirection('left');
       break;
@@ -142,8 +148,8 @@ document.onkeydown = function(e) {
  */
 
 const makeFood = () => {
-  const x = _.random(50);
+  const x = _.random(1, config.dimensions.width);
-  const y = _.random(50);
+  const y = _.random(1, config.dimensions.height);
 
   if (_.find(snakeBody, { x, y })) {
     console.log('food placed under the snake...');
@@ -163,7 +169,7 @@ const makeFood = () => {
   const snakeLength = snake.log.length - 1;
   const snakeBody = snake.log.slice((snakeLength - snake.body), snakeLength);
 
-  setBrickColor('blue', x, y);
+  setBrickColor('red', x, y);
 };
 
 /**
@@ -174,7 +180,7 @@ const checkIfSnakeIsEating = () => {
   if (snake.x === food.x && snake.y === food.y) {
     makeFood();
     snake.body = snake.body + 1;
-    snake.speed = snake.speed - 23;
+    snake.speed = snake.speed + 23;
   }
 };
 
@@ -182,13 +188,17 @@ const checkIfSnakeIsEating = () => {
  * Check collision
  */
 
+let GAME_RUNNING;
+
 const checkCollision = () => {
   const snakeLength = snake.log.length - 2;
   const snakeBody = snake.log.slice((snakeLength - snake.body), snakeLength);
   const snakeHead = { x: snake.x, y: snake.y };
 
   if (_.find(snakeBody, snakeHead)) {
-    alert('Oh noooo! Collision.... Start again?');
+    GAME_STARTED = false;
+    clearInterval(GAME_RUNNING);
+    startScreen();
   }
 }
 
@@ -196,11 +206,101 @@ const checkCollision = () => {
  * Run game
  */
 
-setInterval(() => {
+const startGame = () => {
-  checkCollision();
+  GAME_STARTED = true;
-  moveSnake(snake.direction);
+  makeFood();
-  checkIfSnakeIsEating();
+  showSnake();
-}, snake.speed);
 
-makeFood();
+  GAME_RUNNING = setInterval(() => {
+    console.log('running');
+    checkCollision();
+    moveSnake(snake.direction);
+    checkIfSnakeIsEating();
+  }, snake.speed);
+};
+
+const startScreen = () => {
+  // S
+  setBrickColor('#333', 2, 2);
+  setBrickColor('#333', 2, 3);
+  setBrickColor('#333', 2, 4);
+  setBrickColor('#333', 2, 5);
+  setBrickColor('#333', 2, 5);
+  setBrickColor('#333', 3, 2);
+  setBrickColor('#333', 4, 3);
+  setBrickColor('#333', 5, 4);
+  setBrickColor('#333', 6, 5);
+  setBrickColor('#333', 7, 5);
+  setBrickColor('#333', 7, 5);
+  setBrickColor('#333', 7, 4);
+  setBrickColor('#333', 7, 3);
+  setBrickColor('#333', 7, 2);
+  // N
+  setBrickColor('#333', 2, 7);
+  setBrickColor('#333', 3, 7);
+  setBrickColor('#333', 4, 7);
+  setBrickColor('#333', 5, 7);
+  setBrickColor('#333', 6, 7);
+  setBrickColor('#333', 7, 7);
+  setBrickColor('#333', 3, 8);
+  setBrickColor('#333', 4, 9);
+  setBrickColor('#333', 5, 9);
+  setBrickColor('#333', 6, 10);
+  setBrickColor('#333', 7, 11);
+  setBrickColor('#333', 6, 11);
+  setBrickColor('#333', 5, 11);
+  setBrickColor('#333', 4, 11);
+  setBrickColor('#333', 3, 11);
+  setBrickColor('#333', 2, 11);
+  // A
+  setBrickColor('#333', 2, 13);
+  setBrickColor('#333', 3, 13);
+  setBrickColor('#333', 4, 13);
+  setBrickColor('#333', 5, 13);
+  setBrickColor('#333', 6, 13);
+  setBrickColor('#333', 7, 13);
+  setBrickColor('#333', 2, 14);
+  setBrickColor('#333', 2, 15);
+  setBrickColor('#333', 2, 16);
+  setBrickColor('#333', 2, 17);
+  setBrickColor('#333', 3, 17);
+  setBrickColor('#333', 4, 17);
+  setBrickColor('#333', 5, 17);
+  setBrickColor('#333', 6, 17);
+  setBrickColor('#333', 7, 17);
+  setBrickColor('#333', 5, 16);
+  setBrickColor('#333', 5, 15);
+  setBrickColor('#333', 5, 14);
+  // K
+  setBrickColor('#333', 2, 19);
+  setBrickColor('#333', 3, 19);
+  setBrickColor('#333', 4, 19);
+  setBrickColor('#333', 5, 19);
+  setBrickColor('#333', 6, 19);
+  setBrickColor('#333', 7, 19);
+  setBrickColor('#333', 5, 20);
+  setBrickColor('#333', 6, 21);
+  setBrickColor('#333', 7, 22);
+  setBrickColor('#333', 4, 20);
+  setBrickColor('#333', 3, 21);
+  setBrickColor('#333', 2, 22);
+  // E
+  setBrickColor('#333', 2, 24);
+  setBrickColor('#333', 3, 24);
+  setBrickColor('#333', 4, 24);
+  setBrickColor('#333', 5, 24);
+  setBrickColor('#333', 6, 24);
+  setBrickColor('#333', 7, 24);
+  setBrickColor('#333', 2, 25);
+  setBrickColor('#333', 2, 26);
+  setBrickColor('#333', 2, 27);
+  setBrickColor('#333', 2, 28);
+  setBrickColor('#333', 7, 25);
+  setBrickColor('#333', 7, 26);
+  setBrickColor('#333', 7, 27);
+  setBrickColor('#333', 7, 28);
+  setBrickColor('#333', 4, 25);
+}
+
+startScreen();