thin_ice

2026-03-17 22:04:36 +00:00
parent c50e97987b
commit 213cf5f535
29 changed files with 521 additions and 0 deletions
--- a/projects/thin_ice/thin_ice.html
+++ b/projects/thin_ice/thin_ice.html
@@ -0,0 +1,63 @@
+<!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>
+  <main class="page">
+    <section class="hero">
+      <div class="title-group">
+        <h1>Thin Ice</h1>
+        <p>
+          A game inspired by the Club Penguin mini-game of the same name.
+        </p>
+      </div>
+    </section>
+
+    <section class="layout">
+      <article class="panel game-shell" aria-label="Thin Ice game canvas">
+        <div class="status-row">
+          <div class="loading">
+            <div class="spinner" id="spinner" aria-hidden="true"></div>
+            <div id="status" role="status" aria-live="polite">Downloading...</div>
+          </div>
+          <progress id="progress" max="100" value="0" hidden></progress>
+        </div>
+
+        <div class="canvas-frame">
+          <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>
+        </div>
+
+        <div class="controls" id="controls">
+          <label><input type="checkbox" id="resize" /> Resize canvas</label>
+          <label><input type="checkbox" id="pointerLock" checked /> Lock/hide mouse pointer</label>
+          <button
+            class="btn"
+            type="button"
+            onclick='Module.requestFullscreen(document.getElementById("pointerLock").checked,document.getElementById("resize").checked)'>
+            Fullscreen
+          </button>
+        </div>
+
+        <textarea id="output" rows="8" aria-label="Runtime output"></textarea>
+      </article>
+
+      <aside class="panel sidebar" aria-label="How to play">
+        <h2>How to Play</h2>
+        <ul>
+          <li>Start on the first tile and plan your route before moving.</li>
+          <li>Reach the end tile while avoiding water and broken ice.</li>
+          <li>If you slip up, reset and try a smarter path.</li>
+        </ul>
+      </aside>
+    </section>
+  </main>
+
+  <script src="script.js"></script>
+  <script async src="thin_ice.js"></script>
+</body>
+</html>