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

No:38236

←

Prev Next

→

Snake Game
Developer User17293｜Date and time 24/1/23 16:27:24
Build time 15.598 sec｜Game capacity 4.386KB｜

Script

Sure! Here's an implementation of the classic Snake Game using JavaScript, enclosed in script tags within a single HTML file. The game can be played on a smartphone and utilizes pictograms using Unicode characters.

Snake Game

This code sets up the game board, controls the snake's movement and direction, checks for collision with borders or the snake itself, and updates the game's rendering on the screen. The snake is represented by the 🐍 emoji, and the apple is represented by the 🍎 emoji.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        body {
            font-size: 2em;
            text-align: center;
        }

#game-board {
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h1>Snake Game</h1>
    <div id="game-board"></div>

// Create game state variables
            let snake = [{ x: gridSize / 2, y: gridSize / 2 }];
            let apple = { x: getRandomPosition(), y: getRandomPosition() };
            let direction = "right";
            let gameLost = false;

// Game loop
            setInterval(() => {
                if (gameLost) {
                    return;
                }

moveSnake();
                checkCollision();
                renderGame();
            }, 200);

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

// Generate random position
            function getRandomPosition() {
                return Math.floor(Math.random() * gridSize);
            }

// Move the snake
            function moveSnake() {
                const head = { ...snake[0] };

if (direction === "up") {
                    head.y--;
                } else if (direction === "down") {
                    head.y++;
                } else if (direction === "left") {
                    head.x--;
                } else if (direction === "right") {
                    head.x++;
                }

snake.unshift(head);
                if (!(head.x === apple.x && head.y === apple.y)) {
                    snake.pop();
                } else {
                    apple = { x: getRandomPosition(), y: getRandomPosition() };
                }
            }

// Check for collision with borders or self
            function checkCollision() {
                const head = snake[0];

if (
                    head.x < 0 ||
                    head.y < 0 ||
                    head.x >= gridSize ||
                    head.y >= gridSize ||
                    snake.slice(1).some(({ x, y }) => x === head.x && y === head.y)
                ) {
                    gameLost = true;
                }
            }

// Render the game
            function renderGame() {
                let gameHTML = "";

for (let y = 0; y < gridSize; y++) {
                    for (let x = 0; x < gridSize; x++) {
                        if (snake.some((cell) => cell.x === x && cell.y === y)) {
                            gameHTML += "🐍";
                        } else if (x === apple.x && y === apple.y) {
                            gameHTML += "🍎";
                        } else {
                            gameHTML += " ";
                        }
                    }
                    gameHTML += "<br>";
                }

gameBoard.innerHTML = gameHTML;

if (gameLost) {
                    gameBoard.innerHTML += "<h2>Game Over</h2>";
                }
            }
        });
    </script>
</body>
</html>
```