Hugging Face's logo

Spaces:
Xacodavt
/
s
Running

App Files Community
s / index.html
Xacodavt's picture
Xacodavt
Add 1 files
a2fa0f8 verified
raw
history blame contribute delete
70 kB
<!DOCTYPE html>
<html lang="pt-BR">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Galactic Defender PRO - Loja</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
 <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Press+Start+2P&display=swap" rel="stylesheet">
 <style>
 :root {
 --primary-color: #00f0ff;
 --secondary-color: #ff00f0;
 --accent-color: #ffcc00;
 --dark-bg: #0a0a20;
 --darker-bg: #050510;
 }
body {
 font-family: 'Orbitron', sans-serif;
 background: var(--darker-bg);
 color: #fff;
 padding-bottom: 80px;
 }
.retro-font {
 font-family: 'Press Start 2P', cursive;
 }
.shop-item {
 transition: all 0.3s ease;
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
.shop-item:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(0, 240, 255, 0.3);
 }
.shop-item-owned {
 border: 2px solid #00ff00 !important;
 position: relative;
 overflow: hidden;
 }
.shop-item-owned::after {
 content: "COMPRADO";
 position: absolute;
 top: 10px;
 right: -30px;
 background: #00ff00;
 color: #000;
 font-weight: bold;
 padding: 2px 30px;
 transform: rotate(45deg);
 font-size: 12px;
 }
.category-btn {
 transition: all 0.3s ease;
 }
.category-btn.active {
 background: linear-gradient(135deg, var(--primary-color), #0066ff);
 color: #000;
 font-weight: bold;
 }
.rarity-common {
 border-left: 4px solid #a0a0a0;
 }
.rarity-uncommon {
 border-left: 4px solid #00ff00;
 }
.rarity-rare {
 border-left: 4px solid #0066ff;
 }
.rarity-epic {
 border-left: 4px solid #9900ff;
 }
.rarity-legendary {
 border-left: 4px solid #ff9900;
 }
.glow-effect {
 animation: glow 2s infinite alternate;
 }
@keyframes glow {
 from {
 box-shadow: 0 0 5px rgba(0, 240, 255, 0.5);
 }
 to {
 box-shadow: 0 0 20px rgba(0, 240, 255, 0.8);
 }
 }
.discount-badge {
 position: absolute;
 top: -10px;
 right: -10px;
 background: #ff0000;
 color: white;
 border-radius: 50%;
 width: 40px;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: bold;
 font-size: 14px;
 transform: rotate(15deg);
 z-index: 10;
 }
.play-btn-fixed {
 position: fixed;
 bottom: 20px;
 left: 50%;
 transform: translateX(-50%);
 z-index: 100;
 animation: pulse 1.5s infinite;
 }
@keyframes pulse {
 0% {
 box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.7);
 }
 70% {
 box-shadow: 0 0 0 10px rgba(0, 240, 255, 0);
 }
 100% {
 box-shadow: 0 0 0 0 rgba(0, 240, 255, 0);
 }
 }
/* Estilos do jogo */
 #game-container {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #000;
 z-index: 1000;
 overflow: hidden;
 }
#game-canvas {
 display: block;
 margin: 0 auto;
 background-color: #111;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 800 800"><g fill="rgba(255,255,255,0.05)"><circle cx="400" cy="400" r="1"/><circle cx="200" cy="200" r="1"/><circle cx="600" cy="600" r="1"/><circle cx="100" cy="500" r="1"/><circle cx="700" cy="300" r="1"/><circle cx="300" cy="100" r="1"/><circle cx="500" cy="700" r="1"/></g></svg>');
 background-size: 200px 200px;
 }
#game-hud {
 position: absolute;
 top: 10px;
 left: 10px;
 color: white;
 font-family: 'Press Start 2P', cursive;
 font-size: 12px;
 text-shadow: 0 0 5px #00f, 0 0 10px #00f;
 }
#game-items {
 position: absolute;
 top: 10px;
 right: 10px;
 color: white;
 font-family: 'Press Start 2P', cursive;
 font-size: 12px;
 text-align: right;
 text-shadow: 0 0 5px #00f, 0 0 10px #00f;
 }
#back-to-shop {
 position: absolute;
 bottom: 20px;
 left: 20px;
 background: rgba(255, 255, 255, 0.2);
 color: white;
 border: none;
 padding: 10px 20px;
 border-radius: 5px;
 cursor: pointer;
 font-family: 'Press Start 2P', cursive;
 font-size: 12px;
 transition: all 0.3s;
 }
#back-to-shop:hover {
 background: rgba(255, 255, 255, 0.3);
 }
/* Estilos da nave do jogador */
 .player-ship {
 position: absolute;
 width: 50px;
 height: 50px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><polygon points="25,5 10,45 25,35 40,45" fill="%2300f" stroke="%2300f0ff" stroke-width="2"/><circle cx="25" cy="25" r="10" fill="%2300f0ff"/></svg>');
 background-size: contain;
 background-repeat: no-repeat;
 transition: transform 0.1s;
 }
.player-ship-boost {
 transform: scale(1.1);
 }
.player-shield {
 position: absolute;
 border-radius: 50%;
 border: 2px dashed rgba(0, 255, 0, 0.7);
 pointer-events: none;
 }
/* Estilos dos inimigos */
 .enemy {
 position: absolute;
 width: 40px;
 height: 40px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="15" fill="%23f00"/><circle cx="20" cy="20" r="10" fill="%23900"/><circle cx="20" cy="20" r="5" fill="%23f00"/><rect x="15" y="5" width="10" height="5" fill="%23f00"/><rect x="15" y="30" width="10" height="5" fill="%23f00"/><rect x="5" y="15" width="5" height="10" fill="%23f00"/><rect x="30" y="15" width="5" height="10" fill="%23f00"/></svg>');
 background-size: contain;
 animation: enemyPulse 2s infinite;
 }
@keyframes enemyPulse {
 0% { transform: scale(1); }
 50% { transform: scale(1.1); }
 100% { transform: scale(1); }
 }
