Real-Time Multiplayer Laser Strategy Game — A full-stack web application inspired by Khet 2.0
LazrChess is a full-stack web application inspired by the classic board game Khet 2.0 (Laser Chess). Players manipulate mirrors and pieces on a grid to direct a laser beam and eliminate the opponent's king.
The application supports single-player mode against an AI opponent, real-time multiplayer via WebSockets, and mobile-friendly session persistence so games are never lost to a dropped connection. All game logic is shared between the frontend and backend through a deterministic rules engine — ensuring 100% consistent behavior across all game modes.
Built with modern web technologies — no heavy frameworks on the backend, no UI library on the frontend. Every layer was chosen intentionally.
The core game engine (gameEngine.js) is a pure JavaScript module shared between the React frontend and the Node.js backend. This eliminates any possibility of logic drift — both sides run identical move validation, laser simulation, and win detection at all times.
Four major feature areas — each with its own engineering challenges and design decisions.
The engineering decisions that made this project non-trivial to build.
Implemented bi-directional communication using Socket.IO with a session-based architecture. Each game session has a unique code, and all state changes are broadcast from the server to ensure both players always see the same board. Solved race conditions between client input and server authority.
Built a reconnect system using rejoin tokens stored in the browser. Implemented the Browser Visibility API to detect when mobile users switch apps — triggering an automatic reconnect when the tab becomes active again. Players can also rejoin from a completely different device using their session code.
Created a reusable rules engine (gameEngine.js) shared across frontend and backend. This prevents any possibility of logic drift between environments. Also implements position hashing for threefold repetition draw detection — a nuanced rule that requires tracking game history across turns.
Optimized animation timing so laser traversal (80ms per step) feels snappy without sacrificing readability. Balanced visual clarity with responsiveness across screen sizes. Designed the board to maximize visibility on small mobile screens while remaining fully playable.
21+ Jest-based unit tests with coverage across move validation, laser physics, and win condition detection. The shared game engine architecture makes the rules engine straightforward to test in isolation — all game logic can be exercised without spinning up a server or a browser.
The hardest problems encountered during development, and how they were resolved.
Ensuring both players see an identical game state required strict server authority — the server is the single source of truth for all game state, and clients only render what the server sends. The shared game engine prevents any discrepancy between client-side prediction and server validation. Careful ordering of update broadcasts and animation sequences was also necessary to prevent visual desync.
Implementing accurate laser reflection across multiple piece types (mirrors, deflectors, etc.) required a precise simulation loop. Edge cases such as laser hitting a corner piece at certain angles, or pieces with multiple reflective faces, each needed explicit handling. The simulation also needed loop protection to prevent infinite laser bounces from hanging the engine.
Mobile browsers aggressively disconnect WebSocket connections when users switch to another app. The Browser Visibility API (visibilitychange event) was used to detect tab switches and trigger reconnection logic on resume. Combined with the rejoin token system, a player returning to the game after a minute in another app sees their session exactly as they left it.
Khet has significant visual complexity — pieces with directional faces, reflective edges, and laser paths that move step-by-step across the board. Design decisions like the deflector reflective edge indicator, explicit hover states, and animated laser steps (rather than instant resolution) all serve to make outcomes understandable to players at a glance, without cluttering the interface.
Planned enhancements for future versions of LazrChess.
A summary of the engineering skills and disciplines exercised in building LazrChess from scratch.
LazrChess is live and playable — challenge an AI or invite a friend for a real-time match.