Spaces:

stroumphs
/

paddlebound

Running

App Files Files Community

stroumphs commited on Mar 29, 2025

Commit

3ade157

verified ·

1 Parent(s): f577cce

Add 1 files

Browse files

Files changed (1) hide show

index.html +884 -968

index.html CHANGED Viewed

@@ -3,1101 +3,1017 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Nebula Storm - Game Design Document</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        :root {
-            --primary: #6a00f4;
-            --secondary: #ff3e7f;
-            --dark: #0f0526;
-            --darker: #080117;
-            --light: #e0d6ff;
-            --accent: #00e1ff;
-        }
-        * {
             margin: 0;
             padding: 0;
-            box-sizing: border-box;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-        body {
-            background-color: var(--dark);
-            color: var(--light);
-            line-height: 1.6;
-            overflow-x: hidden;
-        }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 20px;
         }
-        header {
-            background: linear-gradient(135deg, var(--primary), var(--darker));
-            padding: 2rem 0;
-            text-align: center;
-            border-bottom: 3px solid var(--accent);
             position: relative;
             overflow: hidden;
         }
-        header::before {
-            content: "";
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.7) 100%);
             pointer-events: none;
         }
-        .header-content {
-            position: relative;
-            z-index: 2;
-        }
-        h1 {
-            font-size: 3.5rem;
-            margin-bottom: 1rem;
-            background: linear-gradient(to right, var(--accent), var(--secondary));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            text-shadow: 0 0 15px rgba(106, 0, 244, 0.3);
-        }
-        .subtitle {
-            font-size: 1.5rem;
-            color: var(--light);
-            margin-bottom: 2rem;
-            opacity: 0.9;
-        }
-        .tag-list {
             display: flex;
-            justify-content: center;
-            gap: 1rem;
-            margin-bottom: 2rem;
-        }
-        .tag {
-            background-color: rgba(255, 255, 255, 0.1);
-            padding: 0.5rem 1rem;
-            border-radius: 50px;
-            font-size: 0.9rem;
-            border: 1px solid var(--accent);
-            backdrop-filter: blur(5px);
         }
-        .screenshot-placeholder {
-            width: 100%;
-            height: 400px;
-            background: linear-gradient(135deg, #2a0064, #4a00a0);
-            border-radius: 10px;
-            margin: 2rem 0;
             display: flex;
-            align-items: center;
-            justify-content: center;
-            position: relative;
-            overflow: hidden;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
         }
-        .screenshot-placeholder::before {
-            content: "";
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background:
-                radial-gradient(circle at 30% 70%, rgba(0, 225, 255, 0.2) 0%, transparent 50%),
-                radial-gradient(circle at 70% 30%, rgba(255, 62, 127, 0.2) 0%, transparent 50%);
-        }
-        .placeholder-content {
-            text-align: center;
-            z-index: 2;
-        }
-        .placeholder-content i {
-            font-size: 5rem;
-            color: rgba(255, 255, 255, 0.1);
-            margin-bottom: 1rem;
-        }
-        section {
-            padding: 3rem 0;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        h2 {
-            font-size: 2.5rem;
-            margin-bottom: 1.5rem;
-            color: var(--accent);
-            position: relative;
-            display: inline-block;
-        }
-        h2::after {
-            content: "";
-            position: absolute;
-            bottom: -10px;
-            left: 0;
-            width: 100px;
-            height: 3px;
-            background: var(--secondary);
-        }
-        h3 {
-            font-size: 1.8rem;
-            margin: 2rem 0 1rem;
-            color: var(--secondary);
-        }
-        p {
-            margin-bottom: 1.5rem;
-            font-size: 1.1rem;
-        }
-        ul, ol {
-            margin-bottom: 1.5rem;
-            padding-left: 2rem;
-        }
-        li {
-            margin-bottom: 0.5rem;
-        }
-        .features {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            gap: 2rem;
-            margin-top: 2rem;
-        }
-        .feature-card {
-            background: rgba(15, 5, 38, 0.7);
-            border-radius: 10px;
-            padding: 1.5rem;
-            border: 1px solid rgba(106, 0, 244, 0.3);
-            transition: transform 0.3s, box-shadow 0.3s;
-            backdrop-filter: blur(5px);
-        }
-        .feature-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 20px rgba(106, 0, 244, 0.3);
-            border-color: var(--accent);
-        }
-        .feature-icon {
-            font-size: 2rem;
-            color: var(--accent);
-            margin-bottom: 1rem;
         }
-        .feature-title {
-            font-size: 1.3rem;
-            margin-bottom: 0.5rem;
-            color: var(--light);
         }
-        .control-scheme {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-            gap: 1.5rem;
-            margin-top: 2rem;
         }
-        .control-item {
-            background: rgba(15, 5, 38, 0.7);
-            border-radius: 10px;
-            padding: 1.5rem;
-            border-left: 4px solid var(--accent);
         }
-        .control-action {
-            font-weight: bold;
-            color: var(--secondary);
-            margin-bottom: 0.5rem;
         }
-        .tabs {
             display: flex;
-            margin-bottom: 2rem;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
         }
-        .tab-button {
-            padding: 1rem 2rem;
-            background: transparent;
-            border: none;
-            color: var(--light);
-            font-size: 1.1rem;
             cursor: pointer;
-            position: relative;
-            opacity: 0.7;
-            transition: all 0.3s;
         }
-        .tab-button.active {
-            opacity: 1;
-            color: var(--accent);
         }
-        .tab-button.active::after {
-            content: "";
             position: absolute;
-            bottom: -1px;
             left: 0;
             width: 100%;
-            height: 3px;
-            background: var(--accent);
-        }
-        .tab-content {
-            display: none;
-            animation: fadeIn 0.5s ease-in-out;
-        }
-        .tab-content.active {
-            display: block;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .enemy-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-            gap: 2rem;
-            margin-top: 2rem;
-        }
-        .enemy-card {
-            background: rgba(15, 5, 38, 0.7);
-            border-radius: 10px;
-            overflow: hidden;
-            border: 1px solid rgba(106, 0, 244, 0.3);
-            transition: transform 0.3s;
-        }
-        .enemy-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 20px rgba(106, 0, 244, 0.3);
-        }
-        .enemy-header {
-            background: linear-gradient(135deg, var(--secondary), var(--primary));
-            padding: 1rem;
-            text-align: center;
-        }
-        .enemy-name {
-            font-size: 1.2rem;
-            font-weight: bold;
-            margin-bottom: 0.5rem;
-        }
-        .enemy-difficulty {
-            font-size: 0.9rem;
-            display: inline-block;
-            padding: 0.2rem 0.5rem;
-            border-radius: 50px;
-            background-color: rgba(0, 0, 0, 0.3);
-        }
-        .enemy-body {
-            padding: 1.5rem;
-        }
-        .enemy-attribute {
-            margin-bottom: 1rem;
-        }
-        .attribute-title {
-            font-weight: bold;
-            color: var(--accent);
-            margin-bottom: 0.3rem;
-        }
-        .weapons-list {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-            gap: 1.5rem;
-            margin-top: 2rem;
-        }
-        .weapon-card {
-            background: rgba(15, 5, 38, 0.7);
-            border-radius: 10px;
-            padding: 1.5rem;
-            border-left: 4px solid var(--secondary);
-        }
-        .weapon-name {
-            font-size: 1.2rem;
-            margin-bottom: 0.5rem;
-            color: var(--secondary);
-        }
-        .weapon-stats {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 0.5rem;
-            margin-top: 1rem;
-        }
-        .weapon-stat {
-            background: rgba(106, 0, 244, 0.2);
-            padding: 0.3rem 0.7rem;
-            border-radius: 50px;
-            font-size: 0.8rem;
-        }
-        .art-style-cards {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            gap: 2rem;
-            margin-top: 2rem;
-        }
-        .art-style-card {
-            background: rgba(15, 5, 38, 0.7);
-            border-radius: 10px;
-            padding: 1.5rem;
-            border: 1px solid rgba(106, 0, 244, 0.3);
-        }
-        .art-style-title {
-            font-size: 1.3rem;
-            margin-bottom: 1rem;
-            color: var(--accent);
             display: flex;
             align-items: center;
         }
