Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Orcs In The Forest</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| overflow: hidden; | |
| font-family: monospace; | |
| background: #000; | |
| } | |
| canvas { display: block; } | |
| :root { | |
| --hud-bg: rgba(14, 20, 28, 0.55); | |
| --hud-border: rgba(120, 200, 255, 0.55); | |
| --hud-glow: 0 0 18px rgba(80, 180, 255, 0.35); | |
| --accent: #34d399; /* green */ | |
| --accent2: #60a5fa; /* blue */ | |
| --text: #e8f0ff; | |
| --muted: rgba(200, 230, 255, 0.65); | |
| } | |
| #hud { | |
| position: absolute; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| pointer-events: none; | |
| color: white; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.8); | |
| } | |
| #crosshair { | |
| position: absolute; | |
| top: 50%; left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 0; height: 0; | |
| } | |
| .crosshair-arm { | |
| position: absolute; | |
| background: rgba(255,255,255,0.85); | |
| box-shadow: 0 0 6px rgba(255,255,255,0.5); | |
| } | |
| .arm-h { height: 2px; } | |
| .arm-v { width: 2px; } | |
| /* Hitmarker (X) */ | |
| .hit-arm { | |
| position: absolute; | |
| height: 2px; | |
| background: rgba(255,255,255,0.95); | |
| box-shadow: 0 0 6px rgba(255,255,255,0.6); | |
| opacity: 0; /* driven by JS */ | |
| transform-origin: 50% 50%; | |
| } | |
| /* HUD Cards */ | |
| .hud-card { | |
| position: absolute; | |
| padding: 12px 14px; | |
| background: var(--hud-bg); | |
| border: 1px solid var(--hud-border); | |
| border-radius: 10px; | |
| box-shadow: var(--hud-glow); | |
| backdrop-filter: blur(6px); | |
| color: var(--text); | |
| pointer-events: none; | |
| } | |
| .hud-title { font-size: 12px; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 6px; } | |
| .hud-value { font-size: 26px; font-weight: 700; color: #fff; } | |
| .tl { top: 18px; left: 20px; } | |
| .tr { top: 18px; right: 20px; } | |
| .bl { bottom: 20px; left: 20px; } | |
| .br { bottom: 20px; right: 20px; } | |
| /* Health gauge */ | |
| #ui-health { width: 360px; padding: 14px 16px; } | |
| #health-bar { | |
| position: relative; | |
| width: 100%; height: 18px; | |
| background: linear-gradient(180deg, rgba(20,30,36,0.9), rgba(12,16,22,0.9)); | |
| border: 1px solid rgba(80, 120, 140, 0.55); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| box-shadow: inset 0 0 10px rgba(0,0,0,0.45); | |
| } | |
| #health-fill { | |
| position: absolute; left: 0; top: 0; bottom: 0; width: 60%; | |
| background: linear-gradient(90deg, rgba(34,197,94,0.85), rgba(16,185,129,0.95)); | |
| box-shadow: 0 0 12px rgba(34,197,94,0.55); | |
| } | |
| #health-stripes { | |
| position: absolute; inset: 0; | |
| background: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 6px, transparent 6px, transparent 12px); | |
| pointer-events: none; | |
| } | |
| #health-text { font-size: 16px; color: #eafff1; text-shadow: 0 0 6px rgba(34,197,94,0.6); } | |
| #health-label { margin-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; } | |
| #health-label .hud-title { margin: 0; } | |
| /* Ammo */ | |
| #ui-ammo { min-width: 220px; text-align: right; } | |
| #ammo { font-size: 40px; font-weight: 800; color: #e6f7ff; text-shadow: 0 0 8px rgba(96,165,250,0.6); } | |
| #ammo:before { content: 'AMMO'; display: block; font-size: 12px; color: var(--muted); letter-spacing: 1.5px; margin-bottom: 6px; text-align: right; } | |
| /* Score */ | |
| #ui-score { min-width: 160px; } | |
| #score:before { content: 'SCORE'; display: block; font-size: 12px; color: var(--muted); letter-spacing: 1.5px; margin-bottom: 6px; } | |
| #score { font-size: 28px; font-weight: 800; color: #fff; } | |
| /* Top-right stats */ | |
| #ui-topright { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } | |
| .mini-card { padding: 8px 10px; background: rgba(12,18,26,0.55); border: 1px solid rgba(120, 200, 255, 0.35); border-radius: 8px; } | |
| .mini-card .label { font-size: 11px; color: var(--muted); letter-spacing: 1.2px; } | |
| .mini-card .value { font-size: 22px; font-weight: 700; color: #fff; } | |
| #overlay { | |
| position: absolute; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| display: flex; align-items: center; justify-content: center; | |
| background: rgba(0,0,0,0.7); | |
| pointer-events: auto; cursor: pointer; | |
| } | |
| #overlay-content { text-align: center; color: white; font-size: 24px; } | |
| #overlay-content h1 { margin: 20px 0; } | |
| #overlay-content p { margin: 10px 0; font-size: 18px; } | |
| .hidden { display: none ; } | |
| #wave-banner { | |
| position: absolute; | |
| top: 40%; left: 50%; transform: translate(-50%, -50%); | |
| font-size: 48px; color: #ff0; | |
| text-shadow: 3px 3px 6px rgba(0,0,0,0.9); | |
| opacity: 0; transition: opacity 0.5s; | |
| } | |
| #wave-banner.show { opacity: 1; } | |
| #damage-overlay { | |
| position: absolute; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| pointer-events: none; | |
| background: radial-gradient(ellipse at center, rgba(255,0,0,0.0) 40%, rgba(255,0,0,0.35) 80%, rgba(255,0,0,0.7) 100%); | |
| opacity: 0; | |
| } | |
| #heal-overlay { | |
| position: absolute; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| pointer-events: none; | |
| background: radial-gradient(ellipse at center, rgba(0,255,128,0.0) 40%, rgba(0,255,128,0.28) 80%, rgba(0,255,128,0.55) 100%); | |
| opacity: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="hud"> | |
| <!-- Score Top-Left --> | |
| <div id="ui-score" class="hud-card tl"> | |
| <div class="hud-value" id="score">0</div> | |
| </div> | |
| <!-- Wave + Enemies Top-Right --> | |
| <div id="ui-topright" class="hud-card tr"> | |
| <div class="mini-card"> | |
| <div class="label">WAVE</div> | |
| <div class="value" id="wave">1</div> | |
| </div> | |
| <div class="mini-card"> | |
| <div class="label">ENEMIES</div> | |
| <div class="value" id="enemies">0</div> | |
| </div> | |
| <div class="mini-card"> | |
| <div class="label">FPS</div> | |
| <div class="value" id="fps">-</div> | |
| </div> | |
| <div class="mini-card"> | |
| <div class="label">GRENADES</div> | |
| <div class="value" id="grenades">0</div> | |
| </div> | |
| </div> | |
| <!-- Health Bottom-Left --> | |
| <div id="ui-health" class="hud-card bl"> | |
| <div id="health-label"><span class="hud-title">HEALTH</span><span id="health-text">100</span></div> | |
| <div id="health-bar"> | |
| <div id="health-fill" style="width: 100%"></div> | |
| <div id="health-stripes"></div> | |
| </div> | |
| </div> | |
| <!-- Ammo Bottom-Right --> | |
| <div id="ui-ammo" class="hud-card br"> | |
| <div class="hud-value" id="ammo">0/∞</div> | |
| </div> | |
| <div id="crosshair"> | |
| <div id="ch-left" class="crosshair-arm arm-h"></div> | |
| <div id="ch-right" class="crosshair-arm arm-h"></div> | |
| <div id="ch-top" class="crosshair-arm arm-v"></div> | |
| <div id="ch-bottom" class="crosshair-arm arm-v"></div> | |
| <div id="ch-hit-a1" class="hit-arm"></div> | |
| <div id="ch-hit-a2" class="hit-arm"></div> | |
| <div id="ch-hit-b1" class="hit-arm"></div> | |
| <div id="ch-hit-b2" class="hit-arm"></div> | |
| </div> | |
| <div id="wave-banner"></div> | |
| <div id="heal-overlay"></div> | |
| <div id="damage-overlay"></div> | |
| </div> | |
| <div id="overlay"> | |
| <div id="overlay-content"> | |
| <h1>Orcs In The Forest</h1> | |
| <p>Click to Start</p> | |
| <p style="font-size: 14px;">Move: WASD | Look: Mouse | Fire: Click | Reload: R | Grenade: Hold G then release | Crouch: C | Light: F | Pause: ESC</p> | |
| </div> | |
| </div> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "three": "https://unpkg.com/three@0.160.0/build/three.module.js", | |
| "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/" | |
| } | |
| } | |
| </script> | |
| <script type="module" src="src/main.js"></script> | |
| </body> | |
| </html> | |