Merge 0ffaa4d08e91761b6d304f61efdc9520c4769f51 into 17573e0135f120d570a474b7765f6c5619f1b424

README.md

@@ -5,7 +5,7 @@ A snake implementation with vanilla JavaScript
 [PLAY!](http://zzznake.surge.sh/)
 
 Todo
-* [ ] Add restart logic
+* [x] Add restart logic
 * [ ] Make it functional
 * [ ] Use canvas instead of div's
 * [ ] Add animations

src/config.js

@@ -1,4 +1,3 @@
-
 export default {
   unit: 20,
   dimensions: {
@@ -14,5 +13,5 @@ export default {
   food: {
     x: null,
     y: null,
-  }
+  },
 };

src/index.js

@@ -1,15 +1,15 @@
-import { random, find, takeRight } from 'lodash';
-import config from './config';
-import { createDivElement, setDivColor, setDivsColor, drawLetter } from './utils/div';
-import keys from './utils/keys';
-import { S, N, A, K, E } from './utils/letters';
+import { random, find, takeRight } from "lodash";
+import config from "./config";
+import {
+  createDivElement,
+  setDivColor,
+  setDivsColor,
+  drawLetter,
+} from "./utils/div";
+import keys from "./utils/keys";
+import { S, N, A, K, E } from "./utils/letters";
 
-const {
-  dimensions,
-  unit,
-  snake,
-  food,
-} = config;
+const { dimensions, unit, snake, food } = config;
 
 let GAME_STARTED = false;
 let GAME_RUNNING;
@@ -21,11 +21,11 @@ let SNAKE_SPEED = 100;
  * Draw the board
  */
 
-createDivElement('board', {
+createDivElement("board", {
   height: `${unit * dimensions.height}px`,
   width: `${unit * dimensions.width}px`,
-  position: 'relative',
-  fontSize: '0',
+  position: "relative",
+  fontSize: "0",
 });
 
 /**
@@ -34,12 +34,16 @@ 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: '#000',
-    }, 'board');
+    createDivElement(
+      `${i + 1}.${j + 1}`,
+      {
+        width: `${unit}px`,
+        height: `${unit}px`,
+        display: "inline-block",
+        background: "#000",
+      },
+      "board"
+    );
   }
 }
 
@@ -47,9 +51,10 @@ for (let i = 0; i < dimensions.height; i++) {
  * Draw the snake
  */
 
-const showSnake = () => setDivsColor(takeRight(SNAKE_LOG, snake.body), 'yellow');
+const showSnake = () =>
+  setDivsColor(takeRight(SNAKE_LOG, snake.body), "yellow");
 
-const hideSnake = () => setDivsColor(takeRight(SNAKE_LOG, snake.body), 'black');
+const hideSnake = () => setDivsColor(takeRight(SNAKE_LOG, snake.body), "black");
 
 /**
  * Move the snake
@@ -62,19 +67,19 @@ const pushToSnakeLog = (cords) => {
 const moveSnake = (direction) => {
   hideSnake();
 
-  if (direction === 'left') {
+  if (direction === "left") {
     snake.y--;
   }
 
-  if (direction === 'up') {
+  if (direction === "up") {
     snake.x--;
   }
 
-  if (direction === 'right') {
+  if (direction === "right") {
     snake.y++;
   }
 
-  if (direction === 'down') {
+  if (direction === "down") {
     snake.x++;
   }
 
@@ -103,29 +108,29 @@ const moveSnake = (direction) => {
  * Set key events
  */
 
-const setSnakeDirection = direction => SNAKE_DIRECTION = direction;
+const setSnakeDirection = (direction) => (SNAKE_DIRECTION = direction);
 
-const keyFunctions = ({ keyCode }) => {
+const keyFunctions = ({ keyCode }) => {
   switch (keyCode) {
     case keys.ENTER:
       if (GAME_STARTED) return;
       startGame();
     case keys.LEFT:
-      setSnakeDirection('left');
+      setSnakeDirection("left");
       break;
     case keys.UP:
-      setSnakeDirection('up');
+      setSnakeDirection("up");
       break;
     case keys.RIGHT:
-      setSnakeDirection('right');
+      setSnakeDirection("right");
       break;
     case keys.DOWN:
-      setSnakeDirection('down');
+      setSnakeDirection("down");
       break;
   }
 };
 
-document.addEventListener('keydown', keyFunctions);
+document.addEventListener("keydown", keyFunctions);
 
 /**
  * Make food
@@ -136,24 +141,24 @@ const makeFood = () => {
   const y = random(1, config.dimensions.height);
 
   const snakeLength = SNAKE_LOG.length - 1;
-  const snakeBody = SNAKE_LOG.slice((snakeLength - snake.body), snakeLength);
+  const snakeBody = SNAKE_LOG.slice(snakeLength - snake.body, snakeLength);
 
   if (find(snakeBody, { x, y })) {
-    console.log('food placed under the snake...');
+    console.log("food placed under the snake...");
     return makeFood();
   }
 
   food.x = x;
   food.y = y;
 
-  setDivColor('red', x, y);
+  setDivColor("red", x, y);
 };
 
 /**
  * Check if snake is eating
  */
 
-const checkIfSnakeIsEating = (snake, food) => {
+const checkIfSnakeIsEating = (snake, food) => {
   if (snake.x === food.x && snake.y === food.y) {
     snake.body = snake.body + 1;
     SNAKE_SPEED = SNAKE_SPEED - 10;
@@ -165,16 +170,16 @@ const checkIfSnakeIsEating = (snake, food) => {
  * Check collision
  */
 
-const checkCollision = ({ x, y }) => {
+const checkCollision = ({ x, y }) => {
   const snakeLength = SNAKE_LOG.length - 2;
-  const snakeBody = SNAKE_LOG.slice((snakeLength - snake.body), snakeLength);
+  const snakeBody = SNAKE_LOG.slice(snakeLength - snake.body, snakeLength);
 
-  if (find(snakeBody, { x, y })) {
+  if (find(snakeBody, { x, y })) {
     GAME_STARTED = false;
     clearInterval(GAME_RUNNING);
     startScreen();
   }
-}
+};
 
 /**
  * Start screen
@@ -186,13 +191,12 @@ const startScreen = () => {
   A.forEach(drawLetter);
   K.forEach(drawLetter);
   E.forEach(drawLetter);
-}
+};
 
 /**
  * Run game
  */
 
-
 const startGame = () => {
   const runGame = () => {
     moveSnake(SNAKE_DIRECTION);
@@ -207,4 +211,3 @@ const startGame = () => {
 };
 
 startScreen();
-

src/utils/div.js

@@ -3,7 +3,7 @@
  */
 
 export const createDivElement = (name, styles, target) => {
-  window[name] = document.createElement('div');
+  window[name] = document.createElement("div");
   window[name].id = name;
 
   Object.assign(window[name].style, styles);
@@ -29,14 +29,19 @@ export const setDivColor = (color, x, y) => {
 
 export const setDivsColor = (divs, color) => {
   divs.forEach(({ x, y }) => {
-    ((document.getElementById(`${x}.${y}`) || {}).style || {}).background = color;
+    ((document.getElementById(`${x}.${y}`) || {}).style || {}).background =
+      color;
   });
 };
 
 /**
-* Draw charchter
-*/
+ * Draw charchter
+ */
 
 export const drawLetter = (char) => {
-  setDivColor('#333', char.toString().split('.')[0], char.toString().split('.')[1]);
+  setDivColor(
+    "#333",
+    char.toString().split(".")[0],
+    char.toString().split(".")[1]
+  );
 };

src/utils/keys.js

@@ -8,4 +8,4 @@ export default {
   UP: 38,
   RIGHT: 39,
   DOWN: 40,
-}
+};

src/utils/letters.js

@@ -3,7 +3,18 @@
  */
 
 export const S = [2.2, 2.3, 2.4, 2.5, 3.2, 4.3, 5.4, 6.5, 7.5, 7.4, 7.3, 7.2];
-export const N = [2.7, 3.7, 4.7, 5.7, 6.7, 7.7, 3.8, 4.9, 5.9, 6.10, 6.11, 7.11, 6.11, 5.11, 4.11, 3.11, 2.11];
-export const A = [2.13, 3.13, 4.13, 5.13, 6.13, 7.13, 2.14, 2.15, 2.16, 2.17, 3.17, 4.17, 5.17, 6.17, 7.17, 5.16, 5.15, 5.14];
-export const K = [2.19, 3.19, 4.19, 4.20, 5.19, 5.20, 6.19, 7.19, 6.21, 7.22, 3.21, 2.22];
-export const E = [2.24, 3.24, 4.24, 5.24, 6.24, 7.24, 2.25, 2.26, 2.27, 2.28, 7.25, 7.26, 7.27, 7.28, 4.25];
+export const N = [
+  2.7, 3.7, 4.7, 5.7, 6.7, 7.7, 3.8, 4.9, 5.9, 6.1, 6.11, 7.11, 6.11, 5.11,
+  4.11, 3.11, 2.11,
+];
+export const A = [
+  2.13, 3.13, 4.13, 5.13, 6.13, 7.13, 2.14, 2.15, 2.16, 2.17, 3.17, 4.17, 5.17,
+  6.17, 7.17, 5.16, 5.15, 5.14,
+];
+export const K = [
+  2.19, 3.19, 4.19, 4.2, 5.19, 5.2, 6.19, 7.19, 6.21, 7.22, 3.21, 2.22,
+];
+export const E = [
+  2.24, 3.24, 4.24, 5.24, 6.24, 7.24, 2.25, 2.26, 2.27, 2.28, 7.25, 7.26, 7.27,
+  7.28, 4.25,
+];