Menu

Post image 1
Post image 2
Post image 3
Post image 4
Post image 5
Post image 6
Post image 7
Post image 8
1 / 8
0

60 FPS with 600 Snakes: How I Got the Browser Client to Survive a Room Full of Snakes

DEV Community·monkeymore studio·22 days ago
#Q9pFzghZ
Reading 0:00
15s threshold

The server took me one week. The client took another. Phaser 3 + React 19 + Vite. I know there are magic numbers, TODO comments, and obviously cleaner ways to write half of it — but it runs at a steady 60 FPS on a regular laptop, and that's good enough for a side project. This post is about how I kept the browser from dying. 1. Why Mix React and Phaser? I first tried building the UI entirely inside Phaser. Bad idea — Phaser's UI system is painful for anything beyond a score counter. I ended up with React 19 + Tailwind CSS for menus, HUD, and leaderboard, and Phaser 3 for the game canvas. They communicate through callbacks: React sends commands to Phaser, Phaser pushes score and leaderboard data back to React. The upside is React's reconciliation never touches the game render loop because the Phaser canvas and React DOM live in separate worlds.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More