-        .art-style-title i {
-            margin-right: 1rem;
-            font-size: 1.5rem;
         }
-        .art-style-pros {
-            margin-top: 1rem;
-            padding-left: 1.5rem;
-            border-left: 3px solid var(--accent);
-        }
-        .pro-item {
-            position: relative;
-            padding-left: 1.5rem;
-            margin-bottom: 0.5rem;
-        }
-        .pro-item::before {
-            content: "✓";
-            position: absolute;
-            left: 0;
-            color: var(--accent);
-            font-weight: bold;
-        }
-        .cons-item::before {
-            content: "✗";
-            position: absolute;
-            left: 0;
-            color: var(--secondary);
-            font-weight: bold;
-        }
-        .progress-bar {
-            width: 100%;
-            height: 20px;
-            background-color: rgba(255, 255, 255, 0.1);
-            border-radius: 10px;
-            margin: 1rem 0;
-            overflow: hidden;
         }
-        .progress-fill {
-            height: 100%;
-            background: linear-gradient(90deg, var(--primary), var(--accent));
-            border-radius: 10px;
-            transition: width 0.5s ease-in-out;
-            width: 0;
         }
-        .progress-labels {
             display: flex;
             justify-content: space-between;
-            margin-bottom: 0.5rem;
         }
-        .progress-label {
-            font-size: 0.9rem;
         }
-        .section-nav {
-            position: fixed;
-            top: 50%;
-            right: 2rem;
-            transform: translateY(-50%);
-            background: rgba(15, 5, 38, 0.8);
-            border-radius: 10px;
-            padding: 1rem;
-            border: 1px solid rgba(106, 0, 244, 0.5);
-            backdrop-filter: blur(5px);
-            z-index: 1000;
-            display: none;
         }
-        .section-nav ul {
-            list-style: none;
-            padding: 0;
-        }
-        .section-nav li {
-            margin-bottom: 0.5rem;
-        }
-        .section-nav a {
-            color: var(--light);
-            text-decoration: none;
-            font-size: 0.9rem;
-            transition: color 0.3s;
-            display: block;
-            padding: 0.5rem;
-            border-radius: 5px;
         }
-        .section-nav a:hover, .section-nav a.active {
-            color: var(--accent);
-            background: rgba(106, 0, 244, 0.3);
         }
-        @media (max-width: 768px) {
-            h1 {
-                font-size: 2.5rem;
-            }
-            .subtitle {
-                font-size: 1.2rem;
             }
-            .features, .control-scheme, .enemy-grid, .weapons-list, .art-style-cards {
-                grid-template-columns: 1fr;
             }
-            .section-nav {
-                display: none !important;
             }
         }
