A BATALHA DO TEMPLO

by ThunderGlider58
201 lines5.8 KB
data:text/html,
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A BATALHA DO TEMPLO</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body { margin: 0; background: #000; overflow: hidden; }
        canvas { display: block; background: linear-gradient(to bottom, #1a1a2e, #16213e); }
    </style>
</head>
<body class="bg-black">

<div id="gameContainer" class="w-full h-screen flex flex-col items-center justify-center bg-gray-900">
    <h1 class="text-6xl font-bold text-yellow-500 mb-4 drop-shadow-[0_0_15px_rgba(234,179,8,0.8)]">A BATALHA DO TEMPLO</h1>
    <p class="text-white mb-8">Use as SETAS para se mover e ESPAÇO para atirar!</p>
    <button onclick="startGame()" class="px-8 py-4 bg-red-600 text-white text-2xl rounded-lg hover:bg-red-800 transition duration-300 shadow-lg shadow-red-500/50">INICIAR JOGO</button>
</div>

<canvas id="gameCanvas" style="display:none;"></canvas>

<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const container = document.getElementById('gameContainer');

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Jogador
    const player = {
        x: canvas.width / 2 - 25,
        y: canvas.height - 80,
        width: 50,
        height: 50,
        speed: 7,
        color: '#00ffff'
    };

    let bullets = [];
    let rocks = [];
    let score = 0;
    let gameOver = false;
    let gameLoop;

    // Teclas
    const keys = {
        ArrowUp: false,
        ArrowDown: false,
        ArrowLeft: false,
        ArrowRight: false,
        Space: false
    };

    document.addEventListener('keydown', (e) => {
        if(e.key in keys) keys[e.key] = true;
        if(e.key === ' ' && gameLoop) shoot();
    });
    document.addEventListener('keyup', (e) => {
        if(e.key in keys) keys[e.key] = false;
    });

    function shoot() {
        bullets.push({
            x: player.x + player.width / 2 - 2,
            y: player.y,
            width: 4,
            height: 15,
            speed: 10,
            color: '#ffff00'
        });
    }

    function createRock() {
        const size = Math.random() * 50 + 30;
        rocks.push({
            x: Math.random() * (canvas.width - size),
            y: -size,
            width: size,
            height: size,
            speed: Math.random() * 3 + 2,
            color: '#8B4513'
        });
    }

    function update() {
        // Movimento
        if(keys.ArrowLeft && player.x > 0) player.x -= player.speed;
        if(keys.ArrowRight && player.x < canvas.width - player.width) player.x += player.speed;

        // Tiros
        bullets.forEach((bullet, index) => {
            bullet.y -= bullet.speed;
            if(bullet.y < 0) bullets.splice(index, 1);
        });

        // Pedras
        rocks.forEach((rock, index) => {
            rock.y += rock.speed;
            if(rock.y > canvas.height) {
                rocks.splice(index, 1);
            }

            // Colisão
            if(
                player.x < rock.x + rock.width &&
                player.x + player.width > rock.x &&
                player.y < rock.y + rock.height &&
                player.y + player.height > rock.y
            ) {
                endGame();
            }
        });

        // Colisão tiro x pedra
        bullets.forEach((bullet, bIndex) => {
            rocks.forEach((rock, rIndex) => {
                if(
                    bullet.x < rock.x + rock.width &&
                    bullet.x + bullet.width > rock.x &&
                    bullet.y < rock.y + rock.height &&
                    bullet.y + bullet.height > rock.y
                ) {
                    bullets.splice(bIndex, 1);
                    rocks.splice(rIndex, 1);
                    score += 10;
                }
            });
        });
    }

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

        // Desenhar Jogador (Triângulo)
        ctx.fillStyle = player.color;
        ctx.beginPath();
        ctx.moveTo(player.x + player.width/2, player.y);
        ctx.lineTo(player.x, player.y + player.height);
        ctx.lineTo(player.x + player.width, player.y + player.height);
        ctx.fill();
        ctx.strokeStyle = '#fff';
        ctx.stroke();

        // Desenhar Tiros
        bullets.forEach(bullet => {
            ctx.fillStyle = bullet.color;
            ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
        });

        // Desenhar Pedras
        rocks.forEach(rock => {
            ctx.fillStyle = rock.color;
            ctx.beginPath();
            ctx.arc(rock.x + rock.width/2, rock.y + rock.height/2, rock.width/2, 0, Math.PI * 2);
            ctx.fill();
            ctx.strokeStyle = '#5a2e0a';
            ctx.lineWidth = 3;
            ctx.stroke();
        });

        // Placar
        ctx.fillStyle = 'white';
        ctx.font = '30px Arial';
        ctx.fillText(`PONTOS: ${score}`, 20, 50);
    }

    function loop() {
        update();
        draw();
        if(!gameOver) requestAnimationFrame(loop);
    }

    function startGame() {
        container.style.display = 'none';
        canvas.style.display = 'block';
        score = 0;
        rocks = [];
        bullets = [];
        gameOver = false;
        player.x = canvas.width / 2 - 25;
        
        setInterval(createRock, 1000);
        loop();
    }

    function endGame() {
        gameOver = true;
        alert(`FIM DE JOGO! \nVocê sobreviveu e marcou ${score} pontos na Batalha do Templo!`);
        document.location.reload();
    }

    window.addEventListener('resize', () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    });
</script>
</body>
</html>
Game Source: A BATALHA DO TEMPLO

Creator: ThunderGlider58
Libraries: none
Complexity: complex (201 lines, 5.8 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: a-batalha-do-templo-thunderglider58" to link back to the original. Then publish at arcadelab.ai/publish.