AI game creator

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

No:52744

316

←

Prev Next

→

Snake Game
Developer User22126｜Date and time 24/3/24 12:40:42
Build time 11.443 sec｜Game capacity 2.965KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    
    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        
        let snake = [{x: 10, y: 10}];
        let food = {x: 15, y: 15};
        let direction = "right";
        
        function drawSnake() {
            ctx.fillStyle = "green";
            snake.forEach(segment => {
                ctx.fillRect(segment.x * 20, segment.y * 20, 20, 20);
            });
        }
        
        function drawFood() {
            ctx.fillStyle = "red";
            ctx.fillRect(food.x * 20, food.y * 20, 20, 20);
        }
        
        function moveSnake() {
            let newX = snake[0].x;
            let newY = snake[0].y;
            
            if (direction === "right") {
                newX++;
            } else if (direction === "left") {
                newX--;
            } else if (direction === "up") {
                newY--;
            } else if (direction === "down") {
                newY++;
            }
            
            let newHead = {x: newX, y: newY};
            snake.unshift(newHead);
            
            if (newX === food.x && newY === food.y) {
                food.x = Math.floor(Math.random() * 20);
                food.y = Math.floor(Math.random() * 20);
            } else {
                snake.pop();
            }
        }
        
        function checkCollision() {
            const head = snake[0];
            
            if (head.x < 0 || head.x >= 20 || head.y < 0 || head.y >= 20) {
                return true;
            }
            
            for (let i = 1; i < snake.length; i++) {
                if (head.x === snake[i].x && head.y === snake[i].y) {
                    return true;
                }
            }
            
            return false;
        }
        
        function updateGame() {
            if (checkCollision()) {
                alert("Game Over!");
                location.reload();
                return;
            }
            
            ctx.clearRect(0, 0, 400, 400);
            drawSnake();
            drawFood();
            moveSnake();
            
            setTimeout(updateGame, 100);
        }
        
        document.addEventListener("keydown", event => {
            const key = event.key;
            
            if (key === "ArrowLeft" && direction !== "right") {
                direction = "left";
            } else if (key === "ArrowRight" && direction !== "left") {
                direction = "right";
            } else if (key === "ArrowUp" && direction !== "down") {
                direction = "up";
            } else if (key === "ArrowDown" && direction !== "up") {
                direction = "down";
            }
        });
        
        updateGame();
    </script>
</body>
</html>
```