fredjens/zzznake
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added start logic

Browse Source
This commit is contained in:
Fredrik Jensen 2017-09-05 01:09:20 +02:00
parent 1908a36f82
commit 65f5ef0305
2 changed files with 123 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/config.js
View File

@ -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: [],
},

130
src/index.js
View File

@ -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(() => {
const startGame = () => {
GAME_STARTED = true;
makeFood();
showSnake();
GAME_RUNNING = setInterval(() => {
console.log('running');
checkCollision();
moveSnake(snake.direction);
checkIfSnakeIsEating();
}, snake.speed);
};
makeFood();
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();