AI game creator

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

No:27857

←

Prev Next

→

Snake Game
Developer User13895｜Date and time 23/12/9 18:46:36
Build time 23.832 sec｜Game capacity 3.568KB｜

Script

Sure, here's an implementation of the Snake Game as a single HTML file with JavaScript:

To play the game, you can save the above code into an HTML file, open it in a web browser on your smartphone, and control the snake using the arrow keys. The snake's goal is to eat the red food while avoiding colliding with itself or the boundaries of the game board. Note: The implementation uses the HTML5 canvas element for rendering the game.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

Sure, here's an implementation of the Snake Game as a single HTML file with JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        #game-board {
            position: relative;
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }

.snake, .food {
            position: absolute;
            width: 20px;
            height: 20px;
        }

.snake {
            background-color: green;
        }

.food {
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

// Game board
        var gameBoard = document.getElementById("game-board");
        var ctx = gameBoard.getContext("2d");
        var width = 20;
        var height = 20;

// Generate random food position
        function generateFood() {
            food.x = Math.floor(Math.random() * (gameBoard.width / width)) * width;
            food.y = Math.floor(Math.random() * (gameBoard.height / height)) * height;
        }

// Draw the snake and food
        function draw() {
            ctx.clearRect(0, 0, gameBoard.width, gameBoard.height);

for (var i = 0; i < snake.length; i++) {
                ctx.fillStyle = "green";
                ctx.fillRect(snake[i].x, snake[i].y, width, height);
            }

ctx.fillStyle = "red";
            ctx.fillRect(food.x, food.y, width, height);
        }

// Game logic
        function update() {
            var head = { x: snake[0].x, y: snake[0].y };

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

snake.unshift(head); // Add new head

if (head.x === food.x && head.y === food.y) {
                // Snake ate the food
                generateFood();
            } else {
                // Remove tail if there's no food eaten
                snake.pop();
            }
        }

// Handle key events
        function handleKeyDown(event) {
            if (event.key === "ArrowRight" && direction !== "left")
                direction = "right";
            if (event.key === "ArrowLeft" && direction !== "right")
                direction = "left";
            if (event.key === "ArrowUp" && direction !== "down")
                direction = "up";
            if (event.key === "ArrowDown" && direction !== "up")
                direction = "down";
        }

// Main game loop
        function gameLoop() {
            update();
            draw();

setTimeout(gameLoop, gameSpeed);
        }

// Initial setup
        function init() {
            generateFood();
            document.addEventListener("keydown", handleKeyDown);
            gameLoop();
        }

// Start the game
        init();
    </script>
</body>
</html>
```

Note: The implementation uses the HTML5 canvas element for rendering the game.