Demo URL: https://snake-game-self.vercel.app/

Let's engage an discussion about JavaScript for a more organized code structure. The project comprises five main JavaScript files: game.js, food.js, snake.js, grid.js and input.js. We've designed it this way for better modularity and maintainability, but feel free to expand by adding more files to suit your specific needs.

Explore the demo to see these files in action and join the conversation. Share your insights, ask questions, and let's collaboratively learn and enhance our understanding of JavaScript and game development together!"

Game.js

• This JavaScript code sets up a game loop that updates and draws the snake and food on a game board and checks for game over conditions.
• In context of param CURRENT_TIME - The "CURRENT_TIME" parameter represents the current time in milliseconds. It is used to calculate the time elapsed since the last render and determine if it's time to update and draw the game again returns. There is no explicit return statement in the code provided. Therefore, the main function does not return any value.

import {
 SNAKE_SPEED,
 update as updateSnake,
 draw as drawSnake,
 getSnakeHead,
 snakeIntersection,
} from "./snake.js";

import {
 update as updateFood,
 draw as drawFood,
} from "./food.js";

import { oustideGrid } from "./grid.js";

let LAST_RENDER_TIME = 0;
let BOARD = document.getElementById("board");
let gameOver = false;

function main(CURRENT_TIME) {
 if (gameOver) {
   if (confirm('You lost. Press ok to restart.')) {
     window.location = '/'
   }
   return
 }

 window.requestAnimationFrame(main);
 const SECOND_LAST_RENDER_TIME = (CURRENT_TIME - LAST_RENDER_TIME) / 1000;
 if (SECOND_LAST_RENDER_TIME < 1 / SNAKE_SPEED) return;
 console.log("Render ...");
 LAST_RENDER_TIME = CURRENT_TIME;
 update();
 draw();
}

window.requestAnimationFrame(main);

function update() {
 updateSnake();
 updateFood();
 checkGameOver();
}

function draw() {
 BOARD.innerHTML = "";
 drawSnake(BOARD);
 drawFood(BOARD)
}

function checkGameOver() {
 gameOver = oustideGrid(getSnakeHead()) || snakeIntersection()
}

Snake.js

• The code defines a snake game in JavaScript where the snake moves based on user input and grows when it eats food.

import { getInputDirection } from "./input.js";

export const SNAKE_SPEED = 5;
let SNAKE_ARRAY = [
 { x: 15, y: 15 }
];

let newSegment = 0;

export function update() {
 addSegement();
 const inputDirection = getInputDirection();
 for (let i = SNAKE_ARRAY.length - 2; i >= 0; i--) {
   SNAKE_ARRAY[i + 1] = { ...SNAKE_ARRAY[i] };
 }
 SNAKE_ARRAY[0].x += inputDirection.x;
 SNAKE_ARRAY[0].y += inputDirection.y;
}

export function draw(BOARD) {
 SNAKE_ARRAY.forEach((coordinate, index) => {
   let SNAKE_ELEMENT = document.createElement("div");
   SNAKE_ELEMENT.style.gridRowStart = coordinate.y;
   SNAKE_ELEMENT.style.gridColumnStart = coordinate.x;
   SNAKE_ELEMENT.classList.add("food");
   BOARD.appendChild(SNAKE_ELEMENT);
 });
}

export function expandSnake(amount) {
 newSegment += amount;
}

export function onSnake(position, { ignoreHead = false } = {}) {
 return SNAKE_ARRAY.some((segement, index) => {
   if (ignoreHead && index === 0) return false;
   return equalPositions(segement, position);
 });
}

export function getSnakeHead() {
 return SNAKE_ARRAY[0];
}

export function snakeIntersection() {
 return onSnake(SNAKE_ARRAY[0], { ignoreHead: true });
}

export function equalPositions(pos1, pos2) {
 return pos1.x === pos2.x && pos1.y === pos2.y;
}

function addSegement() {
 for (let i = 0; i < newSegment; i++) {
   SNAKE_ARRAY.push({ ...SNAKE_ARRAY[SNAKE_ARRAY.length - 1] });
 }
 newSegment = 0;
}

