AI game creator

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

No:39511

←

Prev Next

→

Snake Game
Developer User17669｜Date and time 24/1/28 17:52:13
Build time 17.58 sec｜Game capacity 5.03KB｜

Script

Sure! Here's a basic implementation of the snake game in a single HTML file using JavaScript:

To play the game, simply embed the code in an HTML file, save it as a `.html` file, and open it in a web browser. The snake can be controlled using the arrow keys on a computer or by touch gestures on a smartphone. The objective of the game is to eat the food (red square) and grow the snake's length without hitting the walls or itself. If the snake hits the wall or itself, the game ends, and an alert is shown with the message "Game Over".

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure! Here's a basic implementation of the snake game in a single HTML file using JavaScript:

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

// Game variables
        var boardSize = 20; // Size of the game board
        var tileSize = 20; // Size of each tile in pixels
        var snake = [{ x: 10, y: 10 }]; // Initial position of the snake
        var direction = 'right'; // Initial direction of the snake
        var food = generateFoodPosition(); // Initial position of the food
        var intervalId; // Interval identifier for game loop

// Function to generate random position for food
        function generateFoodPosition() {
            return {
                x: Math.floor(Math.random() * boardSize),
                y: Math.floor(Math.random() * boardSize)
            };
        }

// Main game loop
        function gameLoop() {
            // Clear the board
            document.getElementById('game-board').innerHTML = '';

// Move the snake based on the current direction
            var head = Object.assign({}, snake[0]); // Create a new object to avoid reference issues
            switch (direction) {
                case 'up':
                    head.y -= 1;
                    break;
                case 'down':
                    head.y += 1;
                    break;
                case 'left':
                    head.x -= 1;
                    break;
                case 'right':
                    head.x += 1;
                    break;
            }

// Check if snake hits the wall or itself
            if (head.x < 0 || head.x >= boardSize || head.y < 0 || head.y >= boardSize || isSnakeAtPosition(head)) {
                clearInterval(intervalId); // Stop the game loop
                alert('Game Over');
                return;
            }

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

// Check if the snake eats the food
            if (head.x === food.x && head.y === food.y) {
                // Increase the snake length
                food = generateFoodPosition();
            } else {
                snake.pop(); // Remove the tail of the snake
            }

// Render the snake and food
            var gameBoard = document.getElementById('game-board');
            snake.forEach(function (segment) {
                var segmentDiv = document.createElement('div');
                segmentDiv.style.position = 'absolute';
                segmentDiv.style.width = tileSize + 'px';
                segmentDiv.style.height = tileSize + 'px';
                segmentDiv.style.backgroundColor = '#000';
                segmentDiv.style.left = (segment.x * tileSize) + 'px';
                segmentDiv.style.top = (segment.y * tileSize) + 'px';
                gameBoard.appendChild(segmentDiv);
            });

var foodDiv = document.createElement('div');
            foodDiv.style.position = 'absolute';
            foodDiv.style.width = tileSize + 'px';
            foodDiv.style.height = tileSize + 'px';
            foodDiv.style.backgroundColor = '#f00';
            foodDiv.style.left = (food.x * tileSize) + 'px';
            foodDiv.style.top = (food.y * tileSize) + 'px';
            gameBoard.appendChild(foodDiv);
        }

// Function to check if snake is at a given position
        function isSnakeAtPosition(position) {
            return snake.some(function (segment) {
                return segment.x === position.x && segment.y === position.y;
            });
        }

// Event listener to change the direction of the snake
        document.addEventListener('keydown', function (event) {
            switch (event.code) {
                case 'ArrowUp':
                    direction = 'up';
                    break;
                case 'ArrowDown':
                    direction = 'down';
                    break;
                case 'ArrowLeft':
                    direction = 'left';
                    break;
                case 'ArrowRight':
                    direction = 'right';
                    break;
            }
        });

// Start the game loop
        intervalId = setInterval(gameLoop, 200);
    </script>
</body>
</html>
```