AI game creator

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

No:24323

←

Prev Next

→

Snake Game
Developer User11440｜Date and time 23/11/7 15:43:41
Build time 134.923 sec｜Game capacity 4.911KB｜

Script

Sure, here's an example of a simple Snake game implemented as a single HTML file using JavaScript. It can be played on a smartphone and utilizes pictograms. Remember to enclose the code in script tags.

This HTML code creates a game board with a snake that can be controlled using the arrow keys on a smartphone. The objective is to eat the green food and avoid hitting the walls or the snake's own body. The game ends when the snake collides with any of these obstacles, and the score is displayed in an alert message. After that, the game is reset and can be played again.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        #game-board {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            position: relative;
        }
        .cell {
            width: 20px;
            height: 20px;
            position: absolute;
        }
        .food {
            color: green;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>
    
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const boardSize = 15;
            const cellSize = 20;
            const gameBoard = document.getElementById("game-board");
            let snake = [{ x: 7, y: 7 }];
            let food = { x: 2, y: 2 };
            let direction = { x: 0, y: 0 };
            
            let score = 0;
            let timerId = 0;
            
            function createCell(x, y) {
                const cell = document.createElement("div");
                cell.style.top = `${y * cellSize}px`;
                cell.style.left = `${x * cellSize}px`;
                cell.classList.add("cell");
                return cell;
            }
            
            function drawBoard() {
                gameBoard.innerHTML = "";
                
                snake.forEach((segment) => {
                    const cell = createCell(segment.x, segment.y);
                    gameBoard.appendChild(cell);
                });
                
                const foodCell = createCell(food.x, food.y);
                foodCell.classList.add("food");
                gameBoard.appendChild(foodCell);
            }
            
            function moveSnake() {
                const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
                snake.unshift(head);
                
                if (head.x === food.x && head.y === food.y) {
                    score++;
                    generateFood();
                } else {
                    snake.pop();
                }
                
                if (isGameOver()) {
                    clearInterval(timerId);
                    alert(`Game Over! Your score: ${score}`);
                    resetGame();
                }
                
                drawBoard();
            }
            
            function changeDirection(event) {
                const keyPressed = event.keyCode;
                
                if (keyPressed === 37 && direction.x !== 1) {
                    direction = { x: -1, y: 0 }; // Left
                } else if (keyPressed === 38 && direction.y !== 1) {
                    direction = { x: 0, y: -1 }; // Up
                } else if (keyPressed === 39 && direction.x !== -1) {
                    direction = { x: 1, y: 0 }; // Right
                } else if (keyPressed === 40 && direction.y !== -1) {
                    direction = { x: 0, y: 1 }; // Down
                }
            }
            
            function generateFood() {
                const x = Math.floor(Math.random() * boardSize);
                const y = Math.floor(Math.random() * boardSize);
                
                if (isOccupied(x, y)) {
                    return generateFood(); // Retry if new position is already occupied
                }
                
                food = { x, y };
            }
            
            function isOccupied(x, y) {
                return snake.some(segment => segment.x === x && segment.y === y);
            }
            
            function isGameOver() {
                const head = snake[0];
                return (
                    head.x < 0 || head.x >= boardSize ||
                    head.y < 0 || head.y >= boardSize ||
                    isOccupied(head.x, head.y)
                );
            }
            
            function resetGame() {
                snake = [{ x: 7, y: 7 }];
                direction = { x: 0, y: 0 };
                score = 0;
            }
            
            function startGame() {
                generateFood();
                drawBoard();
                timerId = setInterval(moveSnake, 200);
            }
            
            document.addEventListener("keydown", changeDirection);
            startGame();
        });
    </script>
</body>
</html>
```