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

No:10523

←

Prev Next

→

Snake Game
Developer User4569｜Date and time 23/7/31 19:46:22
Build time 51.57 sec｜Game capacity 6.086KB｜

Script

Sure! Here's an example of a simple Snake Game implemented as a single HTML file using JavaScript:

Snake Game

This implementation uses a grid-based game board and allows you to control the snake using the arrow keys. The snake grows when it eats food and the game ends if the snake collides with the boundaries or itself. The game is reset after game over. The game can be played on a smartphone, assuming it supports JavaScript and has a capable web browser.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure! Here's an example of a simple Snake Game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        #game-board {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <h1>Snake Game</h1>
    <div id="game-board"></div>

gameBoard.style.gridTemplateColumns = `repeat(${boardSize}, 1fr)`;
        gameBoard.style.gridTemplateRows = `repeat(${boardSize}, 1fr)`;

// Initial snake position and direction
        let snake = [{ x: 5, y: 5 }];
        let direction = "right";

// Generate random food
        let food = { x: Math.floor(Math.random() * boardSize), y: Math.floor(Math.random() * boardSize) };

// Game loop
        function gameLoop() {
            moveSnake();
            if (isGameOver()) {
                alert("Game Over!");
                resetGame();
                return;
            }
            if (isFoodEaten()) {
                eatFood();
                generateFood();
            }
            drawSnake();
            drawFood();
            setTimeout(gameLoop, 200);
        }

// Move the snake
        function moveSnake() {
            const head = Object.assign({}, snake[0]);
            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);
            snake.pop();
        }

// Check if game over
        function isGameOver() {
            const head = snake[0];
            return (head.x < 0 || head.x >= boardSize || head.y < 0 || head.y >= boardSize || isSnakeColliding());
        }

// Check if snake collides with itself
        function isSnakeColliding() {
            const head = snake[0];
            for (let i = 1; i < snake.length; i++) {
                if (snake[i].x === head.x && snake[i].y === head.y) {
                    return true;
                }
            }
            return false;
        }

// Check if snake eats food
        function isFoodEaten() {
            const head = snake[0];
            return head.x === food.x && head.y === food.y;
        }

// Eat food and grow snake
        function eatFood() {
            const tail = Object.assign({}, snake[snake.length - 1]);
            snake.push(tail);
        }

// Generate random food position (not on snake)
        function generateFood() {
            let pos = { x: -1, y: -1 };
            while (isFoodOnSnake(pos)) {
                pos.x = Math.floor(Math.random() * boardSize);
                pos.y = Math.floor(Math.random() * boardSize);
            }
            food = pos;
        }

// Check if food is on snake
        function isFoodOnSnake(pos) {
            for (let i = 0; i < snake.length; i++) {
                if (snake[i].x === pos.x && snake[i].y === pos.y) {
                    return true;
                }
            }
            return false;
        }

// Handle key events
        document.addEventListener("keydown", function (event) {
            switch (event.keyCode) {
                case 37:
                    if (direction !== "right") {
                        direction = "left";
                    }
                    break;
                case 38:
                    if (direction !== "down") {
                        direction = "up";
                    }
                    break;
                case 39:
                    if (direction !== "left") {
                        direction = "right";
                    }
                    break;
                case 40:
                    if (direction !== "up") {
                        direction = "down";
                    }
                    break;
            }
        });

// Draw the snake
        function drawSnake() {
            gameBoard.innerHTML = "";
            snake.forEach(function (segment) {
                const snakeSegment = document.createElement("div");
                snakeSegment.style.width = `${tileSize}px`;
                snakeSegment.style.height = `${tileSize}px`;
                snakeSegment.style.backgroundColor = "black";
                snakeSegment.style.gridRowStart = segment.y + 1;
                snakeSegment.style.gridColumnStart = segment.x + 1;
                gameBoard.appendChild(snakeSegment);
            });
        }

// Draw the food
        function drawFood() {
            const foodTile = document.createElement("div");
            foodTile.style.width = `${tileSize}px`;
            foodTile.style.height = `${tileSize}px`;
            foodTile.style.backgroundColor = "red";
            foodTile.style.gridRowStart = food.y + 1;
            foodTile.style.gridColumnStart = food.x + 1;
            gameBoard.appendChild(foodTile);
        }

// Reset the game
        function resetGame() {
            snake = [{ x: 5, y: 5 }];
            direction = "right";
            generateFood();
            drawSnake();
            drawFood();
        }

// Start the game
        gameLoop();
    </script>
</body>
</html>
```