diff --git a/src/config.js b/src/config.js index e3e5c57..496baa5 100644 --- a/src/config.js +++ b/src/config.js @@ -1,15 +1,15 @@ export default { - unit: 10, + unit: 20, dimensions: { - width: 50, - height: 50, + width: 30, + height: 30, }, snake: { direction: 'left', x: 25, y: 25, - body: 3, + body: 2, speed: 100, log: [], }, diff --git a/src/index.js b/src/index.js index 3f22fee..51f36e8 100644 --- a/src/index.js +++ b/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 y = _.random(50); + const x = _.random(1, config.dimensions.width); + 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(() => { - checkCollision(); - moveSnake(snake.direction); - checkIfSnakeIsEating(); -}, snake.speed); +const startGame = () => { + GAME_STARTED = true; + makeFood(); + showSnake(); -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();