Building a Real-Time Multiplayer Board Game with Flutter and WebSockets

1. The Challenge of Real-Time Turn-Based Synchronization

Sequence is a tactical board game combining card strategy with 5-in-a-row token placement. Implementing it for online multiplayer presents unique engineering challenges:

• Ultra-Low Latency: When a player lays down a card, their opponent needs to see the chip drop instantly across network boundaries without noticeable lag.
• Strict Game Rules: Two-Eyed Jacks act as wild tokens; One-Eyed Jacks remove opponent chips (unless part of a completed sequence). The backend must be the source of truth to prevent client tampering.
• Smooth UI Layout: The 10x10 board must fit seamlessly on mobile portrait screens as well as wide desktop monitors without clunky scrolling.

2. Go WebSocket Concurrency Model

To achieve rapid, real-time state propagation, I chose Golang with the Gorilla WebSocket package for the backend matchmaking hub. Go's lightweight goroutines allow thousands of simultaneous connection loops to run concurrently with negligible memory footprint.

type GameRoom struct {
    RoomID     string
    Players    map[*Client]bool
    BoardState [10][10]int
    TurnTimer  *time.Timer
    Broadcast  chan []byte
    Mutex      sync.RWMutex
}

func (r *GameRoom) Run() {
    for {
        select {
        case message := <-r.Broadcast:
            r.Mutex.RLock()
            for client := range r.Players {
                client.Send <- message
            }
            r.Mutex.RUnlock()
        }
    }
}

Mutex locking ensures thread-safe board updates when concurrent actions occur, while broadcast channels isolate room traffic completely.

3. High-Performance Flutter CustomPainter

Standard Flutter widgets (nested Columns and Rows) can cause excessive widget tree rebuilds when animating board tokens. To maintain 60 FPS, I rendered the 100-cell grid utilizing Flutter's CustomPainter.

The CustomPainter calculates coordinate offsets mathematically, painting the chips, card faces, and winning sequence neon outlines in a single render pass directly on the GPU canvas.

4. Min-Max AI Opponent with Heuristic Pruning

To make the game thrilling in offline mode without requiring internet connectivity, I implemented a min-max algorithm with alpha-beta pruning.

Evaluating a 10x10 board with a 52-card deck introduces a massive search tree. To keep decision time under 1.5 seconds, the algorithm uses targeted heuristic weights:

• 4-in-a-row completion: +10,000 points (immediate win).
• Block opponent 4-in-a-row: +8,500 points (defensive imperative).
• Corner space adjacency: +350 points (corners act as universal wild spaces).
• 2-in-a-row expansion: +150 points.

5. Live Deployment & Playable Demonstration

The application is live and accessible in modern web browsers at sequence.muhammadhasnain.me, as well as packaged as an Android APK.