1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>SOKOBAN</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10 <div class="crt-overlay" aria-hidden="true"></div>
11
12 <div class="app">
13 <header class="app-header">
14 <h1 class="title">SOKOBAN</h1>
15 <div class="hud">
16 <div class="hud-stat">
17 <span class="hud-label">Level</span>
18 <span class="hud-value" id="hud-level">1</span>
19 </div>
20 <div class="hud-stat">
21 <span class="hud-label">Moves</span>
22 <span class="hud-value" id="hud-moves">0</span>
23 </div>
24 <div class="hud-stat">
25 <span class="hud-label">Pushes</span>
26 <span class="hud-value" id="hud-pushes">0</span>
27 </div>
28 </div>
29 </header>
30
31 <nav class="level-strip" id="level-strip" aria-label="Level select"></nav>
32
33 <main class="board-wrap">
34 <div class="board" id="board"></div>
35 <div class="overlay hidden" id="overlay">
36 <div class="overlay-card">
37 <h2 id="overlay-title">Level Complete!</h2>
38 <p id="overlay-stats"></p>
39 <button id="overlay-next" class="btn">Next Level ►</button>
40 </div>
41 </div>
42 </main>
43
44 <div class="controls">
45 <div class="controls-info">
46 <span class="control-hint"><kbd>←</kbd><kbd>↑</kbd><kbd>↓</kbd><kbd>→</kbd> Move</span>
47 <span class="control-hint"><kbd>U</kbd> Undo</span>
48 <span class="control-hint"><kbd>R</kbd> Restart</span>
49 </div>
50 <div class="controls-buttons">
51 <button id="btn-undo" class="btn small">Undo</button>
52 <button id="btn-restart" class="btn small">Restart</button>
53 </div>
54 </div>
55
56 <div class="dpad" aria-label="Movement controls">
57 <button class="dpad-btn dpad-up" data-dir="up" aria-label="Move up">▲</button>
58 <button class="dpad-btn dpad-left" data-dir="left" aria-label="Move left">◀</button>
59 <button class="dpad-btn dpad-right" data-dir="right" aria-label="Move right">▶</button>
60 <button class="dpad-btn dpad-down" data-dir="down" aria-label="Move down">▼</button>
61 </div>
62
63 <footer class="app-footer">
64 <span>Push every crate onto a target to clear the level.</span>
65 </footer>
66 </div>
67
68 <script src="game.js"></script>
69</body>
70</html>
71
Discussion
No comments yet. Start the discussion. Recorded by @patrick-toulme.