AI game creator

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

No:26789

←

Prev Next

→

Snake Game
Developer User13248｜Date and time 23/12/2 12:31:31
Build time 47.108 sec｜Game capacity 4.982KB｜

Script

Below is an example of an HTML file that implements the classic Snake game using JavaScript and pictograms:

To play the game, you can open this code in any web browser, preferably on a smartphone for a better experience. You control the movement of the snake using the arrow keys or the keys "W", "A", "S", "D" for up, left, down, and right respectively. The objective is to eat the food (apple icon) and avoid colliding with the boundaries or the snake's own body.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Below is an example of an HTML file that implements the classic Snake game using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        #game-board {
            border: 2px solid black;
            width: 300px;
            height: 300px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

// Constants for game configuration
        const boardSize = 10;
        const updateTime = 200;

// Variables for game state
        let snake = [{ x: 0, y: 0 }];
        let direction = "right";
        let food = generateFood();

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

// Function to render the game board
        function drawBoard() {
            const board = document.getElementById("game-board");
            
            // Clear the game board
            board.innerHTML = "";

// Draw the snake
            snake.forEach(segment => {
                const snakeSegment = document.createElement("span");
                snakeSegment.textContent = snakeIcon;
                snakeSegment.style.gridRowStart = segment.y + 1;
                snakeSegment.style.gridColumnStart = segment.x + 1;
                board.appendChild(snakeSegment);
            });

// Draw the food
            const foodElement = document.createElement("span");
            foodElement.textContent = foodIcon;
            foodElement.style.gridRowStart = food.y + 1;
            foodElement.style.gridColumnStart = food.x + 1;
            board.appendChild(foodElement);
        }

// Function to handle key press events
        function handleKeyPress(event) {
            const key = event.key.toLowerCase();
            
            // Update direction based on key press
            switch (key) {
                case "w":
                    direction = "up";
                    break;
                case "s":
                    direction = "down";
                    break;
                case "a":
                    direction = "left";
                    break;
                case "d":
                    direction = "right";
                    break;
            }
        }

// Function to update game state
        function updateGame() {
            // Calculate the new head position based on direction
            const head = Object.assign({}, snake[0]);

switch (direction) {
                case "up":
                    head.y--;
                    break;
                case "down":
                    head.y++;
                    break;
                case "left":
                    head.x--;
                    break;
                case "right":
                    head.x++;
                    break;
            }

// Check for collision with boundaries or self
            if (head.x < 0 || head.x >= boardSize || head.y < 0 || head.y >= boardSize || collision(head)) {
                // Game over
                alert("Game Over");
                resetGame();
                return;
            }

// Check for collision with food
            if (head.x === food.x && head.y === food.y) {
                // Increase snake size and generate new food
                snake.unshift(head);
                food = generateFood();
            } else {
                // Move the snake
                snake.pop();
                snake.unshift(head);
            }

// Redraw the game board
            drawBoard();

// Schedule the next update
            setTimeout(updateGame, updateTime);
        }

// Function to check collision with snake body
        function collision(head) {
            return snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y);
        }

// Function to reset the game
        function resetGame() {
            snake = [{ x: 0, y: 0 }];
            direction = "right";
            food = generateFood();
            drawBoard();
        }

// Event listener for key press events
        document.addEventListener("keydown", handleKeyPress);

// Initial game setup
        drawBoard();
        updateGame();
    </script>
</body>
</html>
```