Custom game engine
A requestAnimationFrame-based loop for coordinating game updates and rendering.
VANILLA JAVASCRIPT · BROWSER GAME
Back to the fundamentals.
Block by block.
A browser game built from scratch with JavaScript and the DOM. No framework. No canvas.
BROWSER EXPERIMENT/04
DOMNO CANVAS
JSNO FRAMEWORK
Visual study · DOM-rendered blocksIllustrative project map · not an app screenshot
The project
A Tetris-style browser game built with plain JavaScript, HTML, and DOM elements instead of a framework or canvas. The work covers a custom game loop, responsive controls, pause/restart interactions, and a live scoreboard.
What I built
The project focuses on what the browser can do with a small, direct implementation and deliberate rendering work.
Keyboard controls
Smooth, non-repeating keyboard controls, with pause, continue, and restart interactions.
Live scoreboard
An original project scoreboard with a timer, score, and lives.
Rendering investigation
Browser DevTools profiling and rendering optimisation, including attention to composite layers.
Technical focus
The original project uses DOM rendering and requestAnimationFrame with a 60 FPS target. I profiled the browser’s rendering work and kept composite layers to a minimum. That is a project target and documented development work, not a guarantee of identical performance on every device.
InputKeyboard interactions
Game looprequestAnimationFrame
DOMBrowser-rendered blocks
Conceptual component map
Fundamentals over dependencies. The original project emphasises JavaScript, browser events, DOM updates, and performance inspection rather than framework APIs.
Explore further
The original project source was not imported into this site. A separate, newly written falling-blocks demo is included below so the portfolio still has a real, playable interaction.
A small break. A real game.
Try a fresh falling-blocks demo built specifically for this portfolio. It uses a DOM grid and a requestAnimationFrame loop. This is new demo code, not the original Tetris project source.
Project descriptions follow my October 2026 CV. Diagrams are explanatory illustrations; they are not screenshots of the original applications.