-        /* Animated background elements */
-        .bg-element {
-            position: fixed;
-            border-radius: 50%;
-            filter: blur(60px);
-            opacity: 0.1;
-            z-index: -1;
-        }
-        .bg-element-1 {
-            width: 300px;
-            height: 300px;
-            background: var(--primary);
-            top: -100px;
-            left: -100px;
-            animation: float 15s infinite alternate ease-in-out;
-        }
-        .bg-element-2 {
-            width: 400px;
-            height: 400px;
-            background: var(--secondary);
-            bottom: -150px;
-            right: -150px;
-            animation: float 20s infinite alternate-reverse ease-in-out;
-        }
-        .bg-element-3 {
-            width: 200px;
-            height: 200px;
-            background: var(--accent);
-            top: 40%;
-            right: 20%;
-            animation: float 25s infinite alternate ease-in-out;
-        }
-        @keyframes float {
-            0%, 100% {
-                transform: translate(0, 0);
             }
-            50% {
-                transform: translate(50px, 50px);
             }
-        }
-    </style>
-</head>
-<body>
-    <div class="bg-element bg-element-1"></div>
-    <div class="bg-element bg-element-2"></div>
-    <div class="bg-element bg-element-3"></div>
-    <header>
-        <div class="container header-content">
-            <h1>NEBULA STORM</h1>
-            <p class="subtitle">A fast-paced sci-fi roguelike shooter with endless alien threats</p>
-            <div class="tag-list">
-                <span class="tag">Roguelike</span>
-                <span class="tag">Twin-stick Shooter</span>
-                <span class="tag">Procedural Generation</span>
-                <span class="tag">Permadeath</span>
-                <span class="tag">Sci-fi</span>
-            </div>
-            <div class="screenshot-placeholder">
-                <div class="placeholder-content">
-                    <i class="fas fa-gamepad"></i>
-                    <h3>Intense Alien Combat</h3>
-                    <p>Concept screenshot placeholder</p>
-                </div>
-            </div>
-        </div>
-    </header>
-    <div class="section-nav">
-        <ul>
-            <li><a href="#overview" class="active">Overview</a></li>
-            <li><a href="#gameplay">Gameplay</a></li>
-            <li><a href="#controls">Controls</a></li>
-            <li><a href="#progression">Progression</a></li>
-            <li><a href="#enemies">Enemies</a></li>
-            <li><a href="#weapons">Weapons</a></li>
-            <li><a href="#art-style">Art Style</a></li>
-        </ul>
-    </div>
-    <main class="container">
-        <section id="overview">
-            <h2>Game Overview</h2>
-            <p>Nebula Storm is a fast-paced roguelike shooter set in a distant future where humanity has awakened an ancient alien threat while exploring the edge of known space. As one of the last elite Void Marines, players must battle through procedurally generated alien-infested sectors, upgrading their arsenal and abilities while facing increasingly deadly threats.</p>
-            <p>Each run is unique with randomized levels, enemies, and loot, but successful runs unlock permanent upgrades that make subsequent attempts easier. The game combines intense twin-stick shooter action with strategic decision-making about weapon and ability upgrades to create a deeply replayable experience.</p>
-            <div class="features">
-                <div class="feature-card">
-                    <div class="feature-icon"><i class="fas fa-random"></i></div>
-                    <h3 class="feature-title">Procedural Generation</h3>
-                    <p>Every run features unique levels, enemy placements, and loot distribution ensuring no two playthroughs are the same.</p>
-                </div>
-                <div class="feature-card">
-                    <div class="feature-icon"><i class="fas fa-bomb"></i></div>
-                    <h3 class="feature-title">Intense Combat</h3>
-                    <p>Fast-paced, skill-based shooting with satisfying weapon feedback and impactful dodging mechanics.</p>
-                </div>
-                <div class="feature-card">
-                    <div class="feature-icon"><i class="fas fa-sync-alt"></i></div>
-                    <h3 class="feature-title">Permadeath</h3>
-                    <p>Death is permanent, but you unlock persistent upgrades that carry over between runs.</p>
-                </div>
-                <div class="feature-card">
-                    <div class="feature-icon"><i class="fas fa-cogs"></i></div>
-                    <h3 class="feature-title">Deep Progression</h3>
-                    <p>A complex web of upgrades, abilities, and weapon modifications to keep players engaged for hours.</p>
-                </div>
-            </div>
-        </section>
-        <section id="gameplay">
-            <h2>Core Gameplay Loop</h2>
-            <p>The game follows a tight roguelike loop where each run presents new challenges and opportunities. Here's how a typical playthrough progresses:</p>
-            <div class="tabs">
-                <button class="tab-button active" onclick="openTab(event, 'gameplay-tab-1')">Level Start</button>
-                <button class="tab-button" onclick="openTab(event, 'gameplay-tab-2')">Exploration</button>
-                <button class="tab-button" onclick="openTab(event, 'gameplay-tab-3')">Combat</button>
-                <button class="tab-button" onclick="openTab(event, 'gameplay-tab-4')">Progression</button>
-            </div>
-            <div id="gameplay-tab-1" class="tab-content active">
-                <h3>Begin Your Run</h3>
-                <p>Each run starts with basic equipment scaled to your permanent upgrade progress. The procedural generation system creates a unique sector layout with interconnected rooms and corridors containing various enemy types and loot.</p>
-                <div class="progress-labels">
-                    <span class="progress-label">Difficulty Spread</span>
-                </div>
-                <div class="progress-bar">
-                    <div class="progress-fill" style="width: 30%"></div>
-                </div>
-            </div>
-            <div id="gameplay-tab-2" class="tab-content">
-                <h3>Explore the Sector</h3>
-                <p>As you navigate the level, you'll encounter various challenges and opportunities. Rooms contain different combinations of enemies, environmental hazards, and potential rewards like chests, shops, or special events.</p>
-                <div class="progress-labels">
-                    <span class="progress-label">Exploration Intensity</span>
-                </div>
-                <div class="progress-bar">
-                    <div class="progress-fill" style="width: 20%"></div>
-                </div>
-            </div>
-            <div id="gameplay-tab-3" class="tab-content">
-                <h3>Engage in Combat</h3>
-                <p>When encountering enemies, the game shifts to fast-paced combat sequences. Multiple enemy types with different behaviors require players to adapt their playstyle using movement, dodging, and smart weapon choice.</p>
-                <div class="progress-labels">
-                    <span class="progress-label">Combat Intensity</span>
-                </div>
-                <div class="progress-bar">
-                    <div class="progress-fill" style="width: 50%"></div>
-                </div>
-            </div>
-            <div id="gameplay-tab-4" class="tab-content">
-                <h3>Progress Your Build</h3>
-                <p>After clearing areas, players gain loot drops that can significantly change their power level. Careful choices about which weapons, upgrades, and abilities to take create emergent synergies that define each run's playstyle.</p>
-                <div class="progress-labels">
-                    <span class="progress-label">Build Potential</span>
-                </div>
-                <div class="progress-bar">
-                    <div class="progress-fill" style="width: 80%"></div>
-                </div>
-            </div>
-        </section>
-        <section id="controls">
-            <h2>Control Scheme</h2>
-            <p>Nebula Storm offers two control schemes to accommodate different player preferences. Both provide precise control for the game's demanding combat scenarios.</p>
-            <h3>Control Options</h3>
-            <div class="control-scheme">
-                <div class="control-item">
-                    <div class="control-action">Twin-Stick Controls</div>
-                    <p>Left stick: Movement<br>
-                    Right stick: Aim/shooting direction<br>
-                    RT/R2: Fire weapon<br>
-                    A: Dodge/evade<br>
-                    X: Use ability 1<br>
-                    Y: Use ability 2<br>
-                    B: Interact/pickup</p>
-                </div>
-                <div class="control-item">
-                    <div class="control-action">Mouse & Keyboard</div>
-                    <p>WASD: Movement<br>
-                    Mouse: Aim/shooting direction<br>
-                    Left click: Fire weapon<br>
-                    Shift: Dodge/evade<br>
-                    Q: Use ability 1<br>
-                    E: Use ability 2<br>
-                    F: Interact/pickup</p>
-                </div>
-                <div class="control-item">
-                    <div class="control-action">Common Controls</div>
-                    <p>Tab: Open map<br>
-                    ESC: Pause menu<br>
-                    1-4: Quick select weapons<br>
-                    Mouse wheel: Cycle weapons<br>
-                    Space: Confirm/select (menus)</p>
-                </div>
-                <div class="control-item">
-                    <div class="control-action">Gameplay Actions</div>
-                    <p>Dodging grants brief invulnerability<br>
-                    Perfect dodges (just before hit) slow time briefly<br>
-                    Some weapons have alt-fire modes (press L3)<br>
-                    Toggle sprint on/off for precision movement</p>
-                </div>
-            </div>
-        </section>
-        <section id="progression">
-            <h2>Progression Systems</h2>
-            <p>Nebula Storm features a dual progression system with temporary run-based upgrades and permanent meta-progression that carries between attempts.</p>
-            <h3>In-Run Progression</h3>
-            <p>During each playthrough, players collect various upgrades that enhance their capabilities for that specific run:</p>
-            <ul>
-                <li><strong>Weapons:</strong> Different weapon types with unique properties and upgrade paths</li>
-                <li><strong>Passive Modifiers:</strong> Stat boosts and special effects that enhance your capabilities</li>
-                <li><strong>Abilities:</strong> Special powers with cooldowns that provide combat advantages</li>
-                <li><strong>Nanite Infusions:</strong> Temporary buffs that last until death or can be replaced</li>
-            </ul>
-            <h3>Permanent Progression</h3>
-            <p>Between runs, players spend collected Void Crystals on upgrades that persist indefinitely:</p>
-            <div class="features">
-                <div class="feature-card">
-                    <div class="feature-icon"><i class="fas fa-shield-alt"></i></div>
-                    <h3 class="feature-title">Base Stats</h3>
-                    <p>Increase starting health, movement speed, damage resistance, etc.</p>
-                </div>
-                <div class="feature-card">
-                    <div class="feature-icon"><i class="fas fa-box-open"></i></div>
-                    <h3 class="feature-title">Starting Options</h3>
-                    <p>Unlock new starting weapons, abilities, or equipment loadouts.</p>
-                </div>
-                <div class="feature-card">
-                    <div class="feature-icon"><i class="fas fa-dice"></i></div>
-                    <h3 class="feature-title">Loot Quality</h3>
-                    <p>Improve the chances of finding higher rarity items during runs.</p>
-                </div>
-                <div class="feature-card">
-                    <div class="feature-icon"><i class="fas fa-trophy"></i></div>
-                    <h3 class="feature-title">Content Unlocks</h3>
-                    <p>Discover new enemy variants, levels, and challenges as you progress.</p>
-                </div>
-            </div>
-        </section>
-        <section id="enemies">
-            <h2>Alien Enemy Types</h2>
-            <p>The game features a roster of unique alien enemies, each with distinct behaviors and attack patterns that require different strategies to defeat.</p>
-            <div class="enemy-grid">
-                <div class="enemy-card">
-                    <div class="enemy-header">
-                        <div class="enemy-name">Screecher</div>
-                        <div class="enemy-difficulty">Low Threat</div>
-                    </div>
-                    <div class="enemy-body">
-                        <div class="enemy-attribute">
-                            <div class="attribute-title">Behavior</div>
-                            <p>Fast-moving melee attacker that rushes the player when sighted.</p>
-                        </div>
-                        <div class="enemy-attribute">
-                            <div class="attribute-title">Attacks</div>
-                            <p>Close-range claw swipe that causes bleeding (damage over time).</p>
-                        </div>
-                        <div class="enemy-attribute">
-                            <div class="attribute-title">Tactics</div>
-                            <p>Dodge when they leap, then punish while they recover.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="enemy-card">
-                    <div class="enemy-header">
-                        <div class="enemy-name">Spitter</div>
-                        <div class="enemy-difficulty">Medium Threat</div>
-                    </div>
-                    <div class="enemy-body">
-                        <div class="enemy-attribute">
-                            <div class="attribute-title">Behavior</div>
-                            <p>Ranged attacker that prefers to keep distance and fire projectile volleys.</p>
-                        </div>
-                        <div class="enemy-attribute">
-                            <div class="attribute-title">Attacks</div>
-                            <p>Acid globs that explode into pools of damaging liquid.</p>
-                        </div>
-                        <div class="enemy-attribute">
-                            <div class="attribute-title">Tactics</div>
-                            <p>Move perpendicular to Spitters when they telegraph attacks.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="enemy-card">
-                    <div class="enemy-header">
-                        <div class="enemy-name">Charger</div>
-                        <div class="enemy-difficulty">High Threat</div>
-                    </div>
-                    <div class="enemy-body">
-                        <div class="enemy-attribute">
-                            <div class="attribute-title">Behavior</div>
-                            <p>Bulky enemy that periodically rushes the player in straight lines.</p>
-                        </div>
-                        <div class="enemy-attribute">
-                            <div class="attribute-title">Attacks</div>
-                            <p>Devastating charge attack that knocks back and stuns the player.</p>
-                        </div>
-                        <div class="enemy-attribute">
-                            <div class="attribute-title">Tactics</div>
-                            <p>Dodge sideways at the last moment before impact.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="enemy-card">
-                    <div class="enemy-header">
-                        <div class="enemy-name">Broodmother</div>
-                        <div class="enemy-difficulty">Boss</div>
-                    </div>
-                    <div class="enemy-body">
-                        <div class="enemy-attribute">
-                            <div class="attribute-title">Behavior</div>
-                            <p>Spawns additional enemies and requires repositioning during combat.</p>
-                        </div>
-                        <div class="enemy-attribute">
-                            <div class="attribute-title">Attacks</div>
-                            <p>Multiple stage battle with area-denial acid pools and energy projectiles.</p>
-                        </div>
-                        <div class="enemy-attribute">
-                            <div class="attribute-title">Tactics</div>
-                            <p>Focus on clearing minions between damage phases on the boss.</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-        <section id="weapons">
-            <h2>Weapons & Abilities</h2>
-            <p>The game features a wide arsenal of weapons and abilities, each with multiple upgrade paths that allow for diverse builds and playstyles.</p>
-            <h3>Weapon Types</h3>
-            <div class="weapons-list">
-                <div class="weapon-card">
-                    <div class="weapon-name">Pulse Pistol</div>
-                    <p>Standard semi-auto sidearm with good accuracy and moderate damage.</p>
-                    <div class="weapon-stats">
-                        <span class="weapon-stat">Damage: Medium</span>
-                        <span class="weapon-stat">ROF: Medium</span>
-                        <span class="weapon-stat">Range: Medium</span>
-                    </div>
-                </div>
-                <div class="weapon-card">
-                    <div class="weapon-name">Plasma Cutter</div>
-                    <p>Short-range weapon that emits a continuous beam of superheated plasma.</p>
-                    <div class="weapon-stats">
-                        <span class="weapon-stat">Damage: High</span>
-                        <span class="weapon-stat">ROF: Continuous</span>
-                        <span class="weapon-stat">Range: Short</span>
-                    </div>
-                </div>
-                <div class="weapon-card">
-                    <div class="weapon-name">Gauss Rifle</div>
-                    <p>High-velocity railgun with armor-piercing rounds and slight recoil.</p>
-                    <div class="weapon-stats">
-                        <span class="weapon-stat">Damage: Very High</span>
-                        <span class="weapon-stat">ROF: Slow</span>
-                        <span class="weapon-stat">Range: Long</span>
-                    </div>
-                </div>
-                <div class="weapon-card">
-                    <div class="weapon-name">Nova Launcher</div>
-                    <p>Explosive weapon that fires energy orbs with splash damage.</p>
-                    <div class="weapon-stats">
-                        <span class="weapon-stat">Damage: High AOE</span>
-                        <span class="weapon-stat">ROF: Very Slow</span>
-                        <span class="weapon-stat">Range: Medium</span>
-                    </div>
-                </div>
-                <div class="weapon-card">
-                    <div class="weapon-name">Shock Baton</div>
-                    <p>Melee weapon with chain lightning and stagger effects.</p>
-                    <div class="weapon-stats">
-                        <span class="weapon-stat">Damage: Medium</span>
-                        <span class="weapon-stat">ROF: Fast</span>
-                        <span class="weapon-stat">Range: Melee</span>
-                    </div>
-                </div>
-            </div>
-            <h3>Ability Examples</h3>
-            <div class="weapons-list">
-                <div class="weapon-card">
-                    <div class="weapon-name">Blink</div>
-                    <p>Teleport short distances to reposition or bypass obstacles.</p>
-                    <div class="weapon-stats">
-                        <span class="weapon-stat">Cooldown: 6s</span>
-                    </div>
-                </div>
-                <div class="weapon-card">
-                    <div class="weapon-name">Power Shield</div>
-                    <p>Creates a temporary barrier that blocks incoming projectiles.</p>
-                    <div class="weapon-stats">
-                        <span class="weapon-stat">Duration: 4s</span>
-                        <span class="weapon-stat">Cooldown: 12s</span>
-                    </div>
-                </div>
-                <div class="weapon-card">
-                    <div class="weapon-name">Gravity Well</div>
-                    <p>Creates a zone that slows and damages enemies.</p>
-                    <div class="weapon-stats">
-                        <span class="weapon-stat">Duration: 5s</span>
-                        <span class="weapon-stat">Cooldown: 18s</span>
-                    </div>
-                </div>
-            </div>
-        </section>
-        <section id="art-style">
-            <h2>Art Style Direction</h2>
-            <p>The game's visual style aims to create a compelling sci-fi atmosphere with clear readability during frantic combat situations.</p>
-            <div class="art-style-cards">
-                <div class="art-style-card">
-                    <h3 class="art-style-title"><i class="fas fa-moon"></i>Dark Sci-Fi Realism</h3>
-                    <p>A gritty, high-detail aesthetic emphasizing realistic lighting and materials with a dark color palette. Perfect for creating tension and horror elements.</p>
-                    <div class="art-style-pros">
-                        <div class="pro-item">Immersion and tension</div>
-                        <div class="pro-item">Natural dynamic lighting effects</div>
-                        <div class="pro-item">Strong environmental storytelling</div>
-                    </div>
-                </div>
-                <div class="art-style-card">
-                    <h3 class="art-style-title"><i class="fas fa-atom"></i>Neon Cyberpunk</h3>
-                    <p>Vibrant neon colors against dark backgrounds with synthetic lighting effects. Cyberpunk influences make the alien structures feel artificial and high-tech.</p>
-                    <div class="art-style-pros">
-                        <div class="pro-item">Vibrant visual feedback</div>
-                        <div class="pro-item">Clear enemy/player contrast</div>
-                        <div class="pro-item">Modern, stylish appeal</div>
-                    </div>
-                </div>
-                <div class="art-style-card">
-                    <h3 class="art-style-title"><i class="fas fa-paint-brush"></i>Stylized Sci-Fi</h3>
-                    <p>A more artistic approach with exaggerated shapes and simplified details. Uses bold colors and clear silhouettes to ensure excellent gameplay readability.</p>
-                    <div class="art-style-pros">
-                        <div class="pro-item">Excellent gameplay clarity</div>
-                        <div class="pro-item">More forgiving asset production</div>
-                        <div class="pro-item">Timeless artistic appeal</div>
-                    </div>
-                </div>
-            </div>
-            <h3>Sound Design</h3>
-            <p>The audio experience will complement the visual style with:</p>
-            <ul>
-                <li><strong>Distinct Weapon Sounds:</strong> Each weapon type has unique auditory feedback that matches its visual effects</li>
-                <li><strong>Alien Vocalizations:</strong> Enemy sounds telegraph their actions and increase tension</li>
-                <li><strong>Dynamic Music:</strong> Adaptive soundtrack that shifts intensity with combat encounters</li>
-                <li><strong>Environmental Audio:</strong> Ambient sounds that sell the sci-fi setting and alert players to dangers</li>
-            </ul>
-            <h3>Dynamic Lighting</h3>
-            <p>The game will use lighting strategically to:</p>
-            <ul>
-                <li>Guide player attention toward important elements</li>
-                <li>Create atmosphere and mood</li>
-                <li>Enhance gameplay clarity (e.g. enemy attack wind-ups)</li>
-                <li>Support dramatic moments (pulsing emergency lights, etc.)</li>
-            </ul>
-        </section>
-    </main>
-    <footer style="background: var(--darker); padding: 3rem 0; text-align: center; margin-top: 3rem;">
-        <div class="container">
-            <h2>NEBULA STORM</h2>
-            <p>© 2024 Cosmic Forge Games</p>
-            <div style="margin-top: 2rem; display: flex; justify-content: center; gap: 2rem;">
-                <a href="#" style="color: var(--light); font-size: 1.5rem;"><i class="fab fa-twitter"></i></a>
-                <a href="#" style="color: var(--light); font-size: 1.5rem;"><i class="fab fa-discord"></i></a>
-                <a href="#" style="color: var(--light); font-size: 1.5rem;"><i class="fab fa-steam"></i></a>
-            </div>
-        </div>
-    </footer>
-    <script>
-        // Tab functionality
-        function openTab(evt, tabName) {
-            // Get all tab content and hide them
-            var tabcontent = document.getElementsByClassName("tab-content");
-            for (var i = 0; i < tabcontent.length; i++) {
-                tabcontent[i].classList.remove("active");
             }
-            // Get all tab buttons and remove 'active' class
-            var tabbuttons = document.getElementsByClassName("tab-button");
-            for (var i = 0; i < tabbuttons.length; i++) {
-                tabbuttons[i].classList.remove("active");
             }
-            // Show the current tab and add 'active' class to the button
-            document.getElementById(tabName).classList.add("active");
-            evt.currentTarget.classList.add("active");
         }
