There are literally hundreds of ways to make games. To reduce the number of choices, you might choose to release your game prototype as free on the browser. This makes it effortless for anyone to try out your game.

It does also have the added benefit of learning about the web, which is a valuable skill to have. Not to mention profitable.

Next you want to choose between 2D or 3D. 2D is easier to create assets for, more straightforward to reason about and require less to run. 2.5D is a mix of 2D and 3D, where 2D assets are placed in a 3D environment, but you are effectively making a 3D game. 3D can be the most stunning looking but also requires the most work, and many indie games don't focus on the visuals but the gameplay. But sometimes the gameplay requires three dimensions.

Next you want to choose between a game engine or a 2D/3D library. A game engine is a collection of ready-made solutions that help you make a game, while a library is a collection of things that help with a certain aspect of making a game. An engine might have features to handle physics, animations, sounds, data management, etc. while a library might only have functions to draw images or models. It's easier to get started with a game engine, but a library will offer more ways to customize and optimize your game.

Suggestions from the easiest to the hardest to get started:

• a 3D game engine: Godot
• a 2D game engine: Phaser
• a 2D library: PixiJS
• a 3D library: Three.js

Godot

A straightforward 3D game engine with a visual editor.

Remember to try out how it looks in a web build early on.

Phaser

A straightforward 2D game engine, but has no in-built visual editor.

There exists a third party Phaser Editor, but it's not as good as Godot's.

You can use tools like Tiled to create levels and Aseprite to create sprites. Both integrate well with Phaser.

PixiJS

A 2D library but requires you to bring a lot of stuff yourself to make a full game.

I would still recommend it over Phaser if you want to focus on the performance.

Three.js

A 3D library but requires you to bring a lot of stuff yourself to make a game.

But also can result in unique looking games.

The suggested stack:

TypeScript           - to introduce types to JavaScript
Next.js              - to package and build
React                - to create declarative components
Three.js             - to render 3D graphics
React Three Fiber    - to tie React and Three.js together
Drei                 - to add useful components for UI and effects
React Spring         - to add animations
React Postprocessing - to do post-processing effects on Three.js
R3F Perf             - to optimize performance

For state management, you can use React's built-in state management, or use Zustand, Jotai, Valtio, Mobx, Redux, Recoil, etc… Any of them will do. If you have no preference, I would start with Zustand.

Sources

• Web Game Development