Project 14: WASM Game for the Browser

A game that compiles to WebAssembly and runs in the browser with WebGL graphics, demonstrating Odin’s cross-platform capabilities.

Quick Reference

Attribute Value
Primary Language Odin
Alternative Languages Rust, C
Difficulty Level 3: Advanced
Time Estimate 2-3 weeks
Knowledge Area Web / Graphics / Cross-Platform
Tooling Odin WASM target + WebGL
Prerequisites Project 4 (Raylib Game), basic web development

What You Will Build

A game that compiles to WebAssembly and runs in the browser with WebGL graphics, demonstrating Odin’s cross-platform capabilities.

Why It Matters

This project builds core skills that appear repeatedly in real-world systems and tooling.

Core Challenges

  • WASM-specific constraints → maps to no file I/O, no threads
  • WebGL bindings → maps to Odin’s vendor:wasm/webgl
  • JavaScript interop → maps to foreign procedures
  • Memory management → maps to no system allocator

Key Concepts

  • WASM in Odin: Compiler -target:wasm32 or wasm64-freestanding
  • WebGL: vendor:wasm/webgl
  • JavaScript Interop: @(export) and foreign imports
  • Arena-Only Memory: No heap in WASM

Real-World Outcome

$ odin build game -target:wasm32 -out:game.wasm
$ ls -la game.wasm
-rw-r--r-- 1 user user 245K Dec 21 10:30 game.wasm

$ python -m http.server 8000
Serving HTTP on 0.0.0.0 port 8000

# Open http://localhost:8000 in browser

[Browser shows full game running at 60 FPS]

Console:
  [WASM] Loaded game.wasm (245 KB)
  [WASM] Memory: 16 MB linear memory
  [WASM] WebGL 2.0 context created
  [WASM] Audio context initialized
  [GAME] Starting...
  [GAME] Running at 60 FPS

# Works on mobile too!
# Share link with anyone - no install needed

Implementation Guide

  1. Reproduce the simplest happy-path scenario.
  2. Build the smallest working version of the core feature.
  3. Add input validation and error handling.
  4. Add instrumentation/logging to confirm behavior.
  5. Refactor into clean modules with tests.

Milestones

  • Milestone 1: Minimal working program that runs end-to-end.
  • Milestone 2: Correct outputs for typical inputs.
  • Milestone 3: Robust handling of edge cases.
  • Milestone 4: Clean structure and documented usage.

Validation Checklist

  • Output matches the real-world outcome example
  • Handles invalid inputs safely
  • Provides clear errors and exit codes
  • Repeatable results across runs

References

  • Main guide: LEARN_ODIN_PROGRAMMING_LANGUAGE.md
  • “WebAssembly in Action” by Gerard Gallant