-        // Section navigation highlighting
-        window.addEventListener('scroll', function() {
-            var sections = document.querySelectorAll('section');
-            var navLinks = document.querySelectorAll('.section-nav a');
-            var currentSection = '';
-            sections.forEach(function(section) {
-                var sectionTop = section.offsetTop;
-                var sectionHeight = section.clientHeight;
-                if (window.pageYOffset >= (sectionTop - 200)) {
-                    currentSection = section.getAttribute('id');
                 }
-            });
-            navLinks.forEach(function(link) {
-                link.classList.remove('active');
-                if (link.getAttribute('href') === '#' + currentSection) {
-                    link.classList.add('active');
-                }
-            });
-            // Show/hide nav based on scroll position
-            var sectionNav = document.querySelector('.section-nav');
-            if (window.pageYOffset > 600) {
-                sectionNav.style.display = 'block';
-            } else {
-                sectionNav.style.display = 'none';
             }
-        });
-        // Smooth scrolling for navigation
-        document.querySelectorAll('.section-nav a').forEach(anchor => {
-            anchor.addEventListener('click', function(e) {
-                e.preventDefault();
-                const targetId = this.getAttribute('href');
-                if (targetId === '#') return;
-                const targetElement = document.querySelector(targetId);
-                if (targetElement) {
-                    window.scrollTo({
-                        top: targetElement.offsetTop - 80,
-                        behavior: 'smooth'
-                    });
-                }
             });
-        });
-        // Animate progress bars on scroll
-        function animateProgressBars() {
-            const progressBars = document.querySelectorAll('.progress-fill');
-            progressBars.forEach(bar => {
-                const width = bar.style.width;
-                bar.style.width = '0';
-                setTimeout(() => {
-                    bar.style.width = width;
-                }, 100);
-            });
         }
