DEV Community

Zico
Zico

Posted on

Building Trick or Take: An Open-Source Multiplayer Halloween Web Game on Cloudflare Workers & Agora RTC

#gamedev #cloud #webdev #opensource

Building Trick or Take: An Open-Source Multiplayer Halloween Web Game on Cloudflare Workers & Agora RTC

Halloween is the perfect season for fast-paced, spooky multiplayer fun. To celebrate, we built and open-sourced Trick or Take—a real-time multiplayer browser party game where up to 6 players enter a haunted mansion, collect candy corn, cast spectral curses, and steal candy from rival players in frantic 60-second rounds.

In this post, I want to break down the architectural choices, edge-native backend design, real-time voice integration, and client-side rendering pipeline that power Trick or Take.

1. Why Zero-Framework Vanilla Canvas 2D?

Modern web game development often jumps directly into heavyweight engines like PixiJS, Phaser, Three.js, or Babylon.js. While these frameworks are exceptional for complex scenes, they introduce hefty bundle sizes (often 500KB - 2MB+) and significant runtime overhead.

For Trick or Take, our core design goal was instantaneous cold-start playability (<50ms initial render) directly in any mobile or desktop browser without splash screens or asset-loading bars.

Pure HTML5 Canvas 2D Pipeline

  • Fixed-Resolution Scaling: A virtual resolution of 800x600 dynamically scaled with pixel-ratio awareness via devicePixelRatio to prevent blurriness on Retina displays.
  • Particle & Floating Score Engine: Lightweight object-pooled particle emitter handling dust motes, pumpkin lantern glows, candy burst animations, and floating score popups (+100, -50).
  • Smooth Spatial Interpolation: Client-side linear interpolation (lerp) across tick states ensures silky 60fps animations even across fluctuating network latencies.
  • Micro-Bundle Size: The entire front-end client—including sprites, UI overlays, audio synthesizers, and multiplayer networking—weighs under 45KB uncompressed.

2. Serverless Multiplayer at the Edge: Cloudflare Workers + D1

Traditional multiplayer game backends rely on long-running stateful Node.js/Go WebSockets servers hosted on centralized VPS instances. This architecture introduces geographic latency penalties and idle hosting costs.

Instead, Trick or Take is engineered natively on Cloudflare Workers and Cloudflare D1 (Serverless SQLite) deployed across 300+ global edge locations.

Optimistic Concurrency & Versioning

When multiple players simultaneously move, pick up candy, or activate abilities like the Ghost Walk or Jack-o'-Lantern Shield, race conditions can arise.

Trick or Take solves this with:

  1. Room State Versioning: Every room snapshot maintains a monotonic version counter.
  2. Atomic SQLite Mutations: State transitions (e.g. claiming a candy pile) execute as atomic D1 transactions verifying the current state version before applying updates.
  3. Optimistic Client Prediction: The client locally applies movement and interactions immediately, reconciling against edge state confirmations on the next tick. 
// Edge room update transaction logic
await db.prepare(`
  UPDATE rooms 
  SET state = ?1, version = version + 1, updated_at = ?2
  WHERE room_id = ?3 AND version = ?4
`).bind(serializedState, Date.now(), roomId, clientVersion).run();
Enter fullscreen mode Exit fullscreen mode

3. In-Browser Live Spatial Voice Chat via Agora RTC

Multiplayer party games are infinitely more entertaining with voice chatter. Rather than forcing players to join external Discord calls, Trick or Take embeds real-time, low-latency in-browser voice rooms powered by Agora RTC Web SDK.

Architecture

  • Ephemeral Token Minting: When a player joins a lobby, the Cloudflare Worker issues a short-lived Agora RTC token scoped to the specific roomId.
  • Audio-Only Profiles: Optimized for low-bandwidth voice streaming (music_standard scenario, 32kbps mono/stereo) ensuring stutter-free voice alongside game packets.
  • Agora RTM Presence & Signaling: Lobby state refreshes, ready checks, and voice mute indicators are broadcast across the room via lightweight real-time messaging.

4. Internationalization & Accessibility (12 Locales)

Trick or Take was designed for global accessibility from day one:

  • 12 Built-in Languages: English, Simplified Chinese, Traditional Chinese, Japanese, Korean, German, French, Spanish, Portuguese, Italian, Russian, and Arabic.
  • Right-to-Left (RTL) Support: Full layout mirroring for Arabic players.
  • Touch & Keyboard Parity: Virtual dual-zone joystick for mobile devices and responsive WASD/Arrow key controls on desktop.

5. Completely Open Source

The entire game engine, Cloudflare Workers backend, Agora voice integration, and localization catalogs are 100% open-source under the permissive MIT License.

Feel free to check out the code, run it locally via wrangler dev, or deploy your own custom themed party game! What do you think of building serverless multiplayer games on Cloudflare Workers? Let's discuss in the comments below!

Top comments (0)