Luta de Espadas

by BraveFalcon18

29 lines1.7 KB

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Luta de Espadas</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body { background: #1a1a1a; overflow: hidden; }
        #cena { width: 100vw; height: 80vh; position: relative; background: linear-gradient(#2c5c97, #87ceeb); }
        .personagem { position: absolute; bottom: 40px; width: 80px; height: 120px; transition: left 0.1s; }
        .espada { position: absolute; width: 70px; height: 8px; background: #c0c0c0; border-radius: 4px; transform-origin: centro esquerdo; }
        .atacando { animation: golpe 0.3s ease; }
        @keyframes golpe { 0% { transform: rotate(0deg); } 50% { transform: rotate(90deg); } 100% { transform: rotate(0deg); } }
        .vida { position: absolute; top: 15px; width: 120px; height: 15px; background: #333; border: 2px solid white; }
        .barra { height: 100%; background: #22c55e; transition: width 0.2s; }
    </style>
</head>
<body class="flex flex-col items-center justify-center h-screen">
    <h1 class="text-white text-3xl font-bold mb-4">LUTA DE ESPADAS</h1>
    <div id="cena">
        <!-- Jogador 1 -->
        <div class="vida" style="left: 50px;"><div id="vida1" class="barra" style="width: 100%"></div></div>
        <div id="p1" class="personagem" style="left: 150px; background: #e74c3c;">
            <div class="espada" id="e1" style="top: 45px; left: 70px;"></div>
        </div>
        <!-- Jogador 2 -->
        <div class="vida" style="right: 50px;"><div id="vida2" class="barra" style="width: 100%"></div></div>
        <div id="p2" class="personagem" style="left: 700px; background: #3498db;">

Game Source: Luta de Espadas

Creator: BraveFalcon18

Libraries: none

Complexity: simple (29 lines, 1.7 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: luta-de-espadas-bravefalcon18" to link back to the original. Then publish at arcadelab.ai/publish.