AI game creator

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

No:34912

←

Prev Next

→

Snake Game
Developer User16385｜Date and time 24/1/12 14:54:26
Build time 19.472 sec｜Game capacity 4.69KB｜

Script

Sure! Here's an example of a simple Snake game implemented in a single HTML file using JavaScript:

To play the game, save the above code into an HTML file (e.g., `game.html`) and open it in a web browser. You should see the snake game board and can control the snake using the arrow keys on your smartphone. The goal is to eat the red food and avoid hitting the walls or the snake's body. Please note that this is just a basic implementation for demonstration purposes and can be further enhanced with features like score tracking, levels, and better visuals.

←

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:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        #game-board {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }
        
        .snake {
            width: 20px;
            height: 20px;
            position: absolute;
            background-color: green;
        }
        
        .food {
            width: 20px;
            height: 20px;
            position: absolute;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>
    
    <script>
        // Game variables
        var tileSize = 20;
        var boardSize = 20;
        var snake = [{x: 10, y: 10}];
        var direction = {x: 1, y: 0};
        var food = {x: Math.floor(Math.random() * boardSize), y: Math.floor(Math.random() * boardSize)};
        
        // Game board
        var gameBoard = document.getElementById("game-board");
        gameBoard.style.width = boardSize * tileSize + "px";
        gameBoard.style.height = boardSize * tileSize + "px";
        
        // Handle keyboard input
        document.addEventListener("keydown", function(event) {
            // ArrowUp key
            if (event.keyCode === 38 && direction.y !== 1) {
                direction = {x: 0, y: -1};
            }
            // ArrowDown key
            else if (event.keyCode === 40 && direction.y !== -1) {
                direction = {x: 0, y: 1};
            }
            // ArrowLeft key
            else if (event.keyCode === 37 && direction.x !== 1) {
                direction = {x: -1, y: 0};
            }
            // ArrowRight key
            else if (event.keyCode === 39 && direction.x !== -1) {
                direction = {x: 1, y: 0};
            }
        });
        
        // Update snake position
        function updateSnake() {
            var head = {x: snake[0].x + direction.x, y: snake[0].y + direction.y};
            
            // Check for collision with walls or self
            if (head.x < 0 || head.x >= boardSize || head.y < 0 || head.y >= boardSize || collision(head)) {
                // Game over
                alert("Game over!");
                location.reload(); // Restart the game
                return;
            }
            
            snake.unshift(head); // Add new head to the front
            
            // Check if snake eats the food
            if (head.x === food.x && head.y === food.y) {
                // Generate new food position
                food = {x: Math.floor(Math.random() * boardSize), y: Math.floor(Math.random() * boardSize)};
            } else {
                snake.pop(); // Remove tail if no food is eaten
            }
        }
        
        // Check for collision with the snake
        function collision(position) {
            for (var i = 1; i < snake.length; i++) {
                if (position.x === snake[i].x && position.y === snake[i].y) {
                    return true;
                }
            }
            return false;
        }
        
        // Render game board
        function render() {
            // Clear previous board
            gameBoard.innerHTML = "";
            
            // Render snake
            for (var i = 0; i < snake.length; i++) {
                var snakePart = document.createElement("div");
                snakePart.className = "snake";
                snakePart.style.left = snake[i].x * tileSize + "px";
                snakePart.style.top = snake[i].y * tileSize + "px";
                gameBoard.appendChild(snakePart);
            }
            
            // Render food
            var foodElement = document.createElement("div");
            foodElement.className = "food";
            foodElement.style.left = food.x * tileSize + "px";
            foodElement.style.top = food.y * tileSize + "px";
            gameBoard.appendChild(foodElement);
        }
        
        // Game loop
        setInterval(function() {
            updateSnake();
            render();
        }, 200);
    </script>
</body>
</html>
```

Please note that this is just a basic implementation for demonstration purposes and can be further enhanced with features like score tracking, levels, and better visuals.