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>Retro Neon Breakout - Arcade Canvas Game</title>
7 <meta name="description" content="A modern retro arcade Breakout game with glowing neon graphics, custom WebAudio sound synthesis, particle explosion effects, multiple level scaling, and unit testing suite.">
8 <link rel="stylesheet" href="style.css">
9</head>
10<body>
11
12 <div class="game-wrapper">
13 <header>
14 <div class="title-badge">
15 NEON <span>BREAKOUT</span>
16 </div>
17 <div>
18 <button id="muteBtn" class="btn-toggle">🔊 Sound</button>
19 </div>
20 </header>
21
22 <div class="hud-panel">
23 <div class="hud-item">
24 <span class="hud-label">Score</span>
25 <span id="scoreVal" class="hud-value">0</span>
26 </div>
27 <div class="hud-item">
28 <span class="hud-label">High Score</span>
29 <span id="highScoreVal" class="hud-value highlight">0</span>
30 </div>
31 <div class="hud-item">
32 <span class="hud-label">Level</span>
33 <span id="levelVal" class="hud-value">1</span>
34 </div>
35 <div class="hud-item">
36 <span class="hud-label">Lives</span>
37 <div id="livesContainer" class="lives-box">
38 <span class="life-icon active">⚡</span>
39 <span class="life-icon active">⚡</span>
40 <span class="life-icon active">⚡</span>
41 </div>
42 </div>
43 </div>
44
45 <div class="canvas-container">
46 <canvas id="gameCanvas" width="800" height="600"></canvas>
47
48
49 <div id="startOverlay" class="overlay">
50 <h1 class="overlay-title">NEON BREAKOUT</h1>
51 <div class="overlay-card">
52 <div class="controls-guide">
53 <div class="control-item">
54 <span class="key-cap">←</span> <span class="key-cap">→</span> / <span class="key-cap">A</span> <span class="key-cap">D</span>
55 <span>Move Paddle</span>
56 </div>
57 <div class="control-item">
58 <span class="key-cap">Mouse</span> / <span class="key-cap">Touch</span>
59 <span>Move Paddle</span>
60 </div>
61 <div class="control-item">
62 <span class="key-cap">Space</span> / <span class="key-cap">Click</span>
63 <span>Launch Ball</span>
64 </div>
65 <div class="control-item">
66 <span class="key-cap">P</span> / <span class="key-cap">Esc</span>
67 <span>Pause Game</span>
68 </div>
69 <div class="control-item">
70 <span class="key-cap">M</span>
71 <span>Toggle Mute</span>
72 </div>
73 </div>
74 </div>
75 <button id="startBtn" class="btn-primary">PRESS SPACE TO PLAY</button>
76 </div>
77
78
79 <div id="pauseOverlay" class="overlay hidden">
80 <h2 class="overlay-title cyan">PAUSED</h2>
81 <p style="margin-bottom: 1.5rem; color: var(--text-muted); font-family: 'Orbitron', sans-serif;">Take a breath, warrior.</p>
82 <button id="resumeBtn" class="btn-primary">RESUME GAME</button>
83 </div>
84
85
86 <div id="gameOverOverlay" class="overlay hidden">
87 <h2 class="overlay-title">GAME OVER</h2>
88 <div class="overlay-card">
89 <div id="newRecordBadge" class="record-badge hidden">🏆 NEW HIGH SCORE!</div>
90 <div class="stats-row">
91 <div class="stat-box">
92 <span class="stat-label">FINAL SCORE</span>
93 <span id="finalScore" class="stat-val">0</span>
94 </div>
95 <div class="stat-box">
96 <span class="stat-label">HIGH SCORE</span>
97 <span id="finalHighScore" class="stat-val">0</span>
98 </div>
99 </div>
100 </div>
101 <button id="restartBtn" class="btn-primary">PLAY AGAIN</button>
102 </div>
103
104
105 <div id="levelOverlay" class="overlay hidden">
106 <h2 class="overlay-title cyan">LEVEL CLEAR!</h2>
107 <div id="levelBanner" style="font-family: 'Press Start 2P', monospace; font-size: 1.2rem; color: var(--yellow); margin-bottom: 1.5rem;">
108 GET READY FOR LEVEL 2
109 </div>
110 </div>
111 </div>
112
113 <footer>
114 <span>⚡ Antigravity Retro Arcade Series</span>
115 <span>•</span>
116 <span>Press P to Pause</span>
117 <span>•</span>
118 <span>Press M to Mute</span>
119 </footer>
120 </div>
121
122 <script src="game.js"></script>
123</body>
124</html>
125
Discussion
No comments yet. Start the discussion. Recorded by @patrick-toulme.