/* Estilos dos projéteis */
 .bullet {
 position: absolute;
 width: 5px;
 height: 15px;
 background: linear-gradient(to top, #ff0, #f90);
 border-radius: 2px;
 box-shadow: 0 0 5px #ff0, 0 0 10px #ff0;
 }
.plasma-bullet {
 width: 20px;
 height: 30px;
 background: radial-gradient(circle, #f0f, #90f);
 border-radius: 50%;
 box-shadow: 0 0 10px #f0f, 0 0 20px #f0f;
 }
/* Efeitos de explosão */
 .explosion {
 position: absolute;
 width: 50px;
 height: 50px;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="25" cy="25" r="25" fill="%23f90"/><circle cx="25" cy="25" r="20" fill="%23f60"/><circle cx="25" cy="25" r="15" fill="%23f30"/><circle cx="25" cy="25" r="10" fill="%23f00"/></svg>');
 background-size: contain;
 animation: explode 0.5s forwards;
 }
@keyframes explode {
 0% { transform: scale(0.5); opacity: 1; }
 100% { transform: scale(2); opacity: 0; }
 }
/* Efeitos de estrelas */
 .star {
 position: absolute;
 width: 2px;
 height: 2px;
 background: white;
 border-radius: 50%;
 animation: twinkle 2s infinite alternate;
 }
@keyframes twinkle {
 0% { opacity: 0.2; }
 100% { opacity: 1; }
 }
 </style>
</head>
<body class="min-h-screen bg-gray-900">
 <!-- Loja Principal -->
 <div class="container mx-auto px-4 py-8">
 <!-- Cabeçalho da Loja -->
 <div class="text-center mb-12">
 <h1 class="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 mb-4 retro-font tracking-wider">
 ESTAÇÃO ESPACIAL
 </h1>
 <p class="text-gray-400">Melhore sua nave com os melhores equipamentos da galáxia</p>
 </div>
<!-- Saldo do Jogador -->
 <div class="bg-gray-800 rounded-xl p-6 mb-8 border border-gray-700 glow-effect">
 <div class="flex flex-col md:flex-row justify-between items-center">
 <div>
 <h2 class="text-xl text-blue-400 font-bold mb-2">SEUS CRÉDITOS</h2>
 <p class="text-gray-400 text-sm">Saldo disponível para compras</p>
 </div>
 <div class="flex items-center mt-4 md:mt-0">
 <i class="fas fa-coins text-yellow-400 text-3xl mr-4"></i>
 <span id="shop-coins" class="text-4xl font-bold">2,750</span>
 </div>
 </div>
 </div>
<!-- Categorias -->
 <div class="flex overflow-x-auto pb-4 mb-8 scrollbar-hide">
 <div class="flex space-x-3">
 <button class="category-btn active bg-gray-800 hover:bg-gray-700 px-6 py-2 rounded-full border border-gray-700" data-category="all">
 <i class="fas fa-star mr-2"></i> Todos
 </button>
 <button class="category-btn bg-gray-800 hover:bg-gray-700 px-6 py-2 rounded-full border border-gray-700" data-category="weapons">
 <i class="fas fa-gun mr-2"></i> Armas
 </button>
 <button class="category-btn bg-gray-800 hover:bg-gray-700 px-6 py-2 rounded-full border border-gray-700" data-category="defense">
 <i class="fas fa-shield-alt mr-2"></i> Defesa
 </button>
 <button class="category-btn bg-gray-800 hover:bg-gray-700 px-6 py-2 rounded-full border border-gray-700" data-category="engines">
 <i class="fas fa-rocket mr-2"></i> Motores
 </button>
 <button class="category-btn bg-gray-800 hover:bg-gray-700 px-6 py-2 rounded-full border border-gray-700" data-category="specials">
 <i class="fas fa-bolt mr-2"></i> Especiais
 </button>
 </div>
 </div>
<!-- Ofertas Especiais -->
 <div class="mb-8">
 <h2 class="text-2xl text-yellow-400 font-bold mb-6 flex items-center">
 <i class="fas fa-fire mr-3"></i> OFERTAS ESPECIAIS
 <span class="ml-auto text-sm bg-red-500 px-3 py-1 rounded-full">LIMITADO</span>
 </h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 <!-- Item em destaque -->
 <div class="shop-item bg-gray-800 rounded-lg border border-purple-500 overflow-hidden relative">
 <div class="discount-badge">-30%</div>
 <div class="p-5">
 <div class="flex items-center mb-4">
 <div class="bg-purple-900 rounded-full p-3 mr-4">
 <i class="fas fa-bomb text-purple-300 text-xl"></i>
 </div>
 <div>
 <span class="text-xs text-purple-300 font-bold uppercase">Pacote</span>
 <h3 class="text-xl text-white font-bold">Destruição Máxima</h3>
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">Pacote completo com armas and defesas para dominar qualquer batalha espacial.</p>
<div class="flex flex-wrap gap-2 mb-4">
 <span class="bg-gray-700 text-blue-400 text-xs px-2 py-1 rounded">Canhão Duplo</span>
 <span class="bg-gray-700 text-green-400 text-xs px-2 py-1 rounded">Escudo Reforçado</span>
 <span class="bg-gray-700 text-yellow-400 text-xs px-2 py-1 rounded">+3 Vidas</span>
 </div>
<div class="flex items-center justify-between">
 <div>
 <span class="text-gray-500 line-through text-sm">1,500</span>
 <p class="text-xl text-yellow-400 font-bold flex items-center">
 <i class="fas fa-coins mr-2"></i> 1,050
 </p>
 </div>
 <button class="bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 px-4 py-2 rounded-full font-bold text-sm" data-item="destruction-pack" data-price="1050">
 COMPRAR
 </button>
 </div>
 </div>
 </div>
<!-- Item em destaque 2 -->
 <div class="shop-item bg-gray-800 rounded-lg border border-yellow-500 overflow-hidden">
 <div class="p-5">
 <div class="flex items-center mb-4">
 <div class="bg-yellow-900 rounded-full p-3 mr-4">
 <i class="fas fa-crown text-yellow-300 text-xl"></i>
 </div>
 <div>
 <span class="text-xs text-yellow-300 font-bold uppercase">Lendário</span>
 <h3 class="text-xl text-white font-bold">Nave Imperial</h3>
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">Modelo exclusivo da frota imperial com desempenho máximo em todas as áreas.</p>
<div class="mb-4">
 <div class="flex justify-between text-xs text-gray-500 mb-1">
 <span>Velocidade</span>
 <span>5/5</span>
 </div>
 <div class="w-full bg-gray-700 rounded-full h-2">
 <div class="bg-yellow-500 h-2 rounded-full" style="width: 100%"></div>
 </div>
 </div>
<div class="mb-4">
 <div class="flex justify-between text-xs text-gray-500 mb-1">
 <span>Dano</span>
 <span>5/5</span>
 </div>
 <div class="w-full bg-gray-700 rounded-full h-2">
 <div class="bg-red-500 h-2 rounded-full" style="width: 100%"></div>
 </div>
 </div>
<div class="flex items-center justify-between">
 <p class="text-xl text-yellow-400 font-bold flex items-center">
 <i class="fas fa-coins mr-2"></i> 2,500
 </p>
 <button class="bg-gradient-to-r from-yellow-500 to-yellow-700 hover:from-yellow-600 hover:to-yellow-800 px-4 py-2 rounded-full font-bold text-sm" data-item="imperial-ship" data-price="2500">
 COMPRAR
 </button>
 </div>
 </div>
 </div>
<!-- Item em destaque 3 -->
 <div class="shop-item bg-gray-800 rounded-lg border border-blue-500 overflow-hidden">
 <div class="p-5">
 <div class="flex items-center mb-4">
 <div class="bg-blue-900 rounded-full p-3 mr-4">
 <i class="fas fa-gem text-blue-300 text-xl"></i>
 </div>
 <div>
 <span class="text-xs text-blue-300 font-bold uppercase">Semanal</span>
 <h3 class="text-xl text-white font-bold">Caixa de Recursos</h3>
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">Contém recursos aleatórios que podem incluir armas, escudos ou créditos extras.</p>
<div class="flex items-center space-x-2 mb-4">
 <div class="bg-blue-900 bg-opacity-50 p-2 rounded-lg border border-blue-700 text-center">
 <i class="fas fa-gun text-blue-300 text-xl mb-1"></i>
 <p class="text-xs">Arma</p>
 </div>
 <div class="bg-blue-900 bg-opacity-50 p-2 rounded-lg border border-blue-700 text-center">
 <i class="fas fa-shield-alt text-blue-300 text-xl mb-1"></i>
 <p class="text-xs">Escudo</p>
 </div>
 <div class="bg-blue-900 bg-opacity-50 p-2 rounded-lg border border-blue-700 text-center">
 <i class="fas fa-coins text-blue-300 text-xl mb-1"></i>
 <p class="text-xs">Créditos</p>
 </div>
 </div>
<div class="flex items-center justify-between">
 <p class="text-xl text-blue-400 font-bold flex items-center">
 <i class="fas fa-coins mr-2"></i> 750
 </p>
 <button class="bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 px-4 py-2 rounded-full font-bold text-sm" data-item="resource-box" data-price="750">
 COMPRAR
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Itens da Loja -->
 <div>
 <h2 class="text-2xl text-blue-400 font-bold mb-6 flex items-center">
 <i class="fas fa-shopping-cart mr-3"></i> TODOS OS ITENS
 </h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
 <!-- Item 1 -->
 <div class="shop-item bg-gray-800 rounded-lg border border-gray-700 overflow-hidden rarity-uncommon" data-category="weapons">
 <div class="p-5">
 <div class="flex items-center mb-4">
 <div class="bg-green-900 rounded-full p-3 mr-4">
 <i class="fas fa-gun text-green-300 text-xl"></i>
 </div>
 <div>
 <span class="text-xs text-green-300 font-bold uppercase">Incomum</span>
 <h3 class="text-xl text-white font-bold">Canhão Duplo</h3>
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">Dispara dois projéteis simultaneamente, aumentando seu poder de fogo.</p>
<div class="flex items-center mb-4">
 <div class="flex-1">
 <div class="flex justify-between text-xs text-gray-500 mb-1">
 <span>Dano</span>
 <span>+50%</span>
 </div>
 <div class="w-full bg-gray-700 rounded-full h-2">
 <div class="bg-green-500 h-2 rounded-full" style="width: 50%"></div>
 </div>
 </div>
 </div>
<div class="flex items-center justify-between">
 <p class="text-xl text-green-400 font-bold flex items-center">
 <i class="fas fa-coins mr-2"></i> 500
 </p>
 <button class="buy-btn bg-gradient-to-r from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 px-4 py-2 rounded-full font-bold text-sm" data-item="dual-gun" data-price="500">
 COMPRAR
 </button>
 </div>
 </div>
 </div>
<!-- Item 2 -->
 <div class="shop-item bg-gray-800 rounded-lg border border-gray-700 overflow-hidden rarity-common shop-item-owned" data-category="defense">
 <div class="p-5">
 <div class="flex items-center mb-4">
 <div class="bg-purple-900 rounded-full p-3 mr-4">
 <i class="fas fa-shield-alt text-purple-300 text-xl"></i>
 </div>
 <div>
 <span class="text-xs text-purple-300 font-bold uppercase">Comum</span>
 <h3 class="text-xl text-white font-bold">Escudo de Energia</h3>
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">Proteção adicional para sua nave, aumentando sua vida máxima.</p>
<div class="flex items-center mb-4">
 <div class="flex-1">
 <div class="flex justify-between text-xs text-gray-500 mb-1">
 <span>Defesa</span>
 <span>+1 Vida</span>
 </div>
 <div class="w-full bg-gray-700 rounded-full h-2">
 <div class="bg-purple-500 h-2 rounded-full" style="width: 25%"></div>
 </div>
 </div>
 </div>
<div class="flex items-center justify-between">
 <p class="text-xl text-purple-400 font-bold flex items-center">
 <i class="fas fa-coins mr-2"></i> 300
 </p>
 <button class="buy-btn bg-gray-500 cursor-not-allowed px-4 py-2 rounded-full font-bold text-sm" disabled data-item="energy-shield" data-price="300">
 <i class="fas fa-check mr-1"></i> COMPRADO
 </button>
 </div>
 </div>
 </div>
<!-- Item 3 -->
 <div class="shop-item bg-gray-800 rounded-lg border border-gray-700 overflow-hidden rarity-rare" data-category="engines">
 <div class="p-5">
 <div class="flex items-center mb-4">
 <div class="bg-blue-900 rounded-full p-3 mr-4">
 <i class="fas fa-rocket text-blue-300 text-xl"></i>
 </div>
 <div>
 <span class="text-xs text-blue-300 font-bold uppercase">Raro</span>
 <h3 class="text-xl text-white font-bold">Motores Turbo</h3>
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">Aumenta a velocidade de sua nave em 30%, tornando mais fácil desviar de ataques.</p>
<div class="flex items-center mb-4">
 <div class="flex-1">
 <div class="flex justify-between text-xs text-gray-500 mb-1">
 <span>Velocidade</span>
 <span>+30%</span>
 </div>
 <div class="w-full bg-gray-700 rounded-full h-2">
 <div class="bg-blue-500 h-2 rounded-full" style="width: 70%"></div>
 </div>
 </div>
 </div>
<div class="flex items-center justify-between">
 <p class="text-xl text-blue-400 font-bold flex items-center">
 <i class="fas fa-coins mr-2"></i> 700
 </p>
 <button class="buy-btn bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 px-4 py-2 rounded-full font-bold text-sm" data-item="turbo-engine" data-price="700">
 COMPRAR
 </button>
 </div>
 </div>
 </div>
<!-- Item 4 -->
 <div class="shop-item bg-gray-800 rounded-lg border border-gray-700 overflow-hidden rarity-epic" data-category="specials">
 <div class="p-5">
 <div class="flex items-center mb-4">
 <div class="bg-purple-900 rounded-full p-3 mr-4">
 <i class="fas fa-bolt text-purple-300 text-xl"></i>
 </div>
 <div>
 <span class="text-xs text-purple-300 font-bold uppercase">Épico</span>
 <h3 class="text-xl text-white font-bold">Recarga Turbo</h3>
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">Sistema de armas otimizado que reduz o tempo de recarga em 30%.</p>
<div class="flex items-center mb-4">
 <div class="flex-1">
 <div class="flex justify-between text-xs text-gray-500 mb-1">
 <span>Recarga</span>
 <span>-30%</span>
 </div>
 <div class="w-full bg-gray-700 rounded-full h-2">
 <div class="bg-purple-500 h-2 rounded-full" style="width: 60%"></div>
 </div>
 </div>
 </div>
<div class="flex items-center justify-between">
 <p class="text-xl text-purple-400 font-bold flex items-center">
 <i class="fas fa-coins mr-2"></i> 900
 </p>
 <button class="buy-btn bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 px-4 py-2 rounded-full font-bold text-sm" data-item="fast-reload" data-price="900">
 COMPRAR
 </button>
 </div>
 </div>
 </div>
<!-- Item 5 -->
 <div class="shop-item bg-gray-800 rounded-lg border border-gray-700 overflow-hidden rarity-legendary" data-category="weapons">
 <div class="p-5">
 <div class="flex items-center mb-4">
 <div class="bg-yellow-900 rounded-full p-3 mr-4">
 <i class="fas fa-fire text-yellow-300 text-xl"></i>
 </div>
 <div>
 <span class="text-xs text-yellow-300 font-bold uppercase">Lendário</span>
 <h3 class="text-xl text-white font-bold">Canhão de Plasma</h3>
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">Arma de alta tecnologia que causa dano massivo em área.</p>
<div class="flex items-center mb-4">
 <div class="flex-1">
 <div class="flex justify-between text-xs text-gray-500 mb-1">
 <span>Dano</span>
 <span>+150%</span>
 </div>
 <div class="w-full bg-gray-700 rounded-full h-2">
 <div class="bg-yellow-500 h-2 rounded-full" style="width: 90%"></div>
 </div>
 </div>
 </div>
<div class="flex items-center justify-between">
 <p class="text-xl text-yellow-400 font-bold flex items-center">
 <i class="fas fa-coins mr-2"></i> 1,500
 </p>
 <button class="buy-btn bg-gradient-to-r from-yellow-500 to-yellow-700 hover:from-yellow-600 hover:to-yellow-800 px-4 py-2 rounded-full font-bold text-sm" data-item="plasma-gun" data-price="1500">
 COMPRAR
 </button>
 </div>
 </div>
 </div>
<!-- Item 6 -->
 <div class="shop-item bg-gray-800 rounded-lg border border-gray-700 overflow-hidden rarity-rare" data-category="defense">
 <div class="p-5">
 <div class="flex items-center mb-4">
 <div class="bg-blue-900 rounded-full p-3 mr-4">
 <i class="fas fa-shield-virus text-blue-300 text-xl"></i>
 </div>
 <div>
 <span class="text-xs text-blue-300 font-bold uppercase">Raro</span>
 <h3 class="text-xl text-white font-bold">Escudo Reforçado</h3>
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">Escudo avançado que absorve dano crítico automaticamente.</p>
<div class="flex items-center mb-4">
 <div class="flex-1">
 <div class="flex justify-between text-xs text-gray-500 mb-1">
 <span>Defesa</span>
 <span>+2 Vidas</span>
 </div>
 <div class="w-full bg-gray-700 rounded-full h-2">
 <div class="bg-blue-500 h-2 rounded-full" style="width: 50%"></div>
 </div>
 </div>
 </div>
<div class="flex items-center justify-between">
 <p class="text-xl text-blue-400 font-bold flex items-center">
 <i class="fas fa-coins mr-2"></i> 800
 </p>
 <button class="buy-btn bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 px-4 py-2 rounded-full font-bold text-sm" data-item="reinforced-shield" data-price="800">
 COMPRAR
 </button>
 </div>
 </div>
 </div>
<!-- Item 7 -->
 <div class="shop-item bg-gray-800 rounded-lg border border-gray-700 overflow-hidden rarity-uncommon" data-category="specials">
 <div class="p-5">
 <div class="flex items-center mb-4">
 <div class="bg-green-900 rounded-full p-3 mr-4">
 <i class="fas fa-battery-full text-green-300 text-xl"></i>
 </div>
 <div>
 <span class="text-xs text-green-300 font-bold uppercase">Incomum</span>
 <h3 class="text-xl text-white font-bold">Bateria Extra</h3>
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">Aumenta a capacidade de munição em 50%.</p>
<div class="flex items-center mb-4">
 <div class="flex-1">
 <div class="flex justify-between text-xs text-gray-500 mb-1">
 <span>Munição</span>
 <span>+50%</span>
 </div>
 <div class="w-full bg-gray-700 rounded-full h-2">
 <div class="bg-green-500 h-2 rounded-full" style="width: 50%"></div>
 </div>
 </div>
 </div>
<div class="flex items-center justify-between">
 <p class="text-xl text-green-400 font-bold flex items-center">
 <i class="fas fa-coins mr-2"></i> 450
 </p>
 <button class="buy-btn bg-gradient-to-r from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 px-4 py-2 rounded-full font-bold text-sm" data-item="extra-battery" data-price="450">
 COMPRAR
 </button>
 </div>
 </div>
 </div>
<!-- Item 8 -->
 <div class="shop-item bg-gray-800 rounded-lg border border-gray-700 overflow-hidden rarity-epic" data-category="specials">
 <div class="p-5">
 <div class="flex items-center mb-4">
 <div class="bg-purple-900 rounded-full p-3 mr-4">
 <i class="fas fa-atom text-purple-300 text-xl"></i>
 </div>
 <div>
 <span class="text-xs text-purple-300 font-bold uppercase">Épico</span>
 <h3 class="text-xl text-white font-bold">Arma de Feixe</h3>
 </div>
 </div>
 <p class="text-gray-400 text-sm mb-4">Dispara um feixe contínuo que causa dano a todos os inimigos em sua linha.</p>
<div class="flex items-center mb-4">
 <div class="flex-1">
 <div class="flex justify-between text-xs text-gray-500 mb-1">
 <span>Dano</span>
 <span>+100%</span>
 </div>
 <div class="w-full bg-gray-700 rounded-full h-2">
 <div class="bg-purple-500 h-2 rounded-full" style="width: 80%"></div>
 </div>
 </div>
 </div>
<div class="flex items-center justify-between">
 <p class="text-xl text-purple-400 font-bold flex items-center">
 <i class="fas fa-coins mr-2"></i> 1,200
 </p>
 <button class="buy-btn bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 px-4 py-2 rounded-full font-bold text-sm" data-item="beam-weapon" data-price="1200">
 COMPRAR
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Seção de Créditos -->
 <div class="mt-12 bg-gray-800 rounded-xl p-6 border border-gray-700">
 <h2 class="text-2xl text-yellow-400 font-bold mb-4">GANHE CRÉDITOS EXTRAS</h2>
 <p class="text-gray-400 mb-6">Assista a um breve anúncio e ganhe créditos para comprar mais melhorias!</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
 <div class="bg-gray-700 p-4 rounded-lg border border-gray-600 text-center">
 <div class="bg-blue-900 rounded-full p-3 inline-block mb-3">
 <i class="fas fa-ad text-blue-300 text-xl"></i>
 </div>
 <h3 class="text-lg font-bold mb-2">Anúncio Curto</h3>
 <p class="text-gray-400 text-sm mb-3">Assista um anúncio de 15 segundos</p>
 <button class="bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 px-4 py-2 rounded-full font-bold text-sm w-full" onclick="earnCoins(50)">
 GANHAR +50
 </button>
 </div>
<div class="bg-gray-700 p-4 rounded-lg border border-gray-600 text-center">
 <div class="bg-green-900 rounded-full p-3 inline-block mb-3">
 <i class="fas fa-video text-green-300 text-xl"></i>
 </div>
 <h3 class="text-lg font-bold mb-2">Anúncio Longo</h3>
 <p class="text-gray-400 text-sm mb-3">Assista um anúncio de 30 segundos</p>
 <button class="bg-gradient-to-r from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 px-4 py-2 rounded-full font-bold text-sm w-full" onclick="earnCoins(100)">
 GANHAR +100
 </button>
 </div>
<div class="bg-gray-700 p-4 rounded-lg border border-gray-600 text-center">
 <div class="bg-purple-900 rounded-full p-3 inline-block mb-3">
 <i class="fas fa-gem text-purple-300 text-xl"></i>
 </div>
 <h3 class="text-lg font-bold mb-2">Bônus Diário</h3>
 <p class="text-gray-400 text-sm mb-3">Volte amanhã para mais créditos</p>
 <button class="bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 px-4 py-2 rounded-full font-bold text-sm w-full" onclick="earnCoins(200)">
 GANHAR +200
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Botão fixo de Jogar -->
 <div class="play-btn-fixed">
 <button id="play-btn" class="bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 px-8 py-4 rounded-full font-bold text-lg shadow-lg flex items-center">
 <i class="fas fa-play mr-2"></i> JOGAR AGORA
 </button>
 </div>
<!-- Container do Jogo -->
 <div id="game-container">
 <canvas id="game-canvas" width="800" height="600"></canvas>
 <div id="game-hud">
 <div>VIDAS: <span id="lives">3</span></div>
 <div>PONTOS: <span id="score">0</span></div>
 </div>
 <div id="game-items">
 <div id="active-items"></div>
 </div>
 <button id="back-to-shop">VOLTAR À LOJA</button>
 </div>
<script>
 // Armazenamento dos itens comprados
 const playerInventory = {
 items: [],
 coins: 2750,
 lives: 3,
 damageMultiplier: 1,
 speedMultiplier: 1,
 reloadMultiplier: 1,
 ammoMultiplier: 1
 };
// Estado do jogo
 const gameState = {
 player: null,
 enemies: [],
 bullets: [],
 lastShot: 0,
 score: 0,
 gameOver: false,
 items: [],
 explosions: [],
 stars: []
 };
// Efeitos dos itens
 const itemEffects = {
 'dual-gun': { damageMultiplier: 1.5 },
 'energy-shield': { lives: 1 },
 'turbo-engine': { speedMultiplier: 1.3 },
 'fast-reload': { reloadMultiplier: 0.7 },
 'plasma-gun': { damageMultiplier: 2.5 },
 'reinforced-shield': { lives: 2 },
 'extra-battery': { ammoMultiplier: 1.5 },
 'beam-weapon': { damageMultiplier: 2 },
 'destruction-pack': { damageMultiplier: 1.8, lives: 2 },
 'imperial-ship': { damageMultiplier: 3, speedMultiplier: 1.5, lives: 3 },
 'resource-box': { random: true }
 };
// Inicialização
 document.addEventListener('DOMContentLoaded', function() {
 // Verifica se há itens no localStorage
 const savedInventory = localStorage.getItem('galacticDefenderInventory');
 if (savedInventory) {
 Object.assign(playerInventory, JSON.parse(savedInventory));
 updateCoinsDisplay();
// Marca os itens comprados na loja
 playerInventory.items.forEach(itemId => {
 const buyBtn = document.querySelector(`.buy-btn[data-item="${itemId}"]`);
 if (buyBtn) {
 buyBtn.innerHTML = '<i class="fas fa-check mr-1"></i> COMPRADO';
 buyBtn.classList.remove('hover:from-blue-600', 'hover:to-blue-800');
 buyBtn.classList.add('bg-gray-500', 'cursor-not-allowed');
 buyBtn.disabled = true;
 buyBtn.closest('.shop-item').classList.add('shop-item-owned');
 }
 });
 }
// Configura o botão de jogar
 document.getElementById('play-btn').addEventListener('click', startGame);
// Configura o botão de voltar à loja
 document.getElementById('back-to-shop').addEventListener('click', backToShop);
 });
// Filtro de categorias
 document.querySelectorAll('.category-btn').forEach(btn => {
 btn.addEventListener('click', function() {
 document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
 this.classList.add('active');
const category = this.dataset.category;
document.querySelectorAll('.shop-item').forEach(item => {
 if (category === 'all' || item.dataset.category === category) {
 item.style.display = 'block';
 } else {
 item.style.display = 'none';
 }
 });
 });
 });
// Simulação de compra
 document.querySelectorAll('.buy-btn').forEach(btn => {
 btn.addEventListener('click', function() {
 if (this.disabled) return;
const itemId = this.dataset.item;
 const price = parseInt(this.dataset.price.replace(',', ''));
if (playerInventory.coins >= price) {
 // Adiciona o item ao inventário
 playerInventory.items.push(itemId);
// Aplica os efeitos do item
 applyItemEffects(itemId);
// Atualiza os créditos
 playerInventory.coins -= price;
 updateCoinsDisplay();
// Marca como comprado
 this.innerHTML = '<i class="fas fa-check mr-1"></i> COMPRADO';
 this.classList.remove('hover:from-blue-600', 'hover:to-blue-800');
 this.classList.add('bg-gray-500', 'cursor-not-allowed');
 this.disabled = true;
// Adiciona efeito visual
 this.closest('.shop-item').classList.add('shop-item-owned');
// Salva no localStorage
 localStorage.setItem('galacticDefenderInventory', JSON.stringify(playerInventory));
// Mostra mensagem de sucesso
 alert(`Item ${itemId} comprado com sucesso!`);
 } else {
 alert('Créditos insuficientes! Ganhe mais créditos assistindo anúncios.');
 }
 });
 });
// Ganhar créditos
 function earnCoins(amount) {
 playerInventory.coins += amount;
 updateCoinsDisplay();
 localStorage.setItem('galacticDefenderInventory', JSON.stringify(playerInventory));
 alert(`Você ganhou ${amount} créditos!`);
 }
// Atualiza o display de créditos
 function updateCoinsDisplay() {
 document.getElementById('shop-coins').textContent = playerInventory.coins.toLocaleString();
 }
// Aplica os efeitos do item
 function applyItemEffects(itemId) {
 const effects = itemEffects[itemId];
if (effects.random) {
 // Item aleatório (caixa de recursos)
 const randomItems = ['dual-gun', 'energy-shield', 'turbo-engine', 'extra-battery'];
 const randomItem = randomItems[Math.floor(Math.random() * randomItems.length)];
 applyItemEffects(randomItem);
 return;
 }
if (effects.damageMultiplier) {
 playerInventory.damageMultiplier *= effects.damageMultiplier;
 }
if (effects.lives) {
 playerInventory.lives += effects.lives;
 }
if (effects.speedMultiplier) {
 playerInventory.speedMultiplier *= effects.speedMultiplier;
 }
if (effects.reloadMultiplier) {
 playerInventory.reloadMultiplier *= effects.reloadMultiplier;
 }
if (effects.ammoMultiplier) {
 playerInventory.ammoMultiplier *= effects.ammoMultiplier;
 }
 }
// Inicia o jogo
 function startGame() {
 // Esconde a loja
 document.querySelector('.container').style.display = 'none';
 document.querySelector('.play-btn-fixed').style.display = 'none';
// Mostra o jogo
 const gameContainer = document.getElementById('game-container');
 gameContainer.style.display = 'block';
// Atualiza o HUD
 document.getElementById('lives').textContent = playerInventory.lives;
 document.getElementById('score').textContent = gameState.score;
// Mostra os itens ativos
 const activeItemsDiv = document.getElementById('active-items');
 activeItemsDiv.innerHTML = '';
playerInventory.items.forEach(itemId => {
 const itemDiv = document.createElement('div');
 itemDiv.textContent = getItemName(itemId);
 itemDiv.style.marginBottom = '5px';
 activeItemsDiv.appendChild(itemDiv);
 });
// Inicializa o canvas do jogo
 const canvas = document.getElementById('game-canvas');
 const ctx = canvas.getContext('2d');
// Cria estrelas de fundo
 createStars(canvas);
// Configura o jogador
 const playerShip = document.createElement('div');
 playerShip.className = 'player-ship';
 playerShip.style.left = (canvas.width / 2 - 25) + 'px';
 playerShip.style.top = (canvas.height - 70) + 'px';
 gameContainer.appendChild(playerShip);
// Se tiver escudo, adiciona efeito visual
 if (playerInventory.lives > 3) {
 const shield = document.createElement('div');
 shield.className = 'player-shield';
 shield.style.width = '70px';
 shield.style.height = '70px';
 shield.style.left = (canvas.width / 2 - 35) + 'px';
 shield.style.top = (canvas.height - 85) + 'px';
 gameContainer.appendChild(shield);
 }
// Configura os controles
 const keys = {};
 document.addEventListener('keydown', (e) => {
 keys[e.key] = true;
 if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
 playerShip.classList.add('player-ship-boost');
 }
 });
 document.addEventListener('keyup', (e) => {
 keys[e.key] = false;
 if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
 playerShip.classList.remove('player-ship-boost');
 }
 });
// Loop do jogo
 function gameLoop() {
 if (gameState.gameOver) return;
// Limpa o canvas
 ctx.fillStyle = 'rgba(17, 17, 17, 0.2)';
 ctx.fillRect(0, 0, canvas.width, canvas.height);
// Atualiza o jogador
 updatePlayer(playerShip);
// Atualiza os inimigos
 updateEnemies();
// Atualiza os projéteis
 updateBullets();
// Atualiza explosões
 updateExplosions();
// Desenha tudo
 drawPlayer(playerShip);
 drawEnemies();
 drawBullets();
 drawExplosions();
// Verifica colisões
 checkCollisions();
// Continua o loop
 requestAnimationFrame(gameLoop);
 }
// Cria estrelas de fundo
 function createStars() {
 for (let i = 0; i < 100; i++) {
 const star = document.createElement('div');
 star.className = 'star';
 star.style.left = Math.random() * canvas.width + 'px';
 star.style.top = Math.random() * canvas.height + 'px';
 star.style.animationDelay = (Math.random() * 2) + 's';
 gameContainer.appendChild(star);
 gameState.stars.push({
 element: star,
 x: parseInt(star.style.left),
 y: parseInt(star.style.top)
 });
 }
 }
// Funções do jogo
 function updatePlayer(ship) {
 let moved = false;
if (keys['ArrowLeft'] && parseInt(ship.style.left) > 0) {
 ship.style.left = (parseInt(ship.style.left) - 5 * playerInventory.speedMultiplier) + 'px';
 moved = true;
 }
 if (keys['ArrowRight'] && parseInt(ship.style.left) < canvas.width - 50) {
 ship.style.left = (parseInt(ship.style.left) + 5 * playerInventory.speedMultiplier) + 'px';
 moved = true;
 }
 if (keys['ArrowUp'] && parseInt(ship.style.top) > 0) {
 ship.style.top = (parseInt(ship.style.top) - 5 * playerInventory.speedMultiplier) + 'px';
 moved = true;
 }
 if (keys['ArrowDown'] && parseInt(ship.style.top) < canvas.height - 50) {
 ship.style.top = (parseInt(ship.style.top) + 5 * playerInventory.speedMultiplier) + 'px';
 moved = true;
 }
// Atualiza posição do escudo se existir
 const shield = document.querySelector('.player-shield');
 if (shield) {
 shield.style.left = (parseInt(ship.style.left) - 10) + 'px';
 shield.style.top = (parseInt(ship.style.top) - 10) + 'px';
 }
// Disparo
 const now = Date.now();
 if (keys[' '] && now - gameState.lastShot > 500 * playerInventory.reloadMultiplier) {
 shoot(ship);
 gameState.lastShot = now;
 }
// Atualiza estrelas de fundo (efeito parallax)
 gameState.stars.forEach(star => {
 star.y += 0.5;
 if (star.y > canvas.height) {
 star.y = 0;
 star.x = Math.random() * canvas.width;
 }
 star.element.style.top = star.y + 'px';
 star.element.style.left = star.x + 'px';
 });
 }
function drawPlayer(ship) {
 // A nave é desenhada como elemento HTML, não no canvas
 }
function shoot(ship) {
 const shipX = parseInt(ship.style.left);
 const shipY = parseInt(ship.style.top);
// Disparo normal
 const bullet = document.createElement('div');
 bullet.className = 'bullet';
 bullet.style.left = (shipX + 22.5) + 'px';
 bullet.style.top = (shipY - 15) + 'px';
 gameContainer.appendChild(bullet);
gameState.bullets.push({
 element: bullet,
 x: shipX + 22.5,
 y: shipY - 15,
 width: 5,
 height: 15,
 speed: 10,
 type: 'normal'
 });
// Disparo duplo se tiver o canhão duplo
 if (playerInventory.items.includes('dual-gun') || playerInventory.items.includes('destruction-pack')) {
 const bulletLeft = document.createElement('div');
 bulletLeft.className = 'bullet';
 bulletLeft.style.left = (shipX + 5) + 'px';
 bulletLeft.style.top = (shipY - 15) + 'px';
 gameContainer.appendChild(bulletLeft);
gameState.bullets.push({
 element: bulletLeft,
 x: shipX + 5,
 y: shipY - 15,
 width: 5,
 height: 15,
 speed: 10,
 type: 'normal'
 });
const bulletRight = document.createElement('div');
 bulletRight.className = 'bullet';
 bulletRight.style.left = (shipX + 40) + 'px';
 bulletRight.style.top = (shipY - 15) + 'px';
 gameContainer.appendChild(bulletRight);
gameState.bullets.push({
 element: bulletRight,
 x: shipX + 40,
 y: shipY - 15,
 width: 5,
 height: 15,
 speed: 10,
 type: 'normal'
 });
 }
// Disparo de plasma se tiver a arma de plasma
 if (playerInventory.items.includes('plasma-gun') || playerInventory.items.includes('imperial-ship')) {
 const plasma = document.createElement('div');
 plasma.className = 'plasma-bullet';
 plasma.style.left = (shipX + 15) + 'px';
 plasma.style.top = (shipY - 30) + 'px';
 gameContainer.appendChild(plasma);
gameState.bullets.push({
 element: plasma,
 x: shipX + 15,
 y: shipY - 30,
 width: 20,
 height: 30,
 speed: 8,
 type: 'plasma'
 });
 }
 }
function updateEnemies() {
 // Adiciona novos inimigos aleatoriamente
 if (Math.random() < 0.02) {
 const enemy = document.createElement('div');
 enemy.className = 'enemy';
 enemy.style.left = (Math.random() * (canvas.width - 40)) + 'px';
 enemy.style.top = '-40px';
 gameContainer.appendChild(enemy);
gameState.enemies.push({
 element: enemy,
 x: parseInt(enemy.style.left),
 y: -40,
 width: 40,
 height: 40,
 speed: 2 + Math.random() * 2
 });
 }
// Atualiza posição dos inimigos
 gameState.enemies.forEach(enemy => {
 enemy.y += enemy.speed;
 enemy.element.style.top = enemy.y + 'px';
 });
// Remove inimigos que saíram da tela
 gameState.enemies = gameState.enemies.filter(enemy => {
 if (enemy.y > canvas.height) {
 gameContainer.removeChild(enemy.element);
 return false;
 }
 return true;
 });
 }
function drawEnemies() {
 // Os inimigos são desenhados como elementos HTML, não no canvas
 }
function updateBullets() {
 // Atualiza posição dos projéteis
 gameState.bullets.forEach(bullet => {
 bullet.y -= bullet.speed;
 bullet.element.style.top = bullet.y + 'px';
 });
// Remove projéteis que saíram da tela
 gameState.bullets = gameState.bullets.filter(bullet => {
 if (bullet.y < -bullet.height) {
 gameContainer.removeChild(bullet.element);
 return false;
 }
 return true;
 });
 }
function drawBullets() {
 // Os projéteis são desenhados como elementos HTML, não no canvas
 }
function createExplosion(x, y) {
 const explosion = document.createElement('div');
 explosion.className = 'explosion';
 explosion.style.left = (x - 25) + 'px';
 explosion.style.top = (y - 25) + 'px';
 gameContainer.appendChild(explosion);
gameState.explosions.push({
 element: explosion,
 startTime: Date.now()
 });
// Remove a explosão após a animação
 setTimeout(() => {
 if (explosion.parentNode) {
 gameContainer.removeChild(explosion);
 }
 }, 500);
 }
function updateExplosions() {
 // Remove explosões antigas
 gameState.explosions = gameState.explosions.filter(explosion => {
 return Date.now() - explosion.startTime < 500;
 });
 }
function drawExplosions() {
 // As explosões são desenhadas como elementos HTML, não no canvas
 }
function checkCollisions() {
 // Verifica colisão entre projéteis e inimigos
 for (let i = gameState.bullets.length - 1; i >= 0; i--) {
 const bullet = gameState.bullets[i];
for (let j = gameState.enemies.length - 1; j >= 0; j--) {
 const enemy = gameState.enemies[j];
if (
 bullet.x < enemy.x + enemy.width &&
 bullet.x + bullet.width > enemy.x &&
 bullet.y < enemy.y + enemy.height &&
 bullet.y + bullet.height > enemy.y
 ) {
 // Cria efeito de explosão
 createExplosion(enemy.x + enemy.width/2, enemy.y + enemy.height/2);
// Remove o inimigo e o projétil
 gameContainer.removeChild(enemy.element);
 gameState.enemies.splice(j, 1);
gameContainer.removeChild(bullet.element);
 gameState.bullets.splice(i, 1);
// Adiciona pontos
 gameState.score += bullet.type === 'plasma' ? 200 : 100;
 document.getElementById('score').textContent = gameState.score;
break;
 }
 }
 }
// Verifica colisão entre jogador e inimigos
 const ship = document.querySelector('.player-ship');
 const shipX = parseInt(ship.style.left);
 const shipY = parseInt(ship.style.top);
for (let i = 0; i < gameState.enemies.length; i++) {
 const enemy = gameState.enemies[i];
if (
 shipX < enemy.x + enemy.width &&
 shipX + 50 > enemy.x &&
 shipY < enemy.y + enemy.height &&
 shipY + 50 > enemy.y
 ) {
 // Cria efeito de explosão
 createExplosion(enemy.x + enemy.width/2, enemy.y + enemy.height/2);
// Remove o inimigo
 gameContainer.removeChild(enemy.element);
 gameState.enemies.splice(i, 1);
// Perde uma vida
 playerInventory.lives--;
 document.getElementById('lives').textContent = playerInventory.lives;
// Verifica game over
 if (playerInventory.lives <= 0) {
 gameOver();
 }
break;
 }
 }
 }
function gameOver() {
 gameState.gameOver = true;
// Mostra animação de game over
 const gameOverDiv = document.createElement('div');
 gameOverDiv.style.position = 'absolute';
 gameOverDiv.style.top = '50%';
 gameOverDiv.style.left = '50%';
 gameOverDiv.style.transform = 'translate(-50%, -50%)';
 gameOverDiv.style.color = 'white';
 gameOverDiv.style.fontFamily = '"Press Start 2P", cursive';
 gameOverDiv.style.fontSize = '36px';
 gameOverDiv.style.textAlign = 'center';
 gameOverDiv.style.textShadow = '0 0 10px red';
 gameOverDiv.innerHTML = 'GAME OVER<br><span style="font-size: 24px">Pontuação: ' + gameState.score + '</span>';
 gameContainer.appendChild(gameOverDiv);
setTimeout(() => {
 backToShop();
 gameContainer.removeChild(gameOverDiv);
 }, 3000);
 }
// Inicia o loop do jogo
 gameState.gameOver = false;
 gameState.score = 0;
 gameState.enemies = [];
 gameState.bullets = [];
 gameState.explosions = [];
 gameLoop();
 }
