AI game creator

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

No:17691

146

←

Prev Next

→

Snake Game
Developer User7771｜Date and time 23/9/24 9:22:52
Build time 27.553 sec｜Game capacity 4.554KB｜

Script

Sure! Here's a simple implementation of the Snake game using JavaScript and enclosed in script tags within a single HTML file:

To play the Snake game, simply open the HTML file on a smartphone or any web browser, and you'll be able to control the snake using the arrow keys. The objective is to eat the red food squares to grow the snake's length. If the snake collides with itself, the game will end.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of the Snake game using JavaScript and enclosed in script tags within a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #game-board {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            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>
        document.addEventListener("DOMContentLoaded", function () {
            const gameBoard = document.getElementById("game-board");
            let snake = [{ x: 200, y: 200 }];
            let food = { x: 0, y: 0 };
            let direction = { x: 0, y: 0 };
            let gameInterval;
 
            function startGame() {
                gameInterval = setInterval(moveSnake, 200);
                generateFood();
                document.addEventListener("keydown", changeDirection);
            }
 
            function moveSnake() {
                const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
                snake.unshift(head);
 
                if (isCollision(snake[0], food)) {
                    snake.push({});
                    generateFood();
                } else {
                    snake.pop();
                }
 
                if (isCollision(snake[0], snake, true)) {
                    clearInterval(gameInterval);
                    alert("Game over!");
                    resetGame();
                    return;
                }
 
                renderSnakeAndFood();
            }
 
            function generateFood() {
                const x = Math.floor(Math.random() * 20) * 20;
                const y = Math.floor(Math.random() * 20) * 20;
                food = { x, y };
            }
 
            function isCollision(object, array, ignoreHead = false) {
                for (let i = ignoreHead ? 1 : 0; i < array.length; i++) {
                    if (object.x === array[i].x && object.y === array[i].y) {
                        return true;
                    }
                }
                return false;
            }
 
            function changeDirection(event) {
                const LEFT_KEY = 37;
                const UP_KEY = 38;
                const RIGHT_KEY = 39;
                const DOWN_KEY = 40;
 
                const keyPressed = event.keyCode;
 
                if (keyPressed === LEFT_KEY && direction.x !== 20) {
                    direction = { x: -20, y: 0 };
                }
 
                if (keyPressed === UP_KEY && direction.y !== 20) {
                    direction = { x: 0, y: -20 };
                }
 
                if (keyPressed === RIGHT_KEY && direction.x !== -20) {
                    direction = { x: 20, y: 0 };
                }
 
                if (keyPressed === DOWN_KEY && direction.y !== -20) {
                    direction = { x: 0, y: 20 };
                }
            }
 
            function renderSnakeAndFood() {
                gameBoard.innerHTML = "";
 
                for (let i = 0; i < snake.length; i++) {
                    const snakePart = document.createElement("div");
                    snakePart.classList.add("snake");
                    snakePart.style.left = snake[i].x + "px";
                    snakePart.style.top = snake[i].y + "px";
                    gameBoard.appendChild(snakePart);
                }
 
                const foodElement = document.createElement("div");
                foodElement.id = "food";
                foodElement.style.left = food.x + "px";
                foodElement.style.top = food.y + "px";
                gameBoard.appendChild(foodElement);
            }
 
            function resetGame() {
                snake = [{ x: 200, y: 200 }];
                direction = { x: 0, y: 0 };
                gameInterval = null;
                gameBoard.innerHTML = "";
            }
 
            startGame();
        });
    </script>
</body>
</html>
```