Game Development on the Web


This is a notes post and may not be as easy to follow as a de facto blog post.

Overview

Intro

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.

Extra Notes

  • You can use pixi.js (2D), three.js (3D), or the Canvas API (2D) for rendering your game
  • Cannon.js as a pure JavaScript physics engine
  • Rapier.rs as a 3D WASM physics engine
  • Add gravity to your game (engine)
  • Add jump physics to your game (engine)
  • To make first person rotation controls from scratch (for y-up systems)
    1. Make a persistent Euler rotation with order YXZ
    2. On each input or frame, set this Euler from the current quaternion of the object you wanna rotate
    3. Assuming common screen coordinates, (0,0) in top left and (1, 1) in bottom right, Euler y axis rotation -= y axis rotation * 0.02 * sensitivity and x axis rotation -= x axis rotation * 0.02 * sensitivity
    4. Clamp x axis rotation so you can't look down past your feet and up beyond zenith
    5. Set target object quaternion from the Euler
  • To sync the position and orientation of two objects that have different ancestors in a 3D (Three.js) scene tree, use these snippets. The variable names should be self-explanatory.
    • Sync position
    • Sync rotation

Useful Code Snippets