AI game creator

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

No:20133

←

Prev Next

→

Snake Game
Developer User8929｜Date and time 23/10/8 16:15:59
Build time 22.753 sec｜Game capacity 4.206KB｜

Script

Sure, here's a simple implementation of the Snake game in a single HTML file using JavaScript:

To play the game using a smartphone, you can use touch events to control the snake's direction instead of keyboard input. This can be achieved by modifying the `addEventListener` block to handle touch events.

←

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 Snake game in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        canvas {
            border: 1px solid #000;
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Game variables
        var gridSize = 20;
        var snake = [{
            x: 160,
            y: 160
        }];
        var direction = "right";
        var food = {
            x: getRandomPosition(),
            y: getRandomPosition()
        };
        var score = 0;

// Game loop
        setInterval(update, 100);

// Update function
        function update() {
            clearCanvas();
            moveSnake();
            drawSnake();
            drawFood();
            checkCollision();
        }

// Clear canvas
        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

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

if (direction === "right") head.x += gridSize;
            else if (direction === "left") head.x -= gridSize;
            else if (direction === "up") head.y -= gridSize;
            else if (direction === "down") head.y += gridSize;

snake.unshift(head);
            if (!ateFood()) snake.pop();
        }

// Draw snake
        function drawSnake() {
            ctx.fillStyle = "#000";
            snake.forEach(function (snakePart) {
                ctx.fillRect(snakePart.x, snakePart.y, gridSize, gridSize);
            });
        }

// Generate random position
        function getRandomPosition() {
            return Math.floor(Math.random() * (canvas.width / gridSize)) * gridSize;
        }

// Draw food
        function drawFood() {
            ctx.fillStyle = "#f00";
            ctx.fillRect(food.x, food.y, gridSize, gridSize);
        }

// Check if snake ate food
        function ateFood() {
            if (snake[0].x === food.x && snake[0].y === food.y) {
                score++;
                food = {
                    x: getRandomPosition(),
                    y: getRandomPosition()
                };
                return true;
            }
            return false;
        }

// Check collision with walls or snake self
        function checkCollision() {
            if (snake[0].x < 0 || snake[0].x >= canvas.width ||
                snake[0].y < 0 || snake[0].y >= canvas.height) {
                resetGame();
            }

for (var i = 1; i < snake.length; i++) {
                if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
                    resetGame();
                    break;
                }
            }
        }

// Reset game
        function resetGame() {
            snake = [{
                x: 160,
                y: 160
            }];
            direction = "right";
            food = {
                x: getRandomPosition(),
                y: getRandomPosition()
            };
            score = 0;
        }

// Handle keyboard input
        document.addEventListener("keydown", function (event) {
            if (event.key === "ArrowUp" && direction !== "down")
                direction = "up";
            else if (event.key === "ArrowDown" && direction !== "up")
                direction = "down";
            else if (event.key === "ArrowLeft" && direction !== "right")
                direction = "left";
            else if (event.key === "ArrowRight" && direction !== "left")
                direction = "right";
        });
    </script>
</body>
</html>
```