92 lines
2.6 KiB
HTML
92 lines
2.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta
|
|
name="description"
|
|
content="Thin Ice - a cute pixel art winter puzzle game."
|
|
/>
|
|
<title>Thin Ice | havox</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<a href="/#projects" class="back-button">← Back</a>
|
|
|
|
<header>
|
|
<h1>Thin Ice</h1>
|
|
<p class="subtitle">Inspired by Club Penguin's Thin Ice mini-game.</p>
|
|
</header>
|
|
|
|
<section>
|
|
<p>
|
|
You start on safe ice, breaking ice where you walk, trying to reach
|
|
the finish tile before trapping yourself.
|
|
</p>
|
|
<div class="info-box">
|
|
<p>
|
|
See if you can get a gold medal on all 6 levels by breaking every
|
|
single tile of ice!
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="canvas-container">
|
|
<div class="canvas-toolbar">
|
|
<p>Game</p>
|
|
<button id="fullscreenButton" class="action-button" type="button">
|
|
Fullscreen
|
|
</button>
|
|
</div>
|
|
|
|
<div class="canvas-shell">
|
|
<canvas
|
|
id="canvas"
|
|
class="emscripten"
|
|
aria-label="Thin Ice game canvas"
|
|
oncontextmenu="event.preventDefault()"
|
|
tabindex="-1"
|
|
></canvas>
|
|
</div>
|
|
|
|
<div class="canvas-options">
|
|
<label
|
|
><input type="checkbox" id="resize" /> Resize canvas in
|
|
fullscreen</label
|
|
>
|
|
<label
|
|
><input type="checkbox" id="pointerLock" checked /> Lock pointer in
|
|
fullscreen</label
|
|
>
|
|
</div>
|
|
|
|
<div id="status" class="status">Downloading...</div>
|
|
<progress id="progress" value="0" max="100" hidden></progress>
|
|
|
|
<details>
|
|
<summary>Show console output</summary>
|
|
<label class="visually-hidden" for="output">Console output</label>
|
|
<textarea id="output" rows="8" readonly></textarea>
|
|
</details>
|
|
</div>
|
|
|
|
<section>
|
|
<h2>How to Play</h2>
|
|
<ul class="feature-list">
|
|
<li>Use WASM keys to move across the ice.</li>
|
|
<li>Plan ahead so you do not strand yourself on broken tiles.</li>
|
|
<li>Reach the end tile without falling into the water.</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<footer>
|
|
<p>Built with C++ & Raylib, compiled to WASM with emscripten.</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
<script async src="thin_ice.js"></script>
|
|
</body>
|
|
</html>
|