-        // Intersection Observer for progress bars
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    animateProgressBars();
-                    observer.unobserve(entry.target);
-                }
-            });
-        }, {threshold: 0.5});
-        document.querySelectorAll('.progress-bar').forEach(bar => {
-            observer.observe(bar);
-        });
-        // Initialize - make sure first tab is active
-        document.addEventListener('DOMContentLoaded', function() {
-            animateProgressBars();
-        });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Roguelike Alien Shooter</title>
     <style>
+        body {
             margin: 0;
             padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: #111;
+            color: #0f0;
+            font-family: 'Courier New', monospace;
+            overflow: hidden;
         }
+        #game-container {
             position: relative;
+            width: 800px;
+            height: 600px;
+            border: 2px solid #0f0;
             overflow: hidden;
+            box-shadow: 0 0 20px #0f0;
+            background-color: #000;
+        }
+        #game-canvas {
+            background-color: #000;
+            display: block;
         }
+        #ui-overlay {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
             pointer-events: none;
         }
+        #top-bar {
+            padding: 10px;
             display: flex;
+            justify-content: space-between;
+            background-color: rgba(0, 0, 0, 0.7);
+            border-bottom: 1px solid #0f0;
         }
+        #bottom-bar {
+            padding: 10px;
+            background-color: rgba(0, 0, 0, 0.7);
+            border-top: 1px solid #0f0;
             display: flex;
+            justify-content: space-between;
         }
+        #game-over-screen, #level-up-screen {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
+            background-color: rgba(0, 0, 0, 0.9);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            display: none;
         }
+        #game-over-screen h1 {
+            color: #f00;
+            font-size: 48px;
+            text-shadow: 0 0 10px #f00;
+            margin-bottom: 30px;
         }
+        #level-up-screen h1 {
+            color: #0f0;
+            font-size: 36px;
+            margin-bottom: 20px;
         }
+        .upgrade-option {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin: 10px;
+            padding: 10px;
+            border: 1px solid #0f0;
+            cursor: pointer;
+            pointer-events: all;
+            transition: all 0.2s;
+            background-color: rgba(0, 20, 0, 0.5);
         }
+        .upgrade-option:hover {
+            background-color: rgba(0, 50, 0, 0.7);
+            transform: scale(1.05);
         }
+        .upgrade-options {
             display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            max-width: 600px;
         }
+        button {
+            background-color: #111;
+            color: #0f0;
+            border: 1px solid #0f0;
+            padding: 10px 20px;
+            margin: 10px;
             cursor: pointer;
+            font-family: 'Courier New', monospace;
+            font-size: 16px;
+            transition: all 0.2s;
+            pointer-events: all;
         }
+        button:hover {
+            background-color: #0f0;
+            color: #000;
+            box-shadow: 0 0 10px #0f0;
         }
+        #start-screen {
             position: absolute;
+            top: 0;
             left: 0;
             width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.9);
             display: flex;
+            flex-direction: column;
+            justify-content: center;
             align-items: center;
         }
+        #start-screen h1 {
+            font-size: 64px;
+            color: #0f0;
+            text-shadow: 0 0 10px #0f0;
+            margin-bottom: 40px;
         }
+        #instructions {
+            margin-top: 30px;
+            max-width: 600px;
+            text-align: center;
+            line-height: 1.6;
         }
+        #player-stats, #game-stats {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
         }
+        .stat {
             display: flex;
             justify-content: space-between;
+            gap: 10px;
         }
+        .stat-name {
+            color: #0f0;
         }
+        .stat-value {
+            color: #fff;
         }
