Project 15: Rust to WebAssembly Game (Cross-Platform Compilation)

A browser-playable game (like Snake, Breakout, or a simple platformer) compiled from Rust to WebAssembly—demonstrating Rust’s ability to target the web with near-native performance.

Quick Reference

Attribute Value
Primary Language Rust
Alternative Languages AssemblyScript (TypeScript-like)
Difficulty Level 2: Intermediate
Time Estimate 1-2 weeks
Knowledge Area WebAssembly / Game Development / Cross-Compilation
Tooling wasm-pack, wasm-bindgen, macroquad or bevy
Prerequisites Projects 1-3 completed, basic JavaScript/HTML

What You Will Build

A browser-playable game (like Snake, Breakout, or a simple platformer) compiled from Rust to WebAssembly—demonstrating Rust’s ability to target the web with near-native performance.

Why It Matters

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

Core Challenges

  • Cross-compiling to wasm32 target → maps to Rust’s portable compilation
  • Interfacing with JavaScript APIs → maps to wasm-bindgen FFI
  • Managing memory in a sandboxed environment → maps to no-std-like constraints
  • Optimizing wasm bundle size → maps to link-time optimization

Key Concepts

  • WebAssembly basics: “Programming WebAssembly with Rust” - Kevin Hoffman
  • wasm-bindgen: wasm-bindgen guide (rustwasm.github.io)
  • Game loops: “Game Programming Patterns” - Robert Nystrom (gameprogrammingpatterns.com)
  • Canvas 2D API: MDN Web Docs

Real-World Outcome

<!-- Your game running in the browser -->
<!DOCTYPE html>
<html>
<head>
    <title>Rust Snake Game</title>
</head>
<body>
    <canvas id="game" width="400" height="400"></canvas>
    <script type="module">
        import init, { Game } from './pkg/snake_game.js';

        async function run() {
            await init();
            const game = new Game();

            function gameLoop() {
                game.update();
                game.render();
                requestAnimationFrame(gameLoop);
            }

            gameLoop();
        }

        run();
    </script>
</body>
</html>

<!--
Game runs at 60 FPS
WASM bundle size: 47 KB (gzipped: 19 KB)
No JavaScript game logic—100% Rust!
-->

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_RUST_DEEP_DIVE.md
  • “Programming WebAssembly with Rust” by Kevin Hoffman