Jogo da cobrinha infinito, crie um limite de mapa's game

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

No:52937

322

←

Prev Next

→

Jogo da cobrinha infinito, crie um limite de mapa
Developer User19080｜Date and time 24/3/27 0:17:51
Build time 23.043 sec｜Game capacity 3.025KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html lang="pt">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jogo da Cobrinha Infinito</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

#gameCanvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

const box = 20;
        let snake = [{ x: 200, y: 200 }];
        let food = { x: Math.floor(Math.random() * 20) * box, y: Math.floor(Math.random() * 20) * box };
        let direction = "right";

function drawSnake() {
            snake.forEach(segment => {
                ctx.fillStyle = "green";
                ctx.fillRect(segment.x, segment.y, box, box);
            });
        }

function drawFood() {
            ctx.fillStyle = "red";
            ctx.fillRect(food.x, food.y, box, box);
        }

function updateGame() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

let head = { x: snake[0].x, y: snake[0].y };

if (direction === "right") head.x += box;
            if (direction === "left") head.x -= box;
            if (direction === "up") head.y -= box;
            if (direction === "down") head.y += box;

snake.unshift(head);

if (head.x === food.x && head.y === food.y) {
                food = { x: Math.floor(Math.random() * 20) * box, y: Math.floor(Math.random() * 20) * box };
            } else {
                snake.pop();
            }

snake.forEach((segment, index) => {
                if (index !== 0 && head.x === segment.x && head.y === segment.y) {
                    gameOver();
                }
            });

if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
                gameOver();
            }

drawSnake();
            drawFood();
        }

function changeDirection(e) {
            const key = e.code;
            if (key === "ArrowUp" && direction !== "down") direction = "up";
            if (key === "ArrowDown" && direction !== "up") direction = "down";
            if (key === "ArrowLeft" && direction !== "right") direction = "left";
            if (key === "ArrowRight" && direction !== "left") direction = "right";
        }

document.addEventListener("keydown", changeDirection);
        setInterval(updateGame, 100);
    </script>
</body>

</html>