AI game creator

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

No:37261

←

Prev Next

→

Snake Game
Developer User17050｜Date and time 24/1/20 23:54:06
Build time 12.217 sec｜Game capacity 4.029KB｜

Script

Sure, here's an example of a simple Snake game implemented as a single HTML file using JavaScript:

This code creates a simple Snake game where the player controls a snake using arrow key inputs. The snake moves around the canvas and the player's objective is to eat the randomly placed food, which makes the snake grow longer. If the snake collides with the edges of the canvas or with itself, the game is over.

←

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 as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>

<head>
    <style>
        canvas {
            border: 1px solid #000;
            display: block;
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <script>
        // Snake Game
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");
        document.body.appendChild(canvas);
        canvas.width = 400;
        canvas.height = 400;

// Game constants
        const gridSize = 20;
        const gridSizeX = canvas.width / gridSize;
        const gridSizeY = canvas.height / gridSize;

// Snake variables
        let snake = [
            { x: 10, y: 10 },
            { x: 9, y: 10 },
            { x: 8, y: 10 },
        ];
        let direction = { x: 1, y: 0 };
        let food = getRandomLocation();

// Game loop
        setInterval(gameLoop, 100);

function gameLoop() {
            clearCanvas();
            updateSnake();
            drawSnake();
            drawFood();
            checkCollision();
        }

function clearCanvas() {
            context.fillStyle = "#000";
            context.fillRect(0, 0, canvas.width, canvas.height);
        }

function drawSnake() {
            context.fillStyle = "#0f0";
            snake.forEach(segment => {
                context.fillRect(
                    segment.x * gridSize,
                    segment.y * gridSize,
                    gridSize,
                    gridSize
                );
            });
        }

function drawFood() {
            context.fillStyle = "#f00";
            context.fillRect(
                food.x * gridSize,
                food.y * gridSize,
                gridSize,
                gridSize
            );
        }

function checkCollision() {
            const head = snake[0];
            if (
                head.x < 0 ||
                head.y < 0 ||
                head.x >= gridSizeX ||
                head.y >= gridSizeY ||
                snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)
            ) {
                gameOver();
            }
        }

function gameOver() {
            clearInterval(gameLoop);
            alert("Game Over!");
        }

function getRandomLocation() {
            return {
                x: Math.floor(Math.random() * gridSizeX),
                y: Math.floor(Math.random() * gridSizeY)
            };
        }

// Controls
        document.addEventListener("keydown", changeDirection);

</html>
```

This code creates a simple Snake game where the player controls a snake using arrow key inputs. The snake moves around the canvas and the player's objective is to eat the randomly placed food, which makes the snake grow longer. If the snake collides with the edges of the canvas or with itself, the game is over.