Food.js

• This JavaScript code exports functions to update and draw the food element in a snake game, and also includes a function to generate a random position for the food that is not on the snake.

import { onSnake, expandSnake } from "./snake.js"
import {randomGridPosition } from "./grid.js"

let food = getRandomFoodPosition()
const EXPENSION_RATE = 1

export function update() {
 if (onSnake(food)) {
   expandSnake(EXPENSION_RATE)
   food = getRandomFoodPosition()
 }
}

export function draw(BOARD) {
   const FOOD_ELEMENT = document.createElement("div")
   FOOD_ELEMENT.style.gridRowStart = food.y
   FOOD_ELEMENT.style.gridColumnStart = food.x
   FOOD_ELEMENT.classList.add('head')
   BOARD.appendChild(FOOD_ELEMENT)
}


export function getRandomFoodPosition () {
   let newFoodPosition;
   while (newFoodPosition == null || onSnake(newFoodPosition) ) {
       newFoodPosition = randomGridPosition()
   }
   return newFoodPosition
}

Grid.js

• The above code exports two functions related to a grid in JavaScript - "randomGridPosition"  generates a random position within the grid, and "outsideGrid" checks if a given position is outside the grid @returns The code is returning an object with x and y properties representing a random grid position within the specified grid size.

const GRID_SIZE = 30;

export function randomGridPosition() {
 return {
   x: Math.floor(Math.random() * GRID_SIZE) + 1,
   y: Math.floor(Math.random() * GRID_SIZE) + 1,
 };
}

export function oustideGrid(position) {
 return (
   position.x < 1 ||
   position.x > GRID_SIZE ||
   position.y < 1 ||
   position.y > GRID_SIZE
 );
}

Input.js

• The code listens for keyboard and mouse click events to determine the input direction and updates the DIRECTION variable accordingly @returns The "getInputDirection" function returns the "DIRECTION" object.

import { MOVEMENT } from "./media.js";

let DIRECTION = { x: 0, y: 0 };
let LAST_INPUT_DIRECTION = { x: 0, y: 0 };
window.addEventListener("keydown", (e) => {
 MOVEMENT.play();
 switch (e.key) {
   case "ArrowUp":
     if (LAST_INPUT_DIRECTION.y !== 0) break;
     DIRECTION = { x: 0, y: -1 };
     break;
   case "ArrowDown":
     if (LAST_INPUT_DIRECTION.y !== 0) break;
     DIRECTION = { x: 0, y: 1 };
     break;
   case "ArrowLeft":
     if (LAST_INPUT_DIRECTION.x !== 0) break;
     DIRECTION = { x: -1, y: 0 };
     break;
   case "ArrowRight":
     if (LAST_INPUT_DIRECTION.x !== 0) break;
     DIRECTION = { x: 1, y: 0 };
     break;
   default:
     break;
 }
});

window.addEventListener("click", (e) => {
 const {id} = e.target
 MOVEMENT.play();
 switch (id) {
   case "ArrowUp":
     if (LAST_INPUT_DIRECTION.y !== 0) break;
     DIRECTION = { x: 0, y: -1 };
     break;
   case "ArrowDown":
     if (LAST_INPUT_DIRECTION.y !== 0) break;
     DIRECTION = { x: 0, y: 1 };
     break;
   case "ArrowLeft":
     if (LAST_INPUT_DIRECTION.x !== 0) break;
     DIRECTION = { x: -1, y: 0 };
     break;
   case "ArrowRight":
     if (LAST_INPUT_DIRECTION.x !== 0) break;
     DIRECTION = { x: 1, y: 0 };
     break;
   default:
     break;
 }
});

export function getInputDirection() {
 LAST_INPUT_DIRECTION = DIRECTION;
 return DIRECTION;
}

Congratulations! You've successfully understand the core logic a Snake Game. Now you can enjoy a fast and efficient development workflow. If you have any doubt, Feel free to ask through MAIL.