DEV Community: Zico

Building Trick or Take: Open-Source Multiplayer Web Game with Vanilla Canvas 2D, Cloudflare Workers & Agora RTC

Zico — Thu, 29 Oct 2026 13:02:31 +0000

In the spirit of Halloween, I set out to build an edge-native, zero-framework multiplayer browser game called Trick or Take.

The game is completely open source under the MIT license on GitHub:
👉 GitHub Repository: https://github.com/zicojiao/trick-or-take
🎮 Play Live: https://trickortake.com

Here is a deep-dive breakdown into the architectural decisions, client-side rendering pipeline, edge-based serverless state synchronization, and low-latency voice integration.

1. The Game Loop: "Take the Candy. Don't Get Caught."

The core gameplay loop is deceptively simple and high-tension:

Lily is busy at the kitchen counter, and a candy bowl sits right behind her.
Hold (via Spacebar, mouse click, or mobile touch) to snatch candy treats. The longer you maintain your hold, the faster your snatch rate accelerates.
Release to instantly assume an innocent posture.
Lily turns around unpredictably every 0.90 to 1.35 seconds, with a brief 0.55s–1.90s warning jitter.
If caught holding while Lily looks back: you get a broom bonk, a stun penalty, and your unbanked candy drops straight to zero!
Rounds last 60 seconds. Playable solo or in multiplayer rooms (2–6 players) with optional live voice chat.

2. Zero-Framework Vanilla Canvas 2D Engine

Modern frontend stacks often default to heavy component libraries or monolithic game engines. For Trick or Take, the objective was maximum responsiveness and sub-second cold starts across low-end mobile devices and desktops alike.

Why Vanilla Canvas 2D?

Ultra-Lightweight Footprint: The entire client codebase compiles to less than 45 KB of gzipped JavaScript.
Instant Cold Start: Loads and renders within 50 ms without hydration lag or virtual DOM overhead.
Rock-Solid 60 FPS: Pure requestAnimationFrame loop driving standard HTML5 2D context drawing operations.
Asset-Free Audio Synthesizer: Instead of loading megabytes of MP3/OGG sound files, all background tunes and broom-bonk SFX are procedurally synthesized using the Web Audio API (AudioContext, OscillatorNode, and GainNode).

3. Serverless Edge Architecture (Cloudflare Workers + D1)

Rather than maintaining dedicated GameLift or containerized WebSocket servers, the backend runs entirely on Cloudflare's serverless edge infrastructure:

[Browser: Canvas + Web Audio] 
       │ 
       ▼ HTTPS / JSON
[Cloudflare Workers Edge API] 
       │ 
       ├─► [Cloudflare D1: SQLite Room State]
       ├─► [HTMLRewriter: 12-Language SSR Localization]
       └─► [Agora RTC & RTM Token Minting]

Optimistic Concurrency with Monotonic Versioning

Multiplayer rooms (2 to 6 players) share state via Cloudflare D1. To avoid race conditions when multiple players press "Ready" or report state updates simultaneously without the cost of distributed locks:

Each room record maintains a monotonic version counter.
State updates use conditional SQL queries:

UPDATE rooms 
SET data = ?1, version = version + 1 
WHERE id = ?2 AND version = ?3;

If a write conflict occurs, the Worker applies bounded exponential backoff with jitter and retries.

4. Ephemeral Live Voice Chat (Agora RTC)

Multiplayer parties are ten times more hilarious when players can yell warnings to each other before Lily turns!

Edge Token Minting: Cloudflare Workers generate short-lived Agora RTC authentication tokens on demand for authorized room members. The primary Agora App Certificate is securely isolated in Workers secrets and never touches browser bundles.
Microphone Handling: When players join voice, the browser establishes peer audio streams via the Agora Web SDK, with automated reconnection and graceful degradations if a player has unstable network connectivity.

5. Anti-Cheat & Verified Leaderboard Runs

In casual browser games, client-side score manipulation is notoriously rampant. Trick or Take implements a dual-layer verification model:

Deterministic PRNG Seed: Each round generates a cryptographic seed governing Lily's turn timestamps and warning durations.
Input-Trace Replay: Solo runs do not submit arbitrary integer scores. Instead, the browser logs a micro-trace of timestamps representing user press and release actions. The Cloudflare Worker re-simulates the run against the round's seed. If a player was holding during an active turn or exceeded physical limits, the score is rejected.

6. Open Source & Contributions

The entire project is licensed under the MIT License and welcoming contributions:

💻 GitHub Repository: https://github.com/zicojiao/trick-or-take
🎮 Live Game: https://trickortake.com

Whether you're interested in browser gamedev, edge-native architectures, or just want to play a fun Halloween heist with friends, feel free to try it out, clone the repo, or open a pull request!

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

Zico — Thu, 29 Oct 2026 11:48:26 +0000

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.

🎮 Play Live: https://trickortake.com
🐙 GitHub Repository: https://github.com/zicojiao/trick-or-take (MIT License)

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:

Room State Versioning: Every room snapshot maintains a monotonic version counter.
Atomic SQLite Mutations: State transitions (e.g. claiming a candy pile) execute as atomic D1 transactions verifying the current state version before applying updates.
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();

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.

🕹️ Play Now: https://trickortake.com
⭐️ Star & Fork on GitHub: https://github.com/zicojiao/trick-or-take

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!