โจย 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.
Tech demos
Infinite World (opens in a new tab) by Bruno Simon (opens in a new tab) (source (opens in a new tab))
FPS controls (opens in a new tab) by Michal Zalobny (opens in a new tab) (source (opens in a new tab))
Spellcaster (opens in a new tab) by Arno Di Nunzio (opens in a new tab)
three-landscape (opens in a new tab) by Nathan Pointer (opens in a new tab) (source (opens in a new tab))
Procedural City (opens in a new tab) by N8 (opens in a new tab) (source (opens in a new tab))
Minecraft Clone (opens in a new tab) by N8 (opens in a new tab) (source (opens in a new tab))
Infinitown (opens in a new tab) by Little Workshop (opens in a new tab)
BugBall (opens in a new tab) by John Cotterell (opens in a new tab) (source (opens in a new tab))
WindLand (opens in a new tab) by Anderson Mancini (opens in a new tab) (article (opens in a new tab))
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 (opens in a new tab) (docs (opens in a new tab))
Sougen (opens in a new tab) (info (opens in a new tab))
The Paraverse (opens in a new tab)
Third Room (opens in a new tab) by Matrix (opens in a new tab) (info (opens in a new tab), source (opens in a new tab))
Dverso (opens in a new tab) (info (opens in a new tab))
Ethereal Engine (opens in a new tab) (docs (opens in a new tab))
WebXR
Project Flowerbed (opens in a new tab) by Meta (info (opens in a new tab), talk (opens in a new tab), source (opens in a new tab))
Spatial Fusion (opens in a new tab) by Meta
Above Par-adowski (opens in a new tab) by Paradowski (opens in a new tab) (source (opens in a new tab))
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 (opens in a new tab) by Gala (opens in a new tab)
Doom 3 (opens in a new tab) by Gabriel Cuvillier (opens in a new tab) (article (opens in a new tab))
AngryBots (opens in a new tab) by Jonas (Unity (opens in a new tab))
BananaBread (opens in a new tab) (custom engine (opens in a new tab))
Townscaper (opens in a new tab) (80MB) by Oskar Stรฅlberg (opens in a new tab)
DOM-based games
Instead of drawing graphics on a canvas
, you can create 2D games with DOM elements (div
s, 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 (opens in a new tab) by Jamie Coulter (opens in a new tab)
Hack (opens in a new tab), CodepenLife (opens in a new tab), Toxic (opens in a new tab) by Jamie Coulter (opens in a new tab)
Danger Crew (opens in a new tab) (talk 1 (opens in a new tab), talk 2 (opens in a new tab)) by Drew Conley (opens in a new tab) and Glenn LaBarre (opens in a new tab)
Ciabatta's Revenge (opens in a new tab) (video (opens in a new tab)) by Drew Conley (opens in a new tab)
Athena Crisis (opens in a new tab) (upcoming) by Christoph Nakazawa (opens in a new tab)
Wilderplace (opens in a new tab) (Steam-only, blog (opens in a new tab), talk (opens in a new tab)) by Saman Bemel Benrud (opens in a new tab)
Match City (opens in a new tab) (source (opens in a new tab)) by Dennis Smuda (opens in a new tab)
The Mine (opens in a new tab) and The Caretaker (opens in a new tab) are pure CSS (no JS) games by Jamie Coulter (opens in a new tab)
To make this kind of game, you can use a library like React (opens in a new tab), Vue (opens in a new tab), or Svelte (opens in a new tab) to help architect your code.