This is a notes post and may not be as easy to follow as a de facto blog post.
Games on the web have the same structure as any other game: a constant loop of reading input, updating game state, and rendering the game to the player.
The best way to use a game loop on the web is using
requestAnimationFrame. A template can be found here.
Controling the Game
Browsers make lots of peripherals and hardware available to web developers. You can already use the keyboard, mouse, or touch as inputs, but you can also use a PS or XBox controller through the Gamepad API or even a MIDI device using the WebMIDI API. Just keep in mind browser compatibility.
To use a keyboard, touch, or mouse, use a manager that can be exposed in the game loop.
To use the Gamepad API, use my Gamepad Manager. Try something along the lines of this.
- You can use pixi.js (2D), three.js (3D), or the Canvas API (2D) for rendering your game
- Rapier.rs as a 3D WASM physics engine
- Add gravity to your game (engine)
- Add jump physics to your game (engine)