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 - Retro Warehouse Puzzle</title>
7
8 <link rel="preconnect" href="https://fonts.googleapis.com">
9 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10 <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,500;0,700;1,400&family=Press+Start+2P&display=swap" rel="stylesheet">
11 <link rel="stylesheet" href="style.css">
12</head>
13<body>
14
15 <div class="crt-overlay"></div>
16
17 <div class="app-container">
18
19 <header class="game-header">
20 <div class="logo-container">
21 <span class="logo-icon">📦</span>
22 <h1 class="logo-title">SOKOBAN</h1>
23 <span class="logo-badge">RETRO EDITION</span>
24 </div>
25
26 <div class="header-controls">
27 <button id="btn-sound" class="btn-icon" title="Toggle Sound (M)" aria-label="Toggle Sound">
28 <span id="sound-icon">🔊</span>
29 </button>
30 <button id="btn-crt" class="btn-icon" title="Toggle Scanlines Effect" aria-label="Toggle Scanlines">
31 <span>📺</span>
32 </button>
33 <button id="btn-help" class="btn-icon" title="How to Play (?)" aria-label="How to Play">
34 <span>❓</span>
35 </button>
36 </div>
37 </header>
38
39
40 <section class="level-strip-container">
41 <div class="strip-label">
42 <span>LEVEL SELECT</span>
43 <span id="level-progress-text" class="progress-badge">0 / 8 CLEAR</span>
44 </div>
45 <div id="level-strip" class="level-strip">
46
47 </div>
48 </section>
49
50
51 <main class="game-area">
52
53 <div class="hud-bar">
54 <div class="hud-card level-info">
55 <span class="hud-label">CURRENT LEVEL</span>
56 <span id="hud-level-title" class="hud-value">1. First Steps</span>
57 </div>
58
59 <div class="hud-card stats">
60 <div class="stat-item">
61 <span class="stat-icon">👣</span>
62 <span class="stat-label">MOVES:</span>
63 <span id="stat-moves" class="stat-value">0</span>
64 </div>
65 <div class="stat-item">
66 <span class="stat-icon">📦</span>
67 <span class="stat-label">PUSHES:</span>
68 <span id="stat-pushes" class="stat-value">0</span>
69 </div>
70 <div class="stat-item">
71 <span class="stat-icon">⏱️</span>
72 <span class="stat-label">TIME:</span>
73 <span id="stat-time" class="stat-value">00:00</span>
74 </div>
75 </div>
76
77 <div class="hud-card best-score">
78 <span class="hud-label">BEST RECORD</span>
79 <span id="hud-best-moves" class="hud-value flex-center">
80 <span>--</span>
81 </span>
82 </div>
83 </div>
84
85
86 <div class="board-wrapper">
87 <div id="game-board" class="game-board">
88
89 </div>
90 </div>
91
92
93 <div class="action-bar">
94 <button id="btn-undo" class="btn btn-action" title="Undo Move (U)">
95 <span class="btn-icon-symbol">↩️</span>
96 <span>UNDO <kbd class="kbd-hint">U</kbd></span>
97 </button>
98 <button id="btn-restart" class="btn btn-action btn-danger" title="Restart Level (R)">
99 <span class="btn-icon-symbol">🔄</span>
100 <span>RESTART <kbd class="kbd-hint">R</kbd></span>
101 </button>
102 <div class="nav-level-btns">
103 <button id="btn-prev-level" class="btn btn-secondary" title="Previous Level">◀ PREV</button>
104 <button id="btn-next-level" class="btn btn-secondary" title="Next Level">NEXT ▶</button>
105 </div>
106 </div>
107
108
109 <div class="mobile-dpad-container">
110 <div class="dpad-grid">
111 <button id="dpad-up" class="dpad-btn dpad-up" aria-label="Up">▲</button>
112 <button id="dpad-left" class="dpad-btn dpad-left" aria-label="Left">◀</button>
113 <button id="dpad-down" class="dpad-btn dpad-down" aria-label="Down">▼</button>
114 <button id="dpad-right" class="dpad-btn dpad-right" aria-label="Right">▶</button>
115 <div class="dpad-center"></div>
116 </div>
117 </div>
118 </main>
119
120
121 <footer class="game-footer">
122 <div class="legend-items">
123 <div class="legend-item"><span class="legend-tile wall-legend"></span> Wall</div>
124 <div class="legend-item"><span class="legend-tile box-legend"></span> Crate</div>
125 <div class="legend-item"><span class="legend-tile goal-legend"></span> Target</div>
126 <div class="legend-item"><span class="legend-tile box-goal-legend"></span> Box on Goal</div>
127 <div class="legend-item"><span class="legend-tile player-legend"></span> Player</div>
128 </div>
129 <div class="keyboard-legend">
130 <span>Controls: <kbd>▲▼◀▶</kbd> / <kbd>WASD</kbd> Move & Push | <kbd>U</kbd> Undo | <kbd>R</kbd> Restart</span>
131 </div>
132 </footer>
133 </div>
134
135
136 <div id="modal-win" class="modal-overlay hidden">
137 <div class="modal-content victory-card">
138 <div class="modal-header">
139 <div class="victory-crown">🏆</div>
140 <h2>LEVEL COMPLETE!</h2>
141 <p id="win-level-name" class="win-level-sub">Level 1: First Steps</p>
142 </div>
143
144 <div class="star-rating" id="win-stars">
145 <span class="star lit">★</span>
146 <span class="star lit">★</span>
147 <span class="star lit">★</span>
148 </div>
149
150 <div class="win-stats-grid">
151 <div class="win-stat-box">
152 <span class="win-stat-title">MOVES</span>
153 <span id="win-moves-val" class="win-stat-num">0</span>
154 <span id="win-moves-par" class="win-stat-par">Par: 0</span>
155 </div>
156 <div class="win-stat-box">
157 <span class="win-stat-title">PUSHES</span>
158 <span id="win-pushes-val" class="win-stat-num">0</span>
159 <span id="win-pushes-par" class="win-stat-par">Par: 0</span>
160 </div>
161 <div class="win-stat-box">
162 <span class="win-stat-title">TIME</span>
163 <span id="win-time-val" class="win-stat-num">00:00</span>
164 <span id="win-new-record" class="badge-record hidden">NEW BEST!</span>
165 </div>
166 </div>
167
168 <div class="modal-actions">
169 <button id="btn-win-replay" class="btn btn-secondary">REPLAY</button>
170 <button id="btn-win-next" class="btn btn-primary btn-glow">NEXT LEVEL ▶</button>
171 </div>
172 </div>
173 </div>
174
175
176 <div id="modal-game-complete" class="modal-overlay hidden">
177 <div class="modal-content victory-card grand-victory">
178 <div class="modal-header">
179 <div class="victory-crown sparkle-anim">👑</div>
180 <h2 class="gold-text">PUZZLE MASTER!</h2>
181 <p class="win-level-sub">You solved all 8 Sokoban levels!</p>
182 </div>
183
184 <div class="grand-summary" id="grand-summary-text">
185
186 </div>
187
188 <div class="modal-actions">
189 <button id="btn-grand-restart" class="btn btn-primary btn-glow">PLAY AGAIN 🔄</button>
190 </div>
191 </div>
192 </div>
193
194
195 <div id="modal-help" class="modal-overlay hidden">
196 <div class="modal-content help-card">
197 <div class="modal-header">
198 <h2>HOW TO PLAY</h2>
199 <button id="btn-close-help" class="btn-close">×</button>
200 </div>
201 <div class="help-body">
202 <div class="help-section">
203 <h3>🎯 Objective</h3>
204 <p>Push all wooden crates 📦 onto designated glowing target goals 🎯. All targets must be covered simultaneously to complete the level.</p>
205 </div>
206 <div class="help-section">
207 <h3>🎮 Rules</h3>
208 <ul>
209 <li>You can only <strong>push</strong> crates (you cannot pull them).</li>
210 <li>You can only push <strong>one crate at a time</strong>.</li>
211 <li>Crates cannot be pushed into walls or other crates.</li>
212 <li>Avoid pushing crates into corners where they get stuck!</li>
213 </ul>
214 </div>
215 <div class="help-section">
216 <h3>⌨️ Controls</h3>
217 <div class="help-controls-grid">
218 <div><kbd>Arrow Keys</kbd> / <kbd>WASD</kbd></div><div>Move Player & Push Crates</div>
219 <div><kbd>U</kbd> or <kbd>Z</kbd></div><div>Undo last move</div>
220 <div><kbd>R</kbd></div><div>Restart current level</div>
221 <div><kbd>M</kbd></div><div>Toggle Sound effects</div>
222 </div>
223 </div>
224 </div>
225 </div>
226 </div>
227
228 <script src="game.js"></script>
229</body>
230</html>
231
Discussion
No comments yet. Start the discussion. Recorded by @patrick-toulme.