formatting
This commit is contained in:
@@ -1,72 +1,91 @@
|
||||
<!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>
|
||||
<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>
|
||||
<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">
|
||||
<section>
|
||||
<p>
|
||||
See if you can get a gold medal on all 6 levels by breaking every single tile of ice!
|
||||
You start on safe ice, breaking ice where you walk, trying to reach
|
||||
the finish tile before trapping yourself.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<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 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>
|
||||
|
||||
<div class="canvas-shell">
|
||||
<canvas id="canvas" class="emscripten" aria-label="Thin Ice game canvas" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
<footer>
|
||||
<p>Built with C++ & Raylib, compiled to WASM with emscripten.</p>
|
||||
</footer>
|
||||
</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>
|
||||
<script src="script.js"></script>
|
||||
<script async src="thin_ice.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user