+    </style>
+</head>
+<body>
+    <div id="game-container">
+        <canvas id="game-canvas" width="800" height="600"></canvas>
+        <div id="ui-overlay">
+            <div id="top-bar">
+                <div id="player-stats">
+                    <div class="stat">
+                        <span class="stat-name">HEALTH:</span>
+                        <span class="stat-value" id="health-value">100/100</span>
+                    </div>
+                    <div class="stat">
+                        <span class="stat-name">DAMAGE:</span>
+                        <span class="stat-value" id="damage-value">10</span>
+                    </div>
+                    <div class="stat">
+                        <span class="stat-name">FIRE RATE:</span>
+                        <span class="stat-value" id="fire-rate-value">0.5s</span>
+                    </div>
+                </div>
+                <div id="game-stats">
+                    <div class="stat">
+                        <span class="stat-name">LEVEL:</span>
+                        <span class="stat-value" id="level-value">1</span>
+                    </div>
+                    <div class="stat">
+                        <span class="stat-name">KILLS:</span>
+                        <span class="stat-value" id="kills-value">0</span>
+                    </div>
+                    <div class="stat">
+                        <span class="stat-name">XP:</span>
+                        <span class="stat-value" id="xp-value">0/100</span>
+                    </div>
+                </div>
+            </div>
+            <div id="bottom-bar">
+                <div id="weapon-info">Weapon: Pulse Rifle</div>
+                <div id="enemies-remaining">Aliens: 0</div>
+            </div>
+        </div>
+        <div id="game-over-screen">
+            <h1>MISSION FAILED</h1>
+            <p id="final-stats">You reached level 1 and killed 0 aliens</p>
+            <button id="retry-btn">RETRY</button>
+        </div>
+        <div id="level-up-screen">
+            <h1>UPGRADE SELECTED</h1>
+            <p>Choose one of the following upgrades</p>
+            <div class="upgrade-options" id="upgrade-options">
+                <!-- Will be populated by JavaScript -->
+            </div>
+        </div>
+        <div id="start-screen">
+            <h1>ROGUELIKE ALIEN SHOOTER</h1>
+            <button id="start-btn">START GAME</button>
+            <div id="instructions">
+                <p>WASD to move, Mouse to aim and shoot</p>
+                <p>Survive as long as possible in procedurally generated alien-infested levels</p>
+                <p>Collect random upgrades when you level up</p>
+                <p>Permadeath - when you die, you lose everything!</p>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Game constants
+        const TILE_SIZE = 40;
+        const MAP_WIDTH = 40;
+        const MAP_HEIGHT = 30;
+        const PLAYER_SPEED = 3;
+        const BASE_FIRE_RATE = 500; // ms
+        // Game state
+        const gameState = {
+            player: null,
+            enemies: [],
+            bullets: [],
+            walls: [],
+            level: 1,
+            kills: 0,
+            xp: 0,
+            xpToNextLevel: 100,
+            gameOver: false,
+            gameStarted: false,
+            lastFireTime: 0,
+            playerStats: {
+                health: 100,
+                maxHealth: 100,
+                damage: 10,
+                fireRate: BASE_FIRE_RATE,
+                movementSpeed: PLAYER_SPEED,
+                bulletSpeed: 8,
+                lifeSteal: 0
+            }
+        };
+        // DOM elements
+        const canvas = document.getElementById('game-canvas');
+        const ctx = canvas.getContext('2d');
+        const startScreen = document.getElementById('start-screen');
+        const gameOverScreen = document.getElementById('game-over-screen');
+        const levelUpScreen = document.getElementById('level-up-screen');
+        const startBtn = document.getElementById('start-btn');
+        const retryBtn = document.getElementById('retry-btn');
+        const healthValue = document.getElementById('health-value');
+        const damageValue = document.getElementById('damage-value');
+        const fireRateValue = document.getElementById('fire-rate-value');
+        const levelValue = document.getElementById('level-value');
+        const killsValue = document.getElementById('kills-value');
+        const xpValue = document.getElementById('xp-value');
+        const finalStats = document.getElementById('final-stats');
+        const enemiesRemaining = document.getElementById('enemies-remaining');
+        const upgradeOptions = document.getElementById('upgrade-options');
+        // Initialize game
+        function init() {
+            startBtn.addEventListener('click', startGame);
+            retryBtn.addEventListener('click', startGame);
+            window.addEventListener('keydown', handleKeyDown);
+            window.addEventListener('keyup', handleKeyUp);
+            canvas.addEventListener('mousemove', handleMouseMove);
+            canvas.addEventListener('click', handleMouseClick);
+            // Start the game loop
+            gameLoop();
+        }
+        // Start a new game
+        function startGame() {
+            // Reset game state
+            gameState.player = {
+                x: 400,
+                y: 300,
+                width: 24,
+                height: 24,
+                angle: 0,
+                keys: {
+                    up: false,
+                    down: false,
+                    left: false,
+                    right: false
+                }
+            };
+            gameState.enemies = [];
+            gameState.bullets = [];
+            gameState.walls = [];
+            gameState.level = 1;
+            gameState.kills = 0;
+            gameState.xp = 0;
+            gameState.xpToNextLevel = 100;
+            gameState.gameOver = false;
+            gameState.gameStarted = true;
+            gameState.lastFireTime = 0;
+            // Reset player stats (with some base upgrades as you progress)
+            gameState.playerStats = {
+                health: 100,
+                maxHealth: 100,
+                damage: 10,
+                fireRate: BASE_FIRE_RATE,
+                movementSpeed: PLAYER_SPEED,
+                bulletSpeed: 8,
+                lifeSteal: 0
+            };
+            // Generate first level
+            generateLevel();
+            // Hide screens
+            startScreen.style.display = 'none';
+            gameOverScreen.style.display = 'none';
+            levelUpScreen.style.display = 'none';
+            // Update UI
+            updateUI();
         }
+        // Generate a procedurally generated level
+        function generateLevel() {
+            // Clear existing walls
+            gameState.walls = [];
+            // Generate a random level layout
+            // Start with a simple room-based system
+            const roomWidth = Math.floor(Math.random() * 8) + 6;
+            const roomHeight = Math.floor(Math.random() * 8) + 6;
+            const roomX = Math.floor(Math.random() * (MAP_WIDTH - roomWidth - 4)) + 2;
+            const roomY = Math.floor(Math.random() * (MAP_HEIGHT - roomHeight - 4)) + 2;
+            // Create outer walls
+            for (let x = 0; x < MAP_WIDTH; x++) {
+                for (let y = 0; y < MAP_HEIGHT; y++) {
+                    // Outer walls
+                    if (x === 0 || y === 0 || x === MAP_WIDTH - 1 || y === MAP_HEIGHT - 1) {
+                        gameState.walls.push({
+                            x: x * TILE_SIZE,
+                            y: y * TILE_SIZE,
+                            width: TILE_SIZE,
+                            height: TILE_SIZE
+                        });
+                    }
+                    // Random obstacles
+                    if (Math.random() < 0.05 &&
+                        x > roomX && x < roomX + roomWidth &&
+                        y > roomY && y < roomY + roomHeight) {
+                        gameState.walls.push({
+                            x: x * TILE_SIZE,
+                            y: y * TILE_SIZE,
+                            width: TILE_SIZE,
+                            height: TILE_SIZE
+                        });
+                    }
+                }
+            }
+            // Place the player in the center of the room
+            const centerX = (roomX + roomWidth / 2) * TILE_SIZE;
+            const centerY = (roomY + roomHeight / 2) * TILE_SIZE;
+            gameState.player.x = centerX;
+            gameState.player.y = centerY;
+            // Spawn enemies based on level
+            const enemyCount = Math.floor(Math.random() * 3) + 2 + gameState.level;
+            for (let i = 0; i < enemyCount; i++) {
+                spawnEnemy();
+            }
+            enemiesRemaining.textContent = `Aliens: ${gameState.enemies.length}`;
         }
+        // Spawn an enemy in a random position
+        function spawnEnemy() {
+            // Try random positions until we find a valid one
+            let validPosition = false;
+            let x, y;
+            while (!validPosition) {
+                x = Math.floor(Math.random() * (MAP_WIDTH - 4)) * TILE_SIZE + TILE_SIZE * 2;
+                y = Math.floor(Math.random() * (MAP_HEIGHT - 4)) * TILE_SIZE + TILE_SIZE * 2;
+                // Check if position is too close to player
+                const distToPlayer = Math.sqrt(Math.pow(x - gameState.player.x, 2) + Math.pow(y - gameState.player.y, 2));
+                if (distToPlayer > 200) {
+                    validPosition = true;
+                }
             }
+            // Random enemy type based on level
+            let enemyType;
+            const rand = Math.random();
+            if (gameState.level < 3 || rand < 0.7) {
+                enemyType = 'normal'; // 70% chance or always at low levels
+            } else if (rand < 0.9) {
+                enemyType = 'fast'; // 20% chance
+            } else {
+                enemyType = 'tank'; // 10% chance
             }
+            // Create enemy settings
+            let settings;
+            switch (enemyType) {
+                case 'fast':
+                    settings = {
+                        speed: 2.5,
+                        health: 30,
+                        damage: 8,
+                        color: '#00f',
+                        value: 20
+                    };
+                    break;
+                case 'tank':
+                    settings = {
+                        speed: 0.8,
+                        health: 150,
+                        damage: 15,
+                        color: '#f00',
+                        value: 50
+                    };
+                    break;
+                default: // normal
+                    settings = {
+                        speed: 1.5,
+                        health: 60,
+                        damage: 10,
+                        color: '#0f0',
+                        value: 15
+                    };
             }
+            gameState.enemies.push({
+                x: x,
+                y: y,
+                width: 24,
+                height: 24,
+                health: settings.health,
+                maxHealth: settings.health,
+                speed: settings.speed,
+                damage: settings.damage,
+                color: settings.color,
+                type: enemyType,
+                value: settings.value,
+                lastAttackTime: 0,
+                attackCooldown: 1000
+            });
         }
