AI game creator

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

No:33035

←

Prev Next

→

Snake Game
Developer User15610｜Date and time 24/1/2 5:48:55
Build time 18.879 sec｜Game capacity 4.216KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        #gameBoard {
            border: 1px solid black;
            width: 400px;
            height: 400px;
            display: flex;
            flex-wrap: wrap;
        }
        .cell {
            width: 20px;
            height: 20px;
            background-color: white;
        }
        .snake {
            background-color: green;
        }
        .food {
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="gameBoard"></div>
    <script>
        document.addEventListener("DOMContentLoaded", function(){
            const gameBoard = document.getElementById("gameBoard");
            const boardSize = 20;
            const cellSize = 20;
            
            // Create Game Board
            for(let i=0; i<boardSize*boardSize; i++) {
                const cell = document.createElement("div");
                cell.classList.add("cell");
                gameBoard.appendChild(cell);
            }

// Initialize Game
            let snake = [2, 1, 0]; // Snake initial position (head and tail)
            let direction = 1; // Initial direction: 1 = right, -1 = left, boardSize = down, -boardSize = up
            let food = 0; // Food position

function drawFood() {
                const cells = document.getElementsByClassName("cell");
                cells[food].classList.add("food");
            }

function move() {
                const head = snake[0];
                const tail = snake.pop();

// Remove tail
                const cells = document.getElementsByClassName("cell");
                cells[tail].classList.remove("snake");

// Calculate new head position
                let newHead = head + direction;

// Check for game over conditions
                if (snake.includes(newHead) || newHead < 0 || newHead >= boardSize*boardSize) {
                    clearInterval(gameInterval);
                    alert("Game Over!");
                    return;
                }

// Check for food collision
                if (newHead === food) {
                    // Increase snake size
                    snake.unshift(head, newHead);

// Generate new food position
                    food = Math.floor(Math.random() * (boardSize*boardSize));
                    while (snake.includes(food)) {
                        food = Math.floor(Math.random() * (boardSize*boardSize));
                    }
                    
                    // Draw food on the board
                    cells[food].classList.remove("food");
                    drawFood();
                } else {
                    // Move snake
                    snake.unshift(newHead);
                }

// Draw snake on the board
                drawSnake();
            }

// Start game
            drawSnake();
            drawFood();
            const gameInterval = setInterval(move, 200);
            document.addEventListener("keydown", handleKeydown);
        });
    </script>
</body>
</html>