How Not to Build a Video Game by Christoph Nakazawa

-React Summit 2023

His project, Athena Crisis, is a modern-retro 2D turn-based strategy game, uniquely crafted using JavaScript, React, CSS, and other web technologies typically reserved for frontend development.

Nakazawa explores the potential of these technologies in a context far removed from their usual applications. By integrating the game into a slide deck using MDX (a markdown format that supports React components), he demonstrates a creative blend of presentation and interactive gaming. The game is embedded directly within his slides, allowing live gameplay and demonstrations during the talk.

The development process described by Nakazawa emphasizes a deep understanding of the tools used, as he restricts himself to technologies he could recreate if necessary. This approach leads to a very hands-on, bespoke development environment where traditional game development tools like game engines are replaced with custom-built solutions using familiar web technologies.

Nakazawa's focus on accessibility, instant load times, and ease of updates highlights the advantages of web technologies. The use of CSS for animations and transitions in the game exemplifies how web standards and practices can be adapted to game development to enhance user experience and performance.

However, the journey is not without challenges. Nakazawa candidly discusses the limitations and difficulties encountered, such as performance issues and the complexity of maintaining game state and visibility across different game sessions and player interactions. His solution to use persistent data structures and a state management approach that leverages the strengths of React shows a sophisticated handling of these challenges.

Have you ever built a game with react?

What Lessons Can Be Learned from Building a Video Game with Frontend Technologies?