diff --git a/src/config.js b/src/config.js index 8827d9c..76d1fca 100644 --- a/src/config.js +++ b/src/config.js @@ -1,4 +1,3 @@ - export default { unit: 20, dimensions: { @@ -14,5 +13,5 @@ export default { food: { x: null, y: null, - } -}; \ No newline at end of file + }, +}; diff --git a/src/index.js b/src/index.js index 97d26c4..31d28ab 100644 --- a/src/index.js +++ b/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(); - diff --git a/src/utils/div.js b/src/utils/div.js index b0b529b..1512e98 100644 --- a/src/utils/div.js +++ b/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]); -}; \ No newline at end of file + setDivColor( + "#333", + char.toString().split(".")[0], + char.toString().split(".")[1] + ); +}; diff --git a/src/utils/keys.js b/src/utils/keys.js index d5630af..0653ce0 100644 --- a/src/utils/keys.js +++ b/src/utils/keys.js @@ -8,4 +8,4 @@ export default { UP: 38, RIGHT: 39, DOWN: 40, -} \ No newline at end of file +}; diff --git a/src/utils/letters.js b/src/utils/letters.js index 45509bd..967c15a 100644 --- a/src/utils/letters.js +++ b/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, +];