// Volta para a loja
 function backToShop() {
 // Mostra a loja
 document.querySelector('.container').style.display = 'block';
 document.querySelector('.play-btn-fixed').style.display = 'block';
// Esconde o jogo
 const gameContainer = document.getElementById('game-container');
 gameContainer.style.display = 'none';
// Remove todos os elementos do jogo
 const elementsToRemove = [
 ...document.querySelectorAll('.player-ship'),
 ...document.querySelectorAll('.player-shield'),
 ...document.querySelectorAll('.enemy'),
 ...document.querySelectorAll('.bullet'),
 ...document.querySelectorAll('.explosion'),
 ...document.querySelectorAll('.star')
 ];
elementsToRemove.forEach(el => {
 if (el.parentNode) {
 el.parentNode.removeChild(el);
 }
 });
// Reseta o estado do jogo
 gameState.gameOver = true;
 gameState.stars = [];
 }
// Retorna o nome amigável do item
 function getItemName(itemId) {
 const names = {
 'dual-gun': 'Canhão Duplo',
 'energy-shield': 'Escudo de Energia',
 'turbo-engine': 'Motores Turbo',
 'fast-reload': 'Recarga Turbo',
 'plasma-gun': 'Canhão de Plasma',
 'reinforced-shield': 'Escudo Reforçado',
 'extra-battery': 'Bateria Extra',
 'beam-weapon': 'Arma de Feixe',
 'destruction-pack': 'Pacote Destruição',
 'imperial-ship': 'Nave Imperial',
 'resource-box': 'Caixa de Recursos'
 };
return names[itemId] || itemId;
 }
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Xacodavt/s" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>