jay/havox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tsp

Browse Source
This commit is contained in:
John Gatward
2026-03-18 15:24:08 +00:00
parent 213cf5f535
commit 3cb8d5a14e
17 changed files with 1525 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
projects/thin_ice/thin_ice.html
View File

@@ -8,54 +8,63 @@
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="page">
<section class="hero">
<div class="title-group">
<h1>Thin Ice</h1>
<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>
A game inspired by the Club Penguin mini-game of the same name.
See if you can get a gold medal on all 6 levels by breaking every single tile of ice!
</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-container">
<div class="canvas-toolbar">
<p>Game</p>
<button id="fullscreenButton" class="action-button" type="button">Fullscreen</button>
</div>
<div class="canvas-frame">
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>
</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="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>
<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>
<textarea id="output" rows="8" aria-label="Runtime output"></textarea>
</article>
<div id="status" class="status">Downloading...</div>
<progress id="progress" value="0" max="100" hidden></progress>
<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>
<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>
</main>
<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>