AI game creator

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

No:26423

129

←

Prev Next

→

Snake Game
Developer User12944｜Date and time 23/11/30 14:54:17
Build time 93.626 sec｜Game capacity 5.079KB｜

Script

Sure, I can provide you with a simple implementation of the classic Snake Game using JavaScript, HTML, and CSS. Here's a code snippet for a single HTML file that you can use:

To play the game, you can open this HTML file in a web browser on your smartphone. The game board will be displayed, and you can control the snake's movement using the arrow keys. The objective is to eat the red food objects and grow the snake without hitting the walls or colliding with itself. If the game is over, an alert will be shown.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Sure, I can provide you with a simple implementation of the classic Snake Game using JavaScript, HTML, and CSS. Here's a code snippet for a single HTML file that you can use:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        #game-board {
            position: relative;
            width: 320px;
            height: 320px;
            border: 1px solid #000;
        }
        
        .snake {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: green;
        }
        
        .food {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>
    
    <script>
        window.onload = function() {
            const gameBoard = document.getElementById("game-board");
            const width = 20;
            const height = 20;
            const cellSize = 20;
            
            let snake = [{ x: 10, y: 10 }];
            let food = { x: 15, y: 10 };
            let direction = "right";
            
            function drawSnake() {
                gameBoard.innerHTML = "";
                
                snake.forEach(segment => {
                    const snakeElement = document.createElement("div");
                    snakeElement.style.left = segment.x * cellSize + "px";
                    snakeElement.style.top = segment.y * cellSize + "px";
                    snakeElement.classList.add("snake");
                    gameBoard.appendChild(snakeElement);
                });
            }
            
            function drawFood() {
                const foodElement = document.createElement("div");
                foodElement.style.left = food.x * cellSize + "px";
                foodElement.style.top = food.y * cellSize + "px";
                foodElement.classList.add("food");
                gameBoard.appendChild(foodElement);
            }
            
            function updateSnake() {
                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 = {
                        x: Math.floor(Math.random() * width),
                        y: Math.floor(Math.random() * height)
                    }
                } else {
                    snake.pop();
                }
            }
            
            function checkGameOver() {
                const head = snake[0];
                
                if (
                    head.x < 0 || 
                    head.x >= width || 
                    head.y < 0 || 
                    head.y >= height ||
                    snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)
                ) {
                    clearInterval(gameInterval);
                    alert("Game Over!");
                }
            }
            
            function handleKeydown(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;
                }
            }
            
            document.addEventListener("keydown", handleKeydown);
            
            const gameInterval = setInterval(() => {
                updateSnake();
                drawSnake();
                drawFood();
                checkGameOver();
            }, 200);
        };
    </script>
</body>
</html>
```