AI game creator

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

No:10913

←

Prev Next

→

Snake eating apple
Developer User4614｜Date and time 23/8/5 20:35:35
Build time 45.147 sec｜Game capacity 6.072KB｜

Script

Okay, here's a simple implementation of the classic Snake game using HTML and JavaScript. The game can be played on a smartphone, and it uses pictograms to represent the snake and apple.

Um das Spiel zu starten, kopieren Sie den oben angegebenen Code in eine einzige HTML-Datei. Sie können dann die HTML-Datei in einem Webbrowser öffnen, um das Spiel zu spielen. Die Bedienung erfolgt über die Pfeiltasten auf der Tastatur oder durch Berührung auf einem Smartphone. Das Ziel des Spiels besteht darin, die Äpfel einzusammeln, ohne gegen Wände oder den eigenen Schwanz zu stoßen. Viel Spaß beim Spielen des Snake Spiels!

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Okay, here's a simple implementation of the classic Snake game using HTML and JavaScript. The game can be played on a smartphone, and it uses pictograms to represent the snake and apple.

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Snake Game</title>
    <style>
        #game-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .snake {
            font-size: 40px;
        }
        .apple {
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div id="game-container"></div>

// Snake and apple pictograms
        const snakeIcon = "🐍";
        const appleIcon = "🍎";

// Snake object
        let snake = [
            { row: 0, col: 0 }
        ];

// Apple object
        let apple = {
            row: Math.floor(Math.random() * boardSize),
            col: Math.floor(Math.random() * boardSize)
        };

// Function to draw the game board
        function drawBoard() {
            let gameBoard = document.getElementById("game-container");
            gameBoard.innerHTML = '';

for (let row = 0; row < boardSize; row++) {
                for (let col = 0; col < boardSize; col++) {
                    let cell = document.createElement("div");
                    cell.style.width = "50px";
                    cell.style.height = "50px";
                    cell.style.display = "flex";
                    cell.style.justifyContent = "center";
                    cell.style.alignItems = "center";
                    cell.style.border = "1px solid #000";
                    cell.style.fontSize = "40px";

// Check if the cell contains the snake
                    let isSnakeBody = false;
                    for (let i = 0; i < snake.length; i++) {
                        if (snake[i].row === row && snake[i].col === col) {
                            isSnakeBody = true;
                            break;
                        }
                    }

if (isSnakeBody) {
                        cell.textContent = snakeIcon;
                    } else if (apple.row === row && apple.col === col) {
                        cell.textContent = appleIcon;
                    }

gameBoard.appendChild(cell);
                }
            }
        }

// Function to move the snake
        function moveSnake() {
            let head = { ...snake[0] };
            switch (direction) {
                case "UP":
                    head.row--;
                    break;
                case "DOWN":
                    head.row++;
                    break;
                case "LEFT":
                    head.col--;
                    break;
                case "RIGHT":
                    head.col++;
                    break;
            }

// Check if the snake hits the wall or itself
            if (
                head.row < 0 ||
                head.row >= boardSize ||
                head.col < 0 ||
                head.col >= boardSize ||
                isSnakeBody(head)
            ) {
                alert("Game Over!");
                resetGame();
                return;
            }

snake.unshift(head); // Add the new head to the snake
            if (head.row === apple.row && head.col === apple.col) {
                // Snake ate the apple
                apple = generateRandomApple();
            } else {
                snake.pop(); // Remove the tail of the snake
            }

drawBoard();
        }

// Function to check if a cell is part of the snake's body
        function isSnakeBody(cell) {
            for (let i = 0; i < snake.length; i++) {
                if (snake[i].row === cell.row && snake[i].col === cell.col) {
                    return true;
                }
            }
            return false;
        }

// Function to generate a random apple
        function generateRandomApple() {
            let newRow, newCol;
            do {
                newRow = Math.floor(Math.random() * boardSize);
                newCol = Math.floor(Math.random() * boardSize);
            } while (isSnakeBody({ row: newRow, col: newCol }));

return { row: newRow, col: newCol };
        }

// Reset the game
        function resetGame() {
            snake = [{ row: 0, col: 0 }];
            apple = generateRandomApple();
        }

// Handle key press events
        document.addEventListener("keydown", function (event) {
            switch (event.key) {
                case "ArrowUp":
                    if (direction !== "DOWN")
                        direction = "UP";
                    break;
                case "ArrowDown":
                    if (direction !== "UP")
                        direction = "DOWN";
                    break;
                case "ArrowLeft":
                    if (direction !== "RIGHT")
                        direction = "LEFT";
                    break;
                case "ArrowRight":
                    if (direction !== "LEFT")
                        direction = "RIGHT";
                    break;
            }
        });

let direction = "RIGHT";
        setInterval(moveSnake, snakeSpeed);
        drawBoard();
    </script>
</body>
</html>
```