Building Age Of Empires 2 with React: Rise of the Browser
summary
Claims rebuilding Age of Empires 2 entirely in React with no game engine and rendering every tile is a DOM element using raw JS CSS and React. Implements world-to-screen isometric math to place sprites, a requestAnimationFrame game loop with refs for dynamic state, and vector math for unit movement. Result is a working prototype: clickable buildings, scrolling, animated units and facing directions, but incomplete and not released because original assets prevent distribution.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 1:57Who played AoE2
- 4:02Building game in React
- 5:27UI with React and CSS
- 6:29Game state with useReducer
- 7:34Isometric view rendering
- 9:41Isometric grid math
- 11:48Grid to screen space
- 12:49Units and buildings in DOM
- 13:11Smooth scrolling attempt
- 14:56Game loops with requestAnimationFrame
- 16:41Scrolling fix with state and refs
- 17:23Moving units with vectors
- 19:48Live demo
- 20:29Limitations and next steps
- 21:09Lessons learned
related talks
26mThe Danger Crew: Lessons learned from building an RPG in React
34mAves Engine: High performance browser games
25mReact For Game Development
38mBuilding Isomorphic Web Applications with React
31mMake coding fun: developing a game in the browser
40mAAA 3D graphics on the Web with ReactJS + BabylonJS + Unity3D
27mHow NOT to build a video game
21mBreaking out of the confines: making games in React