✨ Games & Demos

Before diving into web game development, you will probably wonder how far you can go with JavaScript and WebGL. Here is a collection of “HTML5 games” and tech demos that I find particularly impressive and polished.

All enginesThree.jsPlayCanvasBabylon.jsOthersAll genresShootingAdventureStrategyRacingCasualOthers

Tech demos

• Infinite World by Bruno Simon (source)
• FPS controls by Michal Zalobny (source)
• Spellcaster by Arno Di Nunzio
• three-landscape by Nathan Pointer (source)
• Procedural City by N8 (source)
• Minecraft Clone by N8 (source)
• Infinitown by Little Workshop
• BugBall by John Cotterell (source)
• WindLand by Anderson Mancini (article)

Metaverses

While not technically games, these web-based metaverses are built on top of WebGL and share many of the same challenges and solutions as games.

• Hyperfy (docs)
• Sougen (info)
• The Paraverse
• Third Room by Matrix (info, source – discontinued)
• Dverso (info)
• oncyber and the Project OO engine (docs)

WebXR

• Project Flowerbed by Meta (info, talk, source)
• Spatial Fusion by Meta
• Above Par-adowski by Paradowski (source)
• The Escape Artist by Paradowski (video)
• Wonderbricks by Novelab
• Archery Evolution by Vhite Rabbit XR (video)

WebAssembly

While it is not the focus of this website, it is worth mentioning that it is possible to run native code in the browser using WebAssembly. Here are some examples to give you an idea of the kind of performance you can expect from WebAssembly:

• Flyff Universe by Gala
• Doom 3 by Gabriel Cuvillier (article)
• AngryBots by Jonas (Unity)
• BananaBread (custom engine)
• Townscaper (80MB) by Oskar Stålberg
• Dead Secret Circle Web by Robot Invader (video)

DOM-based games

Instead of drawing graphics on a canvas, you can create 2D games with DOM elements (divs, basically). Manipulating the DOM and using a lot of CSS effects can be expensive for the browser, particularly if you have many elements, but depending on your use case, it might work for you! Here are some examples:

• Kill The King by Jamie Coulter
• Hack, CodepenLife, Toxic by Jamie Coulter
• Danger Crew (talk 1, talk 2) by Drew Conley and Glenn LaBarre
• Ciabatta’s Revenge (video) by Drew Conley
• Athena Crisis (upcoming) by Christoph Nakazawa
• Wilderplace (Steam-only, blog, talk) by Saman Bemel Benrud
• Match City (source) by Dennis Smuda
• The Mine and The Caretaker are pure CSS (no JS) games by Jamie Coulter

To make this kind of game, you can use a library like React, Vue, or Svelte to help architect your code.