Snake game with levels's game

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

No:35422

←

Prev Next

→

Snake game with levels
Developer User16442｜Date and time 24/1/14 12:01:28
Build time 16.272 sec｜Game capacity 6.186KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake Game</title>
    <style>
        #game-board {
            display: grid;
            grid-template-columns: repeat(20, 1fr);
        }
        .cell {
            border: 1px solid #ccc;
            width: 20px;
            height: 20px;
        }
        .snake {
            background-color: #333;
        }
        .food {
            background-color: #ff0000;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

// Initialize the game board
            const gameBoard = document.getElementById("game-board");
            for (let row = 0; row < boardSize; row++) {
                for (let col = 0; col < boardSize; col++) {
                    const cell = document.createElement("div");
                    cell.classList.add("cell");
                    cell.id = `cell-${row}-${col}`;
                    gameBoard.appendChild(cell);
                }
            }

// Snake object
            const snake = {
                body: [
                    { row: 10, col: 10 },
                    { row: 10, col: 9 },
                    { row: 10, col: 8 }
                ],
                direction: "right"
            };

// Food object
            const food = {
                row: Math.floor(Math.random() * boardSize),
                col: Math.floor(Math.random() * boardSize)
            };

// Render the snake and food on the game board
            function renderGameBoard() {
                // Reset the game board
                const cells = document.getElementsByClassName("cell");
                for (const cell of cells) {
                    cell.classList.remove("snake", "food");
                }

// Render the snake
                for (const segment of snake.body) {
                    const cell = document.getElementById(`cell-${segment.row}-${segment.col}`);
                    cell.classList.add("snake");
                }

// Render the food
                const foodCell = document.getElementById(`cell-${food.row}-${food.col}`);
                foodCell.classList.add("food");
            }

// Move the snake
            function moveSnake() {
                const head = { ...snake.body[0] };
                switch (snake.direction) {
                    case "up":
                        head.row--;
                        break;
                    case "down":
                        head.row++;
                        break;
                    case "left":
                        head.col--;
                        break;
                    case "right":
                        head.col++;
                        break;
                }

// Check if snake collided with the food
                if (head.row === food.row && head.col === food.col) {
                    // Increase snake length
                    snake.body.push({});
                    // Generate new food position
                    food.row = Math.floor(Math.random() * boardSize);
                    food.col = Math.floor(Math.random() * boardSize);
                } else {
                    // Remove the last segment of the snake
                    snake.body.pop();
                }

// Check if snake collided with the walls or itself
                if (head.row < 0 || head.row >= boardSize || head.col < 0 || head.col >= boardSize || isSnakeCollision(head)) {
                    // Game over
                    clearInterval(gameInterval);
                    alert("Game Over! Try again.");
                    resetGame();
                    return;
                }

// Move snake
                snake.body.unshift(head);

// Render the updated game board
                renderGameBoard();
            }

// Check if snake collided with itself
            function isSnakeCollision(head) {
                for (let i = 1; i < snake.body.length; i++) {
                    if (head.row === snake.body[i].row && head.col === snake.body[i].col) {
                        return true;
                    }
                }
                return false;
            }

// Reset the game
            function resetGame() {
                snake.body = [
                    { row: 10, col: 10 },
                    { row: 10, col: 9 },
                    { row: 10, col: 8 }
                ];
                snake.direction = "right";
                food.row = Math.floor(Math.random() * boardSize);
                food.col = Math.floor(Math.random() * boardSize);
                renderGameBoard();
                gameInterval = setInterval(moveSnake, 200);
            }

// Handle keyboard arrow key events
            document.addEventListener("keydown", function(event) {
                switch (event.key) {
                    case "ArrowUp":
                        if (snake.direction !== "down") {
                            snake.direction = "up";
                        }
                        break;
                    case "ArrowDown":
                        if (snake.direction !== "up") {
                            snake.direction = "down";
                        }
                        break;
                    case "ArrowLeft":
                        if (snake.direction !== "right") {
                            snake.direction = "left";
                        }
                        break;
                    case "ArrowRight":
                        if (snake.direction !== "left") {
                            snake.direction = "right";
                        }
                        break;
                }
            });

// Start the game
            let gameInterval = setInterval(moveSnake, 200);
        });
    </script>
</body>
</html>