AI game creator

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

No:15463

5038

←

Prev Next

→

Snake Game
Developer anonymous｜Date and time 70/1/1 10:22:40
Build time unknown sec｜Game capacity 4.96KB｜

Script

Sure! Here's a simple implementation of the classic Snake game in a single HTML file, using JavaScript and enclosed in `` tags: <br><br> <br> <style> #game-board { background-color: black; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> <div id="game-board"></div>

This implementation creates a game board, controls the movement of the snake using arrow keys, generates food, and handles collision detection with the walls and the snake itself. If the snake collides, the game is reset and a "Game Over" message is displayed.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of the classic Snake game in a single HTML file, using JavaScript and enclosed in `<script>` tags:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #game-board {
            background-color: black;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

// Global variables
        let snake = [{ x: 10, y: 10 }]; // Initial snake position
        let direction = 'right'; // Initial direction of the snake
        let food = {}; // Position of the food

// Function to create the game board
        function createBoard() {
            const gameBoard = document.getElementById('game-board');
            gameBoard.style.width = boardSize * tileSize + 'px';
            gameBoard.style.height = boardSize * tileSize + 'px';
        }

// Function to create a tile (square) on the game board
        function createTile(x, y, type) {
            const tile = document.createElement('div');
            tile.className = 'tile ' + type;
            tile.style.width = tileSize + 'px';
            tile.style.height = tileSize + 'px';
            tile.style.top = y * tileSize + 'px';
            tile.style.left = x * tileSize + 'px';
            return tile;
        }

// Function to render the game board
        function render() {
            const gameBoard = document.getElementById('game-board');
            gameBoard.innerHTML = '';

// Render the snake
            snake.forEach((segment, index) => {
                const snakeTile = createTile(segment.x, segment.y, (index === 0) ? 'snake-head' : 'snake');
                gameBoard.appendChild(snakeTile);
            });

// Render the food
            const foodTile = createTile(food.x, food.y, 'food');
            gameBoard.appendChild(foodTile);
        }

// Function to generate a random position for the food
        function generateFood() {
            food = {
                x: Math.floor(Math.random() * boardSize),
                y: Math.floor(Math.random() * boardSize)
            };
        }

// Function to handle keyboard input
        function handleKeyPress(event) {
            const key = event.keyCode;
            if (key === 37 && direction !== 'right') { // Left arrow key
                direction = 'left';
            } else if (key === 38 && direction !== 'down') { // Up arrow key
                direction = 'up';
            } else if (key === 39 && direction !== 'left') { // Right arrow key
                direction = 'right';
            } else if (key === 40 && direction !== 'up') { // Down arrow key
                direction = 'down';
            }
        }

// Function to update the game state
        function update() {
            let newHead = { x: snake[0].x, y: snake[0].y };

// Update the position of the snake head based on the current direction
            if (direction === 'left') {
                newHead.x -= 1;
            } else if (direction === 'up') {
                newHead.y -= 1;
            } else if (direction === 'right') {
                newHead.x += 1;
            } else if (direction === 'down') {
                newHead.y += 1;
            }

// Check for collision with walls or itself
            if (
                newHead.x < 0 || newHead.x >= boardSize ||
                newHead.y < 0 || newHead.y >= boardSize ||
                snake.some(segment => segment.x === newHead.x && segment.y === newHead.y)
            ) {
                clearInterval(gameLoop);
                alert('Game Over!');

// Restart the game
                snake = [{ x: 10, y: 10 }];
                direction = 'right';
                generateFood();
                gameLoop = setInterval(update, 150);
            }

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

// Check if the snake has eaten the food
            if (newHead.x === food.x && newHead.y === food.y) {
                generateFood();
            } else {
                snake.pop(); // Remove the tail segment
            }

render(); // Render the updated game state
        }

createBoard();
        generateFood();
        render();
        document.addEventListener('keydown', handleKeyPress);
        let gameLoop = setInterval(update, 150); // Start the game loop
    </script>
</body>
</html>
```

This implementation creates a game board, controls the movement of the snake using arrow keys, generates food, and handles collision detection with the walls and the snake itself. If the snake collides, the game is reset and a "Game Over" message is displayed.