Javascript Snake Game


Javascript Snake Game

Creating a JavaScript Snake Game involves using HTML for the structure, CSS for styling, and JavaScript for the game logic. Here’s a simple example of a Snake Game:

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="game-board"></div>
    <script src="script.js"></script>
</body>
</html>

CSS (style.css):

#game-board {
    display: grid;
    grid-template-columns: repeat(20, 20px);
    grid-template-rows: repeat(20, 20px);
}
.snake, .food {
    width: 20px;
    height: 20px;
}
.snake {
    background-color: green;
}
.food {
    background-color: red;
}

JavaScript (script.js):

document.addEventListener('DOMContentLoaded', () => {
    const board = document.getElementById('game-board');
    const gridSize = 20;
    let snake = [{ x: 10, y: 10 }];
    let food = getRandomPosition();

    function draw() {
        board.innerHTML = '';
        drawSnake();
        drawFood();
    }

    function drawSnake() {
        snake.forEach(segment => {
            const snakeElement = createGameElement('div', 'snake');
            snakeElement.style.gridRowStart = segment.y;
            snakeElement.style.gridColumnStart = segment.x;
            board.appendChild(snakeElement);
        });
    }

    function drawFood() {
        const foodElement = createGameElement('div', 'food');
        foodElement.style.gridRowStart = food.y;
        foodElement.style.gridColumnStart = food.x;
        board.appendChild(foodElement);
    }

    function createGameElement(tagName, className) {
        const element = document.createElement(tagName);
        element.className = className;
        return element;
    }

    function getRandomPosition() {
        return {
            x: Math.floor(Math.random() * gridSize) + 1,
            y: Math.floor(Math.random() * gridSize) + 1
        };
    }

    function move() {
        const head = { ...snake[0] };
        switch (direction) {
            case 'UP':
                head.y--;
                break;
            case 'DOWN':
                head.y++;
                break;
            case 'LEFT':
                head.x--;
                break;
            case 'RIGHT':
                head.x++;
                break;
        }

        if (head.x === food.x && head.y === food.y) {
            snake.push({});
            food = getRandomPosition();
        }

        snake.unshift(head);
        snake.pop();
    }

    function checkCollision() {
        const head = snake[0];
        return (
            head.x < 1 || head.x > gridSize ||
            head.y < 1 || head.y > gridSize ||
            snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)
        );
    }

    let direction = 'RIGHT';

    window.addEventListener('keydown', event => {
        switch (event.key) {
            case 'ArrowUp':
                direction = 'UP';
                break;
            case 'ArrowDown':
                direction = 'DOWN';
                break;
            case 'ArrowLeft':
                direction = 'LEFT';
                break;
            case 'ArrowRight':
                direction = 'RIGHT';
                break;
        }
    });

    function gameLoop() {
        move();
        if (checkCollision()) {
            alert('Game Over!');
            snake = [{ x: 10, y: 10 }];
            direction = 'RIGHT';
        }
        draw();
    }

    setInterval(gameLoop, 200);
});

This is a basic implementation, and you can enhance it further by adding features such as score tracking, increasing difficulty, or adding sound effects.

Tags

Related Posts

Deployment and Beyond

Deployment and Beyond

In the world of web development, creating a React application is only half the journey. Once your application is built and functional, the next critical step is to deploy it to the web, making it accessible to users worldwide.

Javascript Useful Code Snippets Part - 1

Javascript Useful Code Snippets Part - 1

Certainly! Below are code snippets with explanations for the mentioned JavaScript tasks: 1. JavaScript String Length // Code snippet for getting the length of a string in JavaScript const myString = "Hello, World!

Testing and Debugging in React

Testing and Debugging in React

In the world of web development, testing and debugging are indispensable processes that ensure the reliability and quality of your applications.

Mastering Event Delegation in Javascript

Mastering Event Delegation in Javascript

In the world of web development, interactivity is paramount. The ability to create responsive and engaging web applications is a hallmark of a successful web developer.

React Styling: Inline, Classes, Modules, Frameworks, and CSS-in-JS

React Styling: Inline, Classes, Modules, Frameworks, and CSS-in-JS

In React, there are several options for styling your components and user interfaces. Here are three common approaches: inline styles, CSS classes, and CSS modules.

React Event Handling: From Basics to Advanced Techniques

React Event Handling: From Basics to Advanced Techniques

Event handling in React is how you manage and respond to user interactions within your components. React’s event handling system is similar to handling events in traditional HTML, but with some differences due to React’s virtual DOM and component-based architecture.

Series
Tags