A small Bomberman game built with plain HTML, CSS, and vanilla JavaScript — no
frameworks, no canvas. Everything is rendered with DOM elements and SVG sprites,
animated through a single requestAnimationFrame loop that targets a smooth 60 FPS
(there's a live FPS counter in the HUD to prove it).
- Move around a 13×11 grid, drop bombs, and blow up the enemies.
- Clear all enemies to win. You lose if you run out of lives or the timer hits zero.
- Start with 3 lives and a 120-second countdown.
- Three enemies spawn in the far corners; you start in the top-left.
| Key | Action |
|---|---|
| Arrow keys | Move |
| Space | Place a bomb |
| ⏸ button | Pause / resume |
| 🔄 button | Restart |
- 60 FPS game loop on
requestAnimationFramewith delta-time movement, so speed stays consistent regardless of frame rate. - Live HUD showing time remaining, score, lives, and current FPS.
- Pause and Game Over overlays (win / lose states).
- SVG sprites for the player, enemies, bombs, and explosions, referenced via
<use>and promoted to GPU layers (will-change: transform) for jank-free motion. - Frame-time clamping so a tab switch or slow frame can't tunnel the player through walls.
The game uses ES modules, so it needs to be served over HTTP (opening index.html
directly with file:// won't load the modules). Any static server works:
# Python 3
python -m http.server 8000Then open http://localhost:8000 in your browser. (VS Code's Live Server extension works too.)
index.html Layout + the SVG sprite sheet (defined once, reused via <use>)
style.css Board, HUD, tiles, and overlay styling
js/
main.js Game loop, state, win/lose logic, FPS counter
map.js Grid, tiles, and destructible blocks
player.js Player movement and collision
enemy.js Enemy spawning and movement
bomb.js Bombs and explosions
input.js Keyboard input handling
hud.js HUD rendering (time / score / lives / FPS)
pause.js Pause and game-over overlays
sprites.js SVG sprite helper