AI game creator

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

No:42390

←

Prev Next

→

Snake Game
Developer User18872｜Date and time 24/2/11 16:13:49
Build time 11.705 sec｜Game capacity 4.902KB｜

Script

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

264

To play the game, save this code in a single HTML file (e.g., `snake.html`) and open it in a web browser on your smartphone. Use the arrow keys or swipe gestures to control the snake and try to eat the food without hitting the boundaries or yourself. The score will be displayed at the top left corner of the canvas, and the game will end when a collision occurs.

←

Prev　Next

→ 　

Back　

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

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: #222;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            padding: 0;
        }

canvas {
            background-color: #333;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="280" height="280"></canvas>264

// Set up initial game variables
            let snake = [{ x: 140, y: 140 }];
            let direction = "right";
            let food = { x: 0, y: 0 };
            let score = 0;

// Generate random coordinates for the food
            function generateFood() {
                food.x = Math.floor(Math.random() * (canvas.width / 20)) * 20;
                food.y = Math.floor(Math.random() * (canvas.height / 20)) * 20;
            }

// Handle input from user
            function handleInput(e) {
                if (e.key === "ArrowUp" && direction !== "down") {
                    direction = "up";
                } else if (e.key === "ArrowDown" && direction !== "up") {
                    direction = "down";
                } else if (e.key === "ArrowLeft" && direction !== "right") {
                    direction = "left";
                } else if (e.key === "ArrowRight" && direction !== "left") {
                    direction = "right";
                }
            }

// Update snake position and check for collisions
            function update() {
                const head = { x: snake[0].x, y: snake[0].y };
                if (direction === "up") {
                    head.y -= 20;
                } else if (direction === "down") {
                    head.y += 20;
                } else if (direction === "left") {
                    head.x -= 20;
                } else if (direction === "right") {
                    head.x += 20;
                }

snake.unshift(head);

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

// Check for collisions with canvas boundaries or self
                if (
                    head.x < 0 ||
                    head.x >= canvas.width ||
                    head.y < 0 ||
                    head.y >= canvas.height ||
                    snake.some(
                        (segment, index) =>
                            index !== 0 && segment.x === head.x && segment.y === head.y
                    )
                ) {
                    clearInterval(gameLoop);
                    alert("Game Over! Your score: " + score);
                    location.reload();
                }

// Call the draw function to update the game display
                draw();
            }

// Draw the snake, food, and score on the canvas
            function draw() {
                // Clear the canvas
                context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the snake
                snake.forEach(segment => {
                    context.fillStyle = "#fff";
                    context.fillRect(segment.x, segment.y, 20, 20);
                });

// Draw the food
                context.fillStyle = "#ff0000";
                context.fillRect(food.x, food.y, 20, 20);

// Draw the score
                context.fillStyle = "#fff";
                context.font = "16px Arial";
                context.fillText("Score: " + score, 10, 20);
            }

// Start the game loop
            const gameLoop = setInterval(update, 100);

// Event listener for arrow key input
            document.addEventListener("keydown", handleInput);
        };
    </script>
</body>
</html>
```

To play the game, save this code in a single HTML file (e.g., `snake.html`) and open it in a web browser on your smartphone. Use the arrow keys or swipe gestures to control the snake and try to eat the food without hitting the boundaries or yourself. The score will be displayed at the top left corner of the canvas, and the game will end when a collision occurs.