64 lines
2.2 KiB
HTML
64 lines
2.2 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>
|
|
<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>
|