Crie um jogo dá cobrinha's game

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

No:40256

←

Prev Next

→

Crie um jogo dá cobrinha
Developer User18056｜Date and time 24/2/2 5:43:31
Build time 18.09 sec｜Game capacity 5.312KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Jogo da Cobrinha</title>
    <style>
        canvas {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Tamanho do grid e da cobrinha
        const gridSize = 20;
        const snakeSize = gridSize - 2; // -2 para garantir espaço entre as celas

// Velocidade da cobrinha
        let snakeSpeed = 200; // em milissegundos

// Posição inicial da cobrinha
        let snakeX = 0;
        let snakeY = 0;

// Direção inicial da cobrinha
        let snakeDirection = "right"; // Opções: "up" (cima), "down" (baixo), "left" (esquerda), "right" (direita)

// Array para armazenar as posições do corpo da cobrinha
        let snakeBody = [];

// Célula da comida
        let foodX = 0;
        let foodY = 0;

let gameLoop;

function startGame() {
            // Reinicia as variáveis para um novo jogo
            snakeX = 0;
            snakeY = 0;
            snakeDirection = "right";
            snakeBody = [];
            createFood();

// Define o loop do jogo
            gameLoop = setInterval(updateGame, snakeSpeed);

// Adiciona eventos de teclado para controlar a direção da cobrinha
            document.addEventListener("keydown", changeDirection);
        }

function updateGame() {
            clearCanvas();
            moveSnake();
            drawSnake();
            drawFood();

// Verifica se a cobrinha comeu a comida
            if (snakeX === foodX && snakeY === foodY) {
                snakeBody.push({ x: snakeX, y: snakeY });
                createFood();
            }

// Verifica colisões
            if (snakeX < 0 || snakeX + snakeSize > canvas.width ||
                snakeY < 0 || snakeY + snakeSize > canvas.height ||
                checkCollision()) {
                clearInterval(gameLoop);
                document.removeEventListener("keydown", changeDirection);
                alert("Game over!");
            }
        }

function clearCanvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }

function drawSnake() {
            context.fillStyle = "white";
            for (let i = 0; i < snakeBody.length; i++) {
                context.fillRect(snakeBody[i].x, snakeBody[i].y, snakeSize, snakeSize);
            }
            context.fillRect(snakeX, snakeY, snakeSize, snakeSize);
        }

function moveSnake() {
            let newHead = { x: snakeX, y: snakeY };
            snakeBody.push(newHead);

// Limita o tamanho do corpo da cobrinha
            if (snakeBody.length > 1 + Math.floor(canvas.width / gridSize)) {
                snakeBody.shift();
            }

switch (snakeDirection) {
                case "up":
                    snakeY -= gridSize;
                    break;
                case "down":
                    snakeY += gridSize;
                    break;
                case "left":
                    snakeX -= gridSize;
                    break;
                case "right":
                    snakeX += gridSize;
                    break;
            }
        }

function createFood() {
            // Gera uma posição aleatória para a comida dentro do canvas
            foodX = Math.floor(Math.random() * (canvas.width / gridSize)) * gridSize;
            foodY = Math.floor(Math.random() * (canvas.height / gridSize)) * gridSize;
        }

function drawFood() {
            context.fillStyle = "red";
            context.fillRect(foodX, foodY, snakeSize, snakeSize);
        }

// Inicia o jogo
        startGame();
    </script>
</body>
</html>