How I prototype browser games

I’ve been prototyping browser games recently. Here’s my approach:

1. Sketch out every screen in the game on paper. Map out the flow between screens.
2. Create rudimentary versions of every screen using basic HTML. I limit the resolution of each screen to 1280×720 and disable scrolling. Resist the urge to do any sort of styling or complex layout design at this stage.
3. Turn each screen into a static React component.
4. Move any variable data into props on each React component.
5. “Lift state up” as discussed in the React documentation. At this point I have a function which can render a single “frame” of my game.
6. Implement state transitions in functions outside of React.
7. Wire the React components up to those state transition functions.
8. Implement screen transitions in React.

At this point I have a functional prototype. I can iterate on the gameplay until it’s fun (or until I give up). The code is very simple: usually one HTML file and two JavaScript files. This approach allows me to avoid art and design (my weak points) and focus on gameplay and programming (my strong points).