+        // Main game loop
+        function gameLoop() {
+            if (!gameState.gameStarted) {
+                requestAnimationFrame(gameLoop);
+                return;
             }
+            if (gameState.gameOver) {
+                render();
+                requestAnimationFrame(gameLoop);
+                return;
             }
+            // Update game state
+            update();
+            // Render the game
+            render();
+            // Continue the loop
+            requestAnimationFrame(gameLoop);
+        }
+        // Update game state
+        function update() {
+            // Update player position
+            updatePlayer();
+            // Update enemies
+            updateEnemies();
+            // Update bullets
+            updateBullets();
+            // Check collisions
+            checkCollisions();
+            // Check if level is complete
+            if (gameState.enemies.length === 0) {
+                gameState.level++;
+                generateLevel();
+            }
+            // Update UI
+            updateUI();
+        }
+        // Update player position based on input
+        function updatePlayer() {
+            const player = gameState.player;
+            const speed = gameState.playerStats.movementSpeed;
+            // Calculate movement vector
+            let dx = 0;
+            let dy = 0;
+            if (player.keys.up) dy -= speed;
+            if (player.keys.down) dy += speed;
+            if (player.keys.left) dx -= speed;
+            if (player.keys.right) dx += speed;
+            // Normalize diagonal movement
+            if (dx !== 0 && dy !== 0) {
+                const invDiag = 1 / Math.sqrt(2);
+                dx *= invDiag;
+                dy *= invDiag;
+            }
+            // Calculate new position
+            let newX = player.x + dx;
+            let newY = player.y + dy;
+            // Check wall collisions
+            const playerRect = {
+                x: newX - player.width/2,
+                y: newY - player.height/2,
+                width: player.width,
+                height: player.height
+            };
+            let canMove = true;
+            for (const wall of gameState.walls) {
+                if (checkCollision(playerRect, wall)) {
+                    canMove = false;
+                    break;
+                }
+            }
+            // Only move if there's no collision
+            if (canMove) {
+                player.x = newX;
+                player.y = newY;
+            }
+            // Keep player in bounds
+            player.x = Math.max(player.width/2, Math.min(canvas.width - player.width/2, player.x));
+            player.y = Math.max(player.height/2, Math.min(canvas.height - player.height/2, player.y));
+        }
+        // Update all enemies
+        function updateEnemies() {
+            const now = Date.now();
+            const player = gameState.player;
+            for (let i = 0; i < gameState.enemies.length; i++) {
+                const enemy = gameState.enemies[i];
+                // Calculate direction to player
+                const dx = player.x - enemy.x;
+                const dy = player.y - enemy.y;
+                const dist = Math.sqrt(dx*dx + dy*dy);
+                // Normalize direction and move
+                if (dist > 0) {
+                    enemy.x += (dx / dist) * enemy.speed;
+                    enemy.y += (dy / dist) * enemy.speed;
+                }
+                // Attack player if close enough
+                if (dist < 30 && now - enemy.lastAttackTime > enemy.attackCooldown) {
+                    enemy.lastAttackTime = now;
+                    gameState.playerStats.health -= enemy.damage;
+                    // Check if player died
+                    if (gameState.playerStats.health <= 0) {
+                        gameState.playerStats.health = 0;
+                        gameState.gameOver = true;
+                        showGameOver();
+                        break;
+                    }
+                }
+            }
+            // Remove dead enemies and add XP
+            gameState.enemies = gameState.enemies.filter(enemy => {
+                if (enemy.health <= 0) {
+                    gameState.kills++;
+                    gameState.xp += enemy.value;
+                    // Check for level up
+                    if (gameState.xp >= gameState.xpToNextLevel) {
+                        gameState.xp -= gameState.xpToNextLevel;
+                        gameState.xpToNextLevel = Math.floor(gameState.xpToNextLevel * 1.2);
+                        gameState.level++;
+                        showLevelUp();
+                    }
+                    return false;
+                }
+                return true;
+            });
+            enemiesRemaining.textContent = `Aliens: ${gameState.enemies.length}`;
+        }
+        // Update all bullets
+        function updateBullets() {
+            // Move bullets
+            for (let i = 0; i < gameState.bullets.length; i++) {
+                const bullet = gameState.bullets[i];
+                bullet.x += bullet.dx;
+                bullet.y += bullet.dy;
+                // Remove bullets that go off screen
+                if (bullet.x < 0 || bullet.x > canvas.width ||
+                    bullet.y < 0 || bullet.y > canvas.height) {
+                    gameState.bullets.splice(i, 1);
+                    i--;
+                    continue;
+                }
+                // Check wall collisions
+                for (const wall of gameState.walls) {
+                    const bulletRect = {
+                        x: bullet.x - bullet.size/2,
+                        y: bullet.y - bullet.size/2,
+                        width: bullet.size,
+                        height: bullet.size
+                    };
+                    if (checkCollision(bulletRect, wall)) {
+                        gameState.bullets.splice(i, 1);
+                        i--;
+                        break;
+                    }
+                }
+            }
+        }
+        // Check all collisions
+        function checkCollisions() {
+            // Check bullet-enemy collisions
+            for (let i = 0; i < gameState.bullets.length; i++) {
+                const bullet = gameState.bullets[i];
+                const bulletRect = {
+                    x: bullet.x - bullet.size/2,
+                    y: bullet.y - bullet.size/2,
+                    width: bullet.size,
+                    height: bullet.size
+                };
+                for (let j = 0; j < gameState.enemies.length; j++) {
+                    const enemy = gameState.enemies[j];
+                    const enemyRect = {
+                        x: enemy.x - enemy.width/2,
+                        y: enemy.y - enemy.height/2,
+                        width: enemy.width,
+                        height: enemy.height
+                    };
+                    if (checkCollision(bulletRect, enemyRect)) {
+                        // Damage enemy
+                        enemy.health -= gameState.playerStats.damage;
+                        // Life steal
+                        if (gameState.playerStats.lifeSteal > 0) {
+                            const healAmount = gameState.playerStats.damage * (gameState.playerStats.lifeSteal / 100);
+                            gameState.playerStats.health = Math.min(
+                                gameState.playerStats.maxHealth,
+                                gameState.playerStats.health + healAmount
+                            );
+                        }
+                        // Remove bullet
+                        gameState.bullets.splice(i, 1);
+                        i--;
+                        break;
+                    }
+                }
+            }
+        }
+        // Check collision between two rectangles
+        function checkCollision(rect1, rect2) {
+            return rect1.x < rect2.x + rect2.width &&
+                   rect1.x + rect1.width > rect2.x &&
+                   rect1.y < rect2.y + rect2.height &&
+                   rect1.y + rect1.height > rect2.y;
+        }
+        // Render the game
+        function render() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // Draw background grid
+            ctx.strokeStyle = '#030';
+            ctx.lineWidth = 1;
+            for (let x = 0; x < canvas.width; x += TILE_SIZE) {
+                ctx.beginPath();
+                ctx.moveTo(x, 0);
+                ctx.lineTo(x, canvas.height);
+                ctx.stroke();
+            }
+            for (let y = 0; y < canvas.height; y += TILE_SIZE) {
+                ctx.beginPath();
+                ctx.moveTo(0, y);
+                ctx.lineTo(canvas.width, y);
+                ctx.stroke();
+            }
+            // Draw walls
+            ctx.fillStyle = '#0f0';
+            for (const wall of gameState.walls) {
+                ctx.fillRect(wall.x, wall.y, wall.width, wall.height);
+            }
+            // Draw player
+            if (!gameState.gameOver) {
+                ctx.save();
+                ctx.translate(gameState.player.x, gameState.player.y);
+                ctx.rotate(gameState.player.angle);
+                // Player body
+                ctx.fillStyle = '#fff';
+                ctx.fillRect(-gameState.player.width/2, -gameState.player.height/2,
+                            gameState.player.width, gameState.player.height);
+                // Player gun
+                ctx.fillStyle = '#f00';
+                ctx.fillRect(gameState.player.width/2 - 4, -4, 10, 8);
+                ctx.restore();
+            }
+            // Draw enemies
+            for (const enemy of gameState.enemies) {
+                // Enemy body
+                ctx.fillStyle = enemy.color;
+                ctx.fillRect(
+                    enemy.x - enemy.width/2,
+                    enemy.y - enemy.height/2,
+                    enemy.width,
+                    enemy.height
+                );
+                // Health bar
+                const healthPercent = enemy.health / enemy.maxHealth;
+                ctx.fillStyle = '#f00';
+                ctx.fillRect(
+                    enemy.x - enemy.width/2,
+                    enemy.y - enemy.height/2 - 6,
+                    enemy.width * healthPercent,
+                    4
+                );
             }
