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

No:42285

←

Prev Next

→

Snake Game
Developer User18855｜Date and time 24/2/11 9:48:07
Build time 12.682 sec｜Game capacity 4.265KB｜

Script

Sure, here's a simple implementation of the Snake Game in a single HTML file. It uses JavaScript and is enclosed within script tags. To play the game, you can use the arrow keys on your smartphone to control the snake's movement. Pictograms are not used in this implementation, it's purely text-based.

Snake Game

This implementation uses a simple grid-based game board where the snake (represented by segments) moves around, eats food, and grows longer. The game loops every 200 milliseconds, updating the snake's movement, checking for collisions, and updating the game board display accordingly. The game ends when the snake hits the wall or itself, and the player's score is displayed. The game can be replayed by dismissing the game over alert.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
<style>
    #game-board {
        display: flex;
        flex-wrap: wrap;
        height: 400px;
        width: 400px;
    }

.cell {
        height: 20px;
        width: 20px;
        border: 1px solid black;
        box-sizing: border-box;
    }
</style>
</head>
<body>
    <h1>Snake Game</h1>
    <div id="game-board"></div>

// Game variables
    let snake = [{ x: 10, y: 10 }];
    let direction = "right";
    let food = getRandomFoodPosition();

// Game loop
    setInterval(() => {
        moveSnake();
        if (isGameOver()) {
            endGame();
        }
        updateGameBoard();
    }, 200);

// Keyboard controls
    document.addEventListener("keydown", (event) => {
        const key = event.key;
        if (key === "ArrowUp" && direction !== "down") {
            direction = "up";
        } else if (key === "ArrowDown" && direction !== "up") {
            direction = "down";
        } else if (key === "ArrowLeft" && direction !== "right") {
            direction = "left";
        } else if (key === "ArrowRight" && direction !== "left") {
            direction = "right";
        }
    });

function moveSnake() {
        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;
        }

snake.unshift(head);
        if (head.x === food.x && head.y === food.y) {
            food = getRandomFoodPosition();
        } else {
            snake.pop();
        }
    }

function isGameOver() {
        const head = snake[0];

// Check if snake hits the wall
        if (head.x < 0 || head.x >= BOARD_SIZE || head.y < 0 || head.y >= BOARD_SIZE) {
            return true;
        }

// Check if snake bites itself
        for (let i = 1; i < snake.length; i++) {
            if (snake[i].x === head.x && snake[i].y === head.y) {
                return true;
            }
        }

return false;
    }

function endGame() {
        alert("Game Over! You scored " + (snake.length - 1));
        snake = [{ x: 10, y: 10 }];
        direction = "right";
    }

function updateGameBoard() {
        const gameBoard = document.getElementById("game-board");
        gameBoard.innerHTML = "";

snake.forEach((segment) => {
            const snakeElement = document.createElement("div");
            snakeElement.style.gridRowStart = segment.y + 1;
            snakeElement.style.gridColumnStart = segment.x + 1;
            snakeElement.classList.add("cell");
            snakeElement.classList.add("snake");
            gameBoard.appendChild(snakeElement);
        });

const foodElement = document.createElement("div");
        foodElement.style.gridRowStart = food.y + 1;
        foodElement.style.gridColumnStart = food.x + 1;
        foodElement.classList.add("cell");
        foodElement.classList.add("food");
        gameBoard.appendChild(foodElement);
    }

function getRandomFoodPosition() {
        return {
            x: Math.floor(Math.random() * BOARD_SIZE),
            y: Math.floor(Math.random() * BOARD_SIZE)
        };
    }
    </script>
</body>
</html>
```