Tags: Web Development, TypeScript, Game Development, System Design, Node.js, Redis

Introduction

If your game client tells your backend what score the player achieved, your game is already hacked.

When building Space Cargo Runner — a cyberpunk-themed, real-time arcade runner web game with optional Web3 token withdrawals on SecureChain — the hardest problem wasn't making sprites move on screen at 60 FPS.

It was creating a tamper-proof, server-authoritative backend architecture that could synchronize multiplayer leaderboards, prevent memory sniffing, and bridge high-frequency game physics with React UI overlays.

In this deep dive, I'll walk through the architectural patterns and solutions that powered the game.

1. Bridging the Phaser 3 Canvas Loop with React using Zustand

One of the most frequent mistakes in HTML5 web game development is coupling your game engine's tick directly to UI framework state.

The Challenge

• Phaser 3 runs inside an HTML5 <canvas> on its own internal requestAnimationFrame loop (firing 60 to 144 times/sec).

• React is designed for declarative, component-based rendering.

• Forcing React components to re-render on every game loop tick causes garbage collection spikes, UI stuttering, and severe frame drops.

The Solution: Decoupled State Streaming

By establishing Zustand as a decoupled state mediator outside React's render tree:

• Phaser writes lightweight telemetry updates into the Zustand store on frame updates.

• React components (HUD, fuel gauge, hull integrity bar) subscribe to specific selector slices.

// Client-side Zustand State Mediator
import create from 'zustand';

interface ShipTelemetry {
  fuel: number;
  health: number;
  cargo: number;
  score: number;
  setTelemetry: (data: Partial<ShipTelemetry>) => void;
}

export const useShipStore = create<ShipTelemetry>((set) => ({
  fuel: 100,
  health: 100,
  cargo: 0,
  score: 0,
  setTelemetry: (data) => set((prev) => ({ ...prev, ...data })),
}));

React UI components only re-render when specific thresholds or integer values change, keeping the Canvas loop locked at 60 FPS.

2. Server-Authoritative Anti-Cheat & Deterministic Validation

Client-side memory manipulation (e.g., using Cheat Engine or altering JavaScript memory pointers) is trivial in web browsers. If your game submits { score: 100000 } on death, malicious users will exploit your economy.

Client Input Stream           Backend Deterministic Validator
[ (t: 0ms, MoveRight),    -->   [ Replay Physics Simulation ]
  (t: 120ms, Boost),      -->   [ Check Collision Bounds    ]
  (t: 450ms, LootCargo) ] -->   [ Compute Derived Score     ]
                                           |
                                           v
                               { Pass: Commit / Fail: Reject }

How the Anti-Cheat Pipeline Works:

1. RNG Seed Synchronization: When a run starts, the backend generates and signs a cryptographically secure random seed.

2. Action Stream Logging: During the run, the client records input actions and collision timestamps.

3. Replay Validation: When the player crashes or lands, the client sends the action payload. The backend re-executes the obstacle layout from the seed and checks whether the claimed score is mathematically achievable.

4. Prisma Atomic Transactions: Validated rewards are added using Prisma interactive transactions with database-level row locking:

// apps/backend/src/services/scoreService.ts
export async function commitRunResult(userId: string, runData: RunPayload) {
  return await prisma.$transaction(async (tx) => {
    const user = await tx.user.findUnique({ where: { id: userId } });
    if (!user) throw new Error('User not found');

    const isValid = verifyReplay(runData);
    if (!isValid) throw new Error('Anti-cheat validation failed');

    await tx.gameSession.create({
      data: {
        userId,
        score: runData.calculatedScore,
        cargoCollected: runData.cargoCount,
        validated: true,
      },
    });

    return await tx.user.update({
      where: { id: userId },
      data: { credits: { increment: runData.cargoCount } },
    });
  });
}

3. Sub-100ms Leaderboard Fan-Out with Redis & WebSockets

High-concurrency games need instant score updates without hammering relational databases with heavy ORDER BY score DESC queries.

• Redis Sorted Sets (ZADD / ZREVRANGE): We maintain leaderboards in memory with \(O(\log(N))\) time complexity.

• Socket.io Event Fan-Out: When a player secures a top ranking, an event is emitted across Socket.io rooms, updating all connected clients in real time.

// Redis leaderboard update and fanout
await redis.zadd('leaderboard:daily', score, username);
const topScores = await redis.zrevrange('leaderboard:daily', 0, 9, 'WITHSCORES');
io.to('game_lobby').emit('leaderboard_sync', { topScores });

4. Fullstack Monorepo Architecture with Shared Type Contracts

To prevent frontend and backend schemas from drifting out of sync, the project is structured as an npm workspaces monorepo:

• apps/frontend: React + Vite UI, Phaser 3 game loop, Zustand state bridge, and Web3 connection modals.

• apps/backend: Express REST API, Socket.io real-time engine, Prisma ORM with PostgreSQL.

• packages/shared: Shared TypeScript models, API request/response payloads, and socket event interfaces.

• packages/contracts: Solidity smart contracts (Hardhat, OpenZeppelin) for optional SCAI token withdrawals.

5. Role-Gated "Mission Control" Admin Panel

The backend includes a dedicated /admin dashboard featuring:

• Role-Based Access Control (RBAC) middleware verifying session tokens against database roles.

• CLI-driven administrator provisioning: npm run make-admin <username>.

• Live telemetry monitoring, active player session inspectors, ban management, and dynamic economy variable adjustments (drop rates, multiplier costs) without needing client rebuilds.

Summary

Building production-ready web games requires treating the frontend as an untrusted rendering layer while keeping state management clean and decoupled.

• Play the live game: https://krrish41.github.io/space-cargo-runner/

• View the source code on GitHub: https://github.com/Krrish41/space-cargo-runner

How do you handle anti-cheat and multiplayer synchronization in your web applications? Drop your thoughts below!