+            // Draw bullets
+            ctx.fillStyle = '#ff0';
+            for (const bullet of gameState.bullets) {
+                ctx.beginPath();
+                ctx.arc(bullet.x, bullet.y, bullet.size/2, 0, Math.PI * 2);
+                ctx.fill();
             }
+            // Draw player health bar
+            if (!gameState.gameOver) {
+                const healthPercent = gameState.playerStats.health / gameState.playerStats.maxHealth;
+                const barWidth = 200;
+                const barHeight = 10;
+                ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+                ctx.fillRect(canvas.width/2 - barWidth/2, 20, barWidth, barHeight);
+                ctx.fillStyle = '#f00';
+                ctx.fillRect(canvas.width/2 - barWidth/2, 20, barWidth * healthPercent, barHeight);
+                ctx.strokeStyle = '#0f0';
+                ctx.strokeRect(canvas.width/2 - barWidth/2, 20, barWidth, barHeight);
+            }
+        }
+        // Update UI elements
+        function updateUI() {
+            healthValue.textContent = `${Math.floor(gameState.playerStats.health)}/${gameState.playerStats.maxHealth}`;
+            damageValue.textContent = gameState.playerStats.damage;
+            fireRateValue.textContent = `${(gameState.playerStats.fireRate / 1000).toFixed(1)}s`;
+            levelValue.textContent = gameState.level;
+            killsValue.textContent = gameState.kills;
+            xpValue.textContent = `${gameState.xp}/${gameState.xpToNextLevel}`;
         }
+        // Show game over screen
+        function showGameOver() {
+            finalStats.textContent = `You reached level ${gameState.level} and killed ${gameState.kills} aliens`;
+            gameOverScreen.style.display = 'flex';
+        }
+        // Show level up screen with upgrade options
+        function showLevelUp() {
+            // Clear previous options
+            upgradeOptions.innerHTML = '';
+            // Generate 3 random upgrade options
+            const upgrades = [
+                {
+                    title: 'Damage Boost',
+                    description: 'Increase damage by +5',
+                    icon: '⚔️',
+                    apply: () => { gameState.playerStats.damage += 5; }
+                },
+                {
+                    title: 'Health Boost',
+                    description: 'Increase max health by +30',
+                    icon: '❤️',
+                    apply: () => {
+                        gameState.playerStats.maxHealth += 30;
+                        gameState.playerStats.health += 30;
+                    }
+                },
+                {
+                    title: 'Faster Reload',
+                    description: 'Increase fire rate by 20%',
+                    icon: '🚀',
+                    apply: () => {
+                        gameState.playerStats.fireRate = Math.max(200, gameState.playerStats.fireRate * 0.8);
+                    }
+                },
+                {
+                    title: 'Life Steal',
+                    description: 'Heal for 10% of damage dealt',
+                    icon: '🩸',
+                    apply: () => {
+                        gameState.playerStats.lifeSteal += 10;
+                    }
+                },
+                {
+                    title: 'Faster Movement',
+                    description: 'Increase movement speed by 20%',
+                    icon: '👟',
+                    apply: () => {
+                        gameState.playerStats.movementSpeed *= 1.2;
+                    }
+                },
+                {
+                    title: 'Piercing Shots',
+                    description: 'Bullets pass through enemies',
+                    icon: '🔫',
+                    apply: () => {
+                        // Add piercing flag to bullets
+                        for (const bullet of gameState.bullets) {
+                            bullet.piercing = true;
+                        }
+                        // Modify fireBullet to include piercing
+                        gameState.fireBullet = function(x, y, dx, dy) {
+                            gameState.bullets.push({
+                                x: x,
+                                y: y,
+                                dx: dx * gameState.playerStats.bulletSpeed,
+                                dy: dy * gameState.playerStats.bulletSpeed,
+                                size: 8,
+                                piercing: true
+                            });
+                        };
+                    }
                 }
+            ];
+            // Shuffle and pick 3
+            const shuffled = [...upgrades].sort(() => 0.5 - Math.random());
+            const selectedUpgrades = shuffled.slice(0, 3);
+            // Create option elements
+            for (const upgrade of selectedUpgrades) {
+                const option = document.createElement('div');
+                option.className = 'upgrade-option';
+                option.innerHTML = `
+                    <h3>${upgrade.icon} ${upgrade.title}</h3>
+                    <p>${upgrade.description}</p>
+                `;
+                option.addEventListener('click', () => {
+                    upgrade.apply();
+                    levelUpScreen.style.display = 'none';
+                });
+                upgradeOptions.appendChild(option);
             }
+            levelUpScreen.style.display = 'flex';
+        }
+        // Fire a bullet from player
+        function fireBullet() {
+            const now = Date.now();
+            if (now - gameState.lastFireTime < gameState.playerStats.fireRate) {
+                return;
+            }
+            gameState.lastFireTime = now;
+            const dx = Math.cos(gameState.player.angle);
+            const dy = Math.sin(gameState.player.angle);
+            gameState.bullets.push({
+                x: gameState.player.x + dx * 20,
+                y: gameState.player.y + dy * 20,
+                dx: dx * gameState.playerStats.bulletSpeed,
+                dy: dy * gameState.playerStats.bulletSpeed,
+                size: 8
             });
+        }
+        // Handle keyboard input
+        function handleKeyDown(e) {
+            const player = gameState.player;
+            if (!player) return;
+            switch (e.key.toLowerCase()) {
+                case 'w':
+                    player.keys.up = true;
+                    break;
+                case 's':
+                    player.keys.down = true;
+                    break;
+                case 'a':
+                    player.keys.left = true;
+                    break;
+                case 'd':
+                    player.keys.right = true;
+                    break;
+            }
         }
+        function handleKeyUp(e) {
+            const player = gameState.player;
+            if (!player) return;
+            switch (e.key.toLowerCase()) {
+                case 'w':
+                    player.keys.up = false;
+                    break;
+                case 's':
+                    player.keys.down = false;
+                    break;
+                case 'a':
+                    player.keys.left = false;
+                    break;
+                case 'd':
+                    player.keys.right = false;
+                    break;
+            }
+        }
+        // Handle mouse input
+        function handleMouseMove(e) {
+            if (!gameState.player || gameState.gameOver) return;
+            const rect = canvas.getBoundingClientRect();
+            const mouseX = e.clientX - rect.left;
+            const mouseY = e.clientY - rect.top;
+            // Calculate angle from player to mouse
+            const dx = mouseX - gameState.player.x;
+            const dy = mouseY - gameState.player.y;
+            gameState.player.angle = Math.atan2(dy, dx);
+        }
+        function handleMouseClick(e) {
+            if (gameState.gameOver || !gameState.gameStarted) return;
+            fireBullet();
+        }
+        // Start the game
+        init();
     </script>
 </body>
 </html>