Retro Snake Game in JavaScript: 5 Easy Steps to Build Your Fun 2025 Tutorial

				
					    <script>
        // Get canvas and its 2D rendering context
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const scoreDisplay = document.getElementById('score');
        const gameMessage = document.getElementById('gameMessage');
        const controlButtons = document.querySelectorAll('.control-button');

        // Game constants and variables
        const gridSize = 20; // Size of each "pixel" block
        let snake = [{ x: 10, y: 10 }]; // Initial snake position
        let food = {}; // Food position
        let direction = 'RIGHT'; // Initial direction
        let score = 0;
        let gameOver = true;
        let gameInterval; // To hold the game loop interval ID

        // Function to generate random coordinates for food
        function generateFood() {
            food = {
                x: Math.floor(Math.random() * (canvas.width / gridSize)),
                y: Math.floor(Math.random() * (canvas.height / gridSize))
            };
        }

        // Function to draw a single game block (snake segment or food)
        function drawBlock(x, y, color) {
            ctx.fillStyle = color;
            ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize);
            ctx.strokeStyle = '#2d3748'; // Darker border for pixel effect
            ctx.strokeRect(x * gridSize, y * gridSize, gridSize, gridSize);
        }

        // Main drawing function
        function drawGame() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas

            // Draw snake
            snake.forEach((segment, index) => {
                drawBlock(segment.x, segment.y, index === 0 ? '#48bb78' : '#68d391'); // Head is darker green
            });

            // Draw food
            drawBlock(food.x, food.y, '#f6e05e'); // Yellow food
        }

        // Main game update logic
        function updateGame() {
            if (gameOver) return;

            // Move the snake's head
            const head = { x: snake[0].x, y: snake[0].y };
            switch (direction) {
                case 'UP': head.y--; break;
                case 'DOWN': head.y++; break;
                case 'LEFT': head.x--; break;
                case 'RIGHT': head.x++; break;
            }

            // Check for game over conditions
            // Wall collision
            if (head.x < 0 || head.x >= canvas.width / gridSize ||
                head.y < 0 || head.y >= canvas.height / gridSize) {
                endGame();
                return;
            }

            // Self-collision
            for (let i = 1; i < snake.length; i++) {
                if (head.x === snake[i].x && head.y === snake[i].y) {
                    endGame();
                    return;
                }
            }

            // Add new head
            snake.unshift(head);

            // Check if food is eaten
            if (head.x === food.x && head.y === food.y) {
                score++;
                scoreDisplay.textContent = score;
                generateFood(); // Generate new food
            } else {
                snake.pop(); // Remove tail if no food eaten
            }

            drawGame(); // Redraw game elements
        }

        // Function to handle game over
        function endGame() {
            gameOver = true;
            clearInterval(gameInterval); // Stop the game loop
            gameMessage.textContent = `Game Over! Score: ${score}. Press any arrow key or button to restart!`;
            gameMessage.classList.remove('hidden');
        }

        // Function to reset and start a new game
        function resetGame() {
            snake = [{ x: 10, y: 10 }];
            direction = 'RIGHT';
            score = 0;
            scoreDisplay.textContent = score;
            gameOver = false;
            gameMessage.classList.add('hidden');
            generateFood();
            drawGame();
            if (gameInterval) clearInterval(gameInterval); // Clear any existing interval
            gameInterval = setInterval(updateGame, 150); // Start game loop (adjust speed here)
        }

        // Event listener for keyboard input
        document.addEventListener('keydown', e => {
            if (gameOver) {
                resetGame();
                return;
            }
            const newDirection = e.key.replace('Arrow', '').toUpperCase();
            // Prevent snake from reversing directly
            if ((newDirection === 'UP' && direction !== 'DOWN') ||
                (newDirection === 'DOWN' && direction !== 'UP') ||
                (newDirection === 'LEFT' && direction !== 'RIGHT') ||
                (newDirection === 'RIGHT' && direction !== 'LEFT')) {
                direction = newDirection;
            }
        });

        // Event listeners for mobile control buttons
        controlButtons.forEach(button => {
            button.addEventListener('click', () => {
                if (gameOver) {
                    resetGame();
                    return;
                }
                const newDirection = button.dataset.direction;
                if ((newDirection === 'UP' && direction !== 'DOWN') ||
                    (newDirection === 'DOWN' && direction !== 'UP') ||
                    (newDirection === 'LEFT' && direction !== 'RIGHT') ||
                    (newDirection === 'RIGHT' && direction !== 'LEFT')) {
                    direction = newDirection;
                }
            });
        });

        // Initial setup when the window loads
        window.onload = function() {
            generateFood();
            drawGame();
            gameMessage.textContent = "Press any arrow key or button to start!";
            gameMessage.classList.remove('hidden');
            // Game starts only when user presses a key/button
        };
    </script>