85 lines
3.2 KiB
HTML
85 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||
<title>slither.ts</title>
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🐍</text></svg>">
|
||
<link rel="stylesheet" href="./style.css">
|
||
</head>
|
||
<body>
|
||
<canvas id="game"></canvas>
|
||
|
||
<!-- ======================= HUD ======================= -->
|
||
<div id="hud" class="hidden">
|
||
<div id="leaderboard" class="panel">
|
||
<div class="lb-title">Leaderboard</div>
|
||
<div id="lb-rows"></div>
|
||
</div>
|
||
<div id="scorebar">
|
||
<span id="score">0</span>
|
||
<span id="score-sub">rank #– · best 0 · kills 0</span>
|
||
</div>
|
||
<div id="hint">move: mouse · boost: <b>SPACE</b> / click</div>
|
||
<canvas id="minimap" width="180" height="180"></canvas>
|
||
</div>
|
||
|
||
<!-- ======================= MAIN MENU ======================= -->
|
||
<div id="menu">
|
||
<div class="menu-box">
|
||
<h1 class="title">slither<span class="title-dot">.</span>ts</h1>
|
||
<div class="subtitle">a typescript slither.io clone</div>
|
||
<input id="nick" maxlength="16" placeholder="Nickname" autocomplete="off" spellcheck="false">
|
||
<button id="play" class="btn btn-play">Play</button>
|
||
<button id="settings-btn" class="btn btn-ghost">Settings</button>
|
||
<div id="menu-error" class="error hidden"></div>
|
||
</div>
|
||
<button id="fullscreen-btn" title="Fullscreen">⛶</button>
|
||
<div class="footer">eat pellets · grow huge · cut others off · don't touch the red border</div>
|
||
</div>
|
||
|
||
<!-- ======================= SETTINGS ======================= -->
|
||
<div id="settings" class="hidden">
|
||
<div class="menu-box">
|
||
<h2 class="title-small">Settings</h2>
|
||
<label class="row">
|
||
<span>Sound volume</span>
|
||
<input id="opt-volume" type="range" min="0" max="100" value="60">
|
||
</label>
|
||
<label class="row">
|
||
<span>Graphics quality</span>
|
||
<select id="opt-quality">
|
||
<option value="high">High</option>
|
||
<option value="low">Low</option>
|
||
</select>
|
||
</label>
|
||
<label class="row">
|
||
<span>Show minimap</span>
|
||
<input id="opt-minimap" type="checkbox" checked>
|
||
</label>
|
||
<label class="row">
|
||
<span>Fullscreen</span>
|
||
<input id="opt-fullscreen" type="checkbox">
|
||
</label>
|
||
<button id="settings-back" class="btn btn-play">Back</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ======================= DEATH SCREEN ======================= -->
|
||
<div id="death" class="hidden">
|
||
<div class="menu-box death-box">
|
||
<h2 class="title-small">You died!</h2>
|
||
<div class="death-stats">
|
||
<div><span class="stat-label">Score</span><span id="d-score" class="stat-value">0</span></div>
|
||
<div><span class="stat-label">Best</span><span id="d-best" class="stat-value">0</span></div>
|
||
<div><span class="stat-label">Kills</span><span id="d-kills" class="stat-value">0</span></div>
|
||
</div>
|
||
<button id="respawn" class="btn btn-play">Respawn</button>
|
||
<div class="hint-small">press <b>Enter</b> to respawn instantly</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="module" src="./js/client/src/main.js"></script>
|
||
</body>
|
||
</html>
|