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

fix formatting

Browse Source
This commit is contained in:
Fredrik Jensen 2025-09-30 19:51:14 +02:00
parent f24ab96870
commit 0ffaa4d08e
5 changed files with 76 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/config.js
View File

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

87
src/index.js
View File

@ -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}`, {
createDivElement(
`${i + 1}.${j + 1}`,
{
width: `${unit}px`,
height: `${unit}px`,
display: 'inline-block',
background: '#000',
}, 'board');
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();

11
src/utils/div.js
View File

@ -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,7 +29,8 @@ 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;
});
};
@ -38,5 +39,9 @@ export const setDivsColor = (divs, color) => {
*/
export const drawLetter = (char) => {
setDivColor('#333', char.toString().split('.')[0], char.toString().split('.')[1]);
setDivColor(
"#333",
char.toString().split(".")[0],
char.toString().split(".")[1]
);
};

2
src/utils/keys.js
View File

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

19
src/utils/letters.js
View File

@ -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,
];