Noita Clone

About This Project

This is a falling sand physics simulation inspired by Noita, a roguelike game known for its pixel-based physics simulation where every pixel is physically simulated.

Technology Stack

Rust WebAssembly JavaScript Bun Cloudflare Pages

Backend (Physics Engine)

  • Rust - Systems programming language for high-performance physics calculations
  • WebAssembly (WASM) - Compilation target for near-native performance in the browser
  • wasm-bindgen - Rust/JavaScript interoperability layer

Frontend

  • JavaScript (ES Modules) - Game loop, rendering, and UI interactions
  • HTML5 Canvas - Pixel-perfect rendering of the simulation
  • CSS3 - Modern styling with CSS variables and flexbox/grid

Build & Development

  • Bun - Fast JavaScript runtime and package manager
  • wasm-pack - Build tool for Rust-generated WebAssembly
  • Playwright - End-to-end testing framework

Deployment

  • Cloudflare Pages - Global edge deployment
  • Wrangler - Cloudflare CLI for deployment

Features

  • 14 Particle Types: Sand, Water, Stone, Fire, Wood, Oil, Acid, Lava, Steam, Smoke, Gunpowder, Ice, Salt, and Erase
  • Realistic Physics: Gravity, density-based displacement, liquid flow
  • Chemical Reactions: Fire spreads to wood/oil, water extinguishes fire, lava + water = stone, acid dissolves materials
  • Performance: Rust/WASM engine handles 120,000 pixels at 60 FPS
  • Touch Support: Works on mobile devices
  • Keyboard Shortcuts: Quick material selection, pause, clear

Architecture

noita-clone/
├── rust-engine/          # Rust physics engine
│   ├── Cargo.toml        # Rust dependencies
│   └── src/
│       └── lib.rs        # Physics simulation code
├── public/               # Static web assets
│   ├── index.html        # Main game page
│   ├── about.html        # This page
│   ├── style.css         # Styling
│   ├── game.js           # JavaScript game controller
│   └── pkg/              # Compiled WASM (generated)
├── tests/                # Playwright tests
├── package.json          # Bun/Node dependencies
└── wrangler.toml         # Cloudflare deployment config

Original Prompt

This project was generated by Claude (Opus 4.5) from the following prompt:

Create a noita clone using javascript and webassembly.
Use bun as the runtime (make sure it's installed).
The final code should be runnable with a single command locally.
Once built and tested use wrangler to deploy it to cloudflare at "opus-demo.bendavies.space".
Include an about page that includes this prompt and relevant info about the code stack.
Use playwrite or other suitable testing framework to test the code and all functionality before deploying.
Make sure to configure the custom domain for the deployment.
I want a full featured clone using rust for any backend wasm and js for the ui only.
Pick the best performing options for other tech choices.

Running Locally

# Install dependencies and build
bun run build

# Start local development server
bun run dev

# Run tests
bun run test

Performance Notes

The physics simulation runs entirely in WebAssembly, compiled from Rust with maximum optimizations (opt-level = 3, LTO enabled). Key optimizations include:

  • Particle data packed into 32-bit integers for cache efficiency
  • XORShift PRNG for fast random number generation
  • Alternating scan direction to prevent simulation bias
  • Direct memory access from JavaScript to WASM for rendering
  • Canvas image-rendering: pixelated for GPU-accelerated scaling

Source Code

This project was created as a demonstration of Rust + WebAssembly + JavaScript integration for high-performance browser applications.