Snake with title screen and sound effects's game

Click here for free DL of the app version that can save data.

No:19809

←

Prev Next

→

Snake with title screen and sound effects
Developer User8620｜Date and time 23/10/7 0:25:08
Build time 22.304 sec｜Game capacity 4.434KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
</head>
<body>

// Title screen
        context.fillStyle = "black";
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.font = "30px Arial";
        context.fillStyle = "white";
        context.fillText("Snake Game", 120, 200);

// Sound effects
        const eatSound = new Audio("eat_sound.mp3");
        const gameoverSound = new Audio("gameover_sound.mp3");

// Game variables
        let snake = [{ x: 200, y: 200 }];
        let food = { x: 100, y: 100 };
        let score = 0;
        let direction = "right";
        let gameover = false;

// Generate a random position for the food
        function generateFood() {
            food.x = Math.floor(Math.random() * 20) * 20;
            food.y = Math.floor(Math.random() * 20) * 20;
        }

// Main game loop
        function gameLoop() {
            // Clear the canvas
            context.fillStyle = "black";
            context.fillRect(0, 0, canvas.width, canvas.height);

// Move the snake
            let head = { x: snake[0].x, y: snake[0].y };
            switch (direction) {
                case "up":
                    head.y -= 20;
                    break;
                case "down":
                    head.y += 20;
                    break;
                case "left":
                    head.x -= 20;
                    break;
                case "right":
                    head.x += 20;
                    break;
            }
            snake.unshift(head);

// Check if the snake ate the food
            if (head.x === food.x && head.y === food.y) {
                score++;
                generateFood();
                eatSound.play();
            } else {
                snake.pop();
            }

// Check if the snake collided with the wall or itself
            if (
                head.x < 0 ||
                head.x >= canvas.width ||
                head.y < 0 ||
                head.y >= canvas.height ||
                snake.some((segment, index) => index !== 0 && segment.x === head.x && segment.y === head.y)
            ) {
                gameover = true;
                gameoverSound.play();
            }

// Draw the snake
            snake.forEach(segment => {
                context.fillStyle = "lime";
                context.fillRect(segment.x, segment.y, 20, 20);
            });

// Draw the food
            context.fillStyle = "red";
            context.fillRect(food.x, food.y, 20, 20);

// Draw the score
            context.font = "20px Arial";
            context.fillStyle = "white";
            context.fillText("Score: " + score, 10, 30);

// Repeat the game loop
            if (!gameover) {
                setTimeout(gameLoop, 200);
            }
        }

// Start the game on touch or click
        canvas.addEventListener("touchend", startGame);
        canvas.addEventListener("click", startGame);

function startGame() {
            canvas.removeEventListener("touchend", startGame);
            canvas.removeEventListener("click", startGame);
            gameLoop();
        }

// Directions input
        document.addEventListener("keydown", changeDirection);

</body>
</html>