Snake Game in Neon Colors

This document details a simple implementation of a snake game in JavaScript using HTML5 Canvas, featuring neon colors and adjustable game speeds.

Project Structure

• HTML: Basic setup of the canvas.
• JavaScript: The game logic, including snake movement, food generation, scoring, and rendering the game in neon colors.

HTML Setup

Here’s the HTML structure to set up the canvas:

JavaScript Logic (snakeGame.js)

Here’s the implementation of the snake game:

// Constants for game settings
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

const box = 20; // size of each box
const canvasWidth = canvas.width / box;
const canvasHeight = canvas.height / box;

let snake = [{ x: 10, y: 10 }]; // snake's initial position
let direction = 'RIGHT'; // initial direction
let food = generateFood();
let speed = 100; // initial speed
let score = 0;

// Generate random food location
function generateFood() {
    return {
        x: Math.floor(Math.random() * canvasWidth) * box,
        y: Math.floor(Math.random() * canvasHeight) * box
    };
}

/**
 * Draws the snake and food on the canvas.
 */
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // clear canvas
    
    // Draw Food
    ctx.fillStyle = 'magenta'; // neon color for food
    ctx.fillRect(food.x, food.y, box, box);
    
    // Draw Snake
    for (let i = 0; i < snake.length; i++) {
        ctx.fillStyle = i === 0 ? 'cyan' : 'lime'; // neon colors for the snake
        ctx.fillRect(snake[i].x, snake[i].y, box, box);
    }

    // Move snake
    let snakeX = snake[0].x;
    let snakeY = snake[0].y;

    if (direction === 'LEFT') snakeX -= box;
    if (direction === 'UP') snakeY -= box;
    if (direction === 'RIGHT') snakeX += box;
    if (direction === 'DOWN') snakeY += box;

    // Check collision with food
    if (snakeX === food.x && snakeY === food.y) {
        score++;
        food = generateFood();
    } else {
        snake.pop(); // remove the tail
    }

    const head = { x: snakeX, y: snakeY };

    // Check for collision with walls or itself
    if (collision(head)) {
        clearInterval(game);
        alert('Game Over! Your score: ' + score);
    }

    snake.unshift(head); // add new head
}

/**
 * Checks if the snake collides with the wall or itself.
 * @param {Object} head - The head of the snake.
 * @returns {boolean} - True if there is a collision, false otherwise.
 */
function collision(head) {
    return (
        head.x < 0 || head.x >= canvas.width || 
        head.y < 0 || head.y >= canvas.height ||
        snake.slice(1).some(seg => seg.x === head.x && seg.y === head.y)
    );
}

/**
 * Handles keyboard input for direction.
 * @param {Event} event - The keyboard event.
 */
function directionControl(event) {
    if (event.keyCode === 37 && direction !== 'RIGHT') direction = 'LEFT';
    if (event.keyCode === 38 && direction !== 'DOWN') direction = 'UP';
    if (event.keyCode === 39 && direction !== 'LEFT') direction = 'RIGHT';
    if (event.keyCode === 40 && direction !== 'UP') direction = 'DOWN';
}

document.addEventListener('keydown', directionControl);
const game = setInterval(draw, speed); // start the game loop

Code Explanation

1. HTML Setup: Basic layout with a canvas for drawing the game.
2. Initialization: Set up game variables like the snake's initial position, direction, and food.
3. Drawing Function: Clears the canvas, draws the food, and the snake, then updates the snake's position.
4. Food Generation: Generates food at random positions within the canvas.
5. Collision Detection: Checks if the snake has collided with the walls or itself.
6. Directional Control: Listens for keyboard input to change the snake’s direction.

Usage Example

1. Create an HTML file and copy the HTML structure above into it.
2. Create a separate file named snakeGame.js and paste the JavaScript code into it.
3. Open the HTML file in a web browser to play the game. Use the arrow keys to control the snake.

Conclusion

This implementation provides a basic yet engaging snake game featuring vibrant neon colors and interactive gameplay. For further learning and advanced implementations, consider exploring the resources available on the Enterprise DNA Platform.