deepseek
764da2ee6c
- Zero-dependency Node server: HTTP static + hand-rolled RFC6455 WebSocket + 20Hz authoritative simulation - Seeded island worldgen (tiles, forest decor, spawns) - 4 playable species, needs (food/water/stamina), rest, growth stages Hatchling->Apex - AI fauna: critters, fish shoals, Dryosaurus/Psittacosaurus herds; carcass feasting - PvP with knockback, kill feed, chat, leaderboard, minimap, day/night cycle - True top-down procedural dino renderer shared by menu cards and in-game - Developer mode (` key): god-mode, x6 XP, instant evolve, spawn AI, Alt+Click tp - Headless smoke tests, real-browser visual tests, pixel match checks
88 lines
3.0 KiB
HTML
88 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
<title>Dino Isle Online</title>
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='80' font-size='80'>🦖</text></svg>">
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
<body>
|
|
<canvas id="game"></canvas>
|
|
|
|
<!-- ============ MAIN MENU ============ -->
|
|
<div id="menu" class="overlay">
|
|
<div class="menu-box">
|
|
<h1 class="title">🦖 DINO ISLE <span>ONLINE</span></h1>
|
|
<p class="subtitle">Survive. Eat. Grow. Devour the others.</p>
|
|
|
|
<div class="row">
|
|
<input id="nameInput" maxlength="16" placeholder="Your dino name…" autocomplete="off">
|
|
</div>
|
|
|
|
<div id="dinoCards" class="cards"></div>
|
|
|
|
<button id="playBtn" class="btn-play">ENTER THE ISLAND</button>
|
|
|
|
<div class="controls-help">
|
|
<b>WASD / Arrows</b> move • <b>Shift</b> sprint •
|
|
<b>Space / Click</b> bite • <b>E (hold)</b> eat • graze • drink •
|
|
<b>R</b> rest • <b>Enter</b> chat
|
|
</div>
|
|
<div id="menuStatus" class="menu-status"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============ HUD ============ -->
|
|
<div id="hud" class="hidden">
|
|
<!-- vitals bottom-left -->
|
|
<div id="vitals">
|
|
<div class="bar"><div class="fill hp" id="barHp"></div><span>❤ HP</span></div>
|
|
<div class="bar"><div class="fill stam" id="barStam"></div><span>⚡ Stamina</span></div>
|
|
<div class="bar"><div class="fill food" id="barFood"></div><span>🍖 Food</span></div>
|
|
<div class="bar"><div class="fill water" id="barWater"></div><span>💧 Water</span></div>
|
|
<div class="growth-row">
|
|
<span id="stageLabel">Hatchling</span>
|
|
<div class="bar growth"><div class="fill growth" id="barGrowth"></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- minimap top-right -->
|
|
<canvas id="minimap" width="164" height="164"></canvas>
|
|
<div id="onlineTag">🌍 <span id="onlineCount">1</span> online</div>
|
|
|
|
<!-- leaderboard top-left -->
|
|
<div id="leaderboard">
|
|
<h3>🏆 Apex of the Isle</h3>
|
|
<ol id="lbList"></ol>
|
|
</div>
|
|
|
|
<!-- kill feed -->
|
|
<div id="killFeed"></div>
|
|
|
|
<!-- chat -->
|
|
<div id="chatBox">
|
|
<div id="chatLog"></div>
|
|
<input id="chatInput" maxlength="120" placeholder="Press Enter to chat…" autocomplete="off">
|
|
</div>
|
|
|
|
<div id="hint">Space: bite · E hold: eat/drink · R: rest · Shift: sprint · M: mute</div>
|
|
<div id="devBadge" class="hidden">🛠 DEV MODE — ` off · 1 heal · 2 grow · 3 spawn AI · Alt+Click tp</div>
|
|
<div id="banner" class="hidden"></div>
|
|
<div id="dmgVignette"></div>
|
|
</div>
|
|
|
|
<!-- ============ DEATH SCREEN ============ -->
|
|
<div id="deathScreen" class="overlay hidden">
|
|
<div class="death-box">
|
|
<h1>💀 YOU WERE DEVOURED</h1>
|
|
<p id="deathBy">by …</p>
|
|
<div id="deathStats"></div>
|
|
<button id="respawnBtn" class="btn-play">RESPAWN</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/client.js"></script>
|
|
</body>
|
|
</html>
|