AI game creator

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

No:34462

←

Prev Next

→

Snake game
Developer User16247｜Date and time 24/1/10 13:42:52
Build time 15.984 sec｜Game capacity 4.896KB｜

Script

Sure! Here's an example of a simple Snake game implemented in a single HTML file using JavaScript. The game should be playable on a smartphone and uses pictograms for better visual representation:

To play the game: - Copy the above code into a new `.html` file. - Save the file with a `.html` extension (e.g., snake.html). - Open the file in a web browser. - The game should automatically start. Control the snake's direction using arrow keys. - The goal is to eat the red food squares and grow the snake while avoiding collisions with the walls and its own body. - When the game ends, an alert will appear showing the final score, and then the game will restart automatically. Please note that this is a simplified example of a Snake game, and you can customize and enhance it further based on your requirements and preferences.

←

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 in a single HTML file using JavaScript. The game should be playable on a smartphone and uses pictograms for better visual representation:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

const gridSize = 20;
        const canvasSize = 400;
        const initialSnakeSize = 5;

let direction;
        let score;
        let snake;
        let food;

function startGame() {
            direction = "right";
            score = 0;
            snake = [];
            food = { x: 0, y: 0 };

// Create initial snake
            for (let i = 0; i < initialSnakeSize; i++) {
                snake.push({ x: i, y: 0 });
            }

// Generate food
            generateFood();

// Listen for arrow key presses
            document.addEventListener("keydown", changeDirection);

// Start game loop
            setInterval(gameLoop, 100);
        }

function gameLoop() {
            clearCanvas();
            moveSnake();
            drawSnake();
            drawFood();
            checkCollision();
            drawScore();
        }

function clearCanvas() {
            ctx.clearRect(0, 0, canvasSize, canvasSize);
        }

function moveSnake() {
            const head = { x: snake[0].x, y: snake[0].y };

switch (direction) {
                case "up":
                    head.y -= 1;
                    break;
                case "down":
                    head.y += 1;
                    break;
                case "left":
                    head.x -= 1;
                    break;
                case "right":
                    head.x += 1;
                    break;
            }

snake.unshift(head);
            if (head.x === food.x && head.y === food.y) {
                score += 10;
                generateFood();
            } else {
                snake.pop();
            }
        }

function drawSnake() {
            snake.forEach((segment) => {
                ctx.fillStyle = "green";
                ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
                ctx.strokeStyle = "white";
                ctx.strokeRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
            });
        }

function generateFood() {
            food.x = Math.floor(Math.random() * (canvasSize / gridSize));
            food.y = Math.floor(Math.random() * (canvasSize / gridSize));
        }

function drawFood() {
            ctx.fillStyle = "red";
            ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
        }

function checkCollision() {
            const head = snake[0];

if (
                head.x < 0 ||
                head.y < 0 ||
                head.x >= canvasSize / gridSize ||
                head.y >= canvasSize / gridSize ||
                snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)
            ) {
                clearInterval(gameLoop);
                alert("Game Over! Your score is " + score);
                startGame();
            }
        }

function drawScore() {
            ctx.fillStyle = "black";
            ctx.font = "20px Arial";
            ctx.fillText("Score: " + score, 10, 30);
        }

function changeDirection(e) {
            switch (e.keyCode) {
                case 37:
                    direction = "left";
                    break;
                case 38:
                    direction = "up";
                    break;
                case 39:
                    direction = "right";
                    break;
                case 40:
                    direction = "down";
                    break;
            }
        }

startGame();
    </script>
</body>
</html>
```

To play the game:
- Copy the above code into a new `.html` file.
- Save the file with a `.html` extension (e.g., snake.html).
- Open the file in a web browser.
- The game should automatically start. Control the snake's direction using arrow keys.
- The goal is to eat the red food squares and grow the snake while avoiding collisions with the walls and its own body.
- When the game ends, an alert will appear showing the final score, and then the game will restart automatically.

Please note that this is a simplified example of a Snake game, and you can customize and enhance it further based on your requirements and preferences.