Danger Crew - Code Tour

📣 Hey, Listen! This series is included in my full tutorial bundle. Consider picking it up there instead!

Danger Crew is a top down RPG game we build with React and released to Steam. The game's Steam page says:

Danger Crew is a single-player, retro-style RPG set in a world where programmers battle using laptops. Fire computer commands in Hack Battles until your enemies' laptops explode in a smoking cloud of defeat. Build your crew to be the most unstoppable programming team the world has ever seen.

In this video series, I want to walk you through exactly how I coded the game.

Let's crack open the code repository of Danger Crew and explore how each feature was built. You can reference this as you create your own game, whether you adopt some of my design choices exactly or fork anything to be your own! While this game is built in React, many of the concepts are also relevant to game development with other JavaScript frameworks and game engines.

FAQ

Q: What topics are included?

In the first video, we'll explore how the project uses Redux to share state among different areas of the codebase.

From there, we'll dive deep into the Overworld of the game. This is where NPCs are walking, talking, and basic gameplay happens.

Next up is Turn Based Battles... I'll walk you through the general approach for how Danger Crew implemented Battles as well as some developer debug tools we built into the game specifically for battles.

There's a reusable menu system in the game that powers the Pause Menu, Battles, and many other menus seen in the game. I'll walk through how the pixel art SVGs are built with React components.

Finally, we finish the tour with a detailed look at the editor program, a helper application we built for working on the game. This is the content authoring app we used to create the game's dialogue, cutscenes, world events, pretty much everything. This app is my proudest part of the project!

Q: Why did you build a game with React in the first place?

When this project started, I was using React every day for my both full time job and side projects. I was super fast and productive using it and could crank out any creative idea pretty quickly. I started an initial prototype of this game with React instead of reaching for an established game engine, mostly out of convenience and familiarity. I thought we'd switch to a real engine eventually, but we never had to!

For the full story, check out this episode of the Syntax podcast!

Q: How did you release a web game on Steam?

This game is produced with Electron, which wraps the browser-friendly code with a copy of Chromium. This enables the code to run as a native Desktop application (Windows, Mac, Linux) and be uploaded to platforms like Steam and Itch. If you make a game that runs in Google Chrome, you can use Electron to distribute your game as an app!

Q: Does this package include the source code of Danger Crew?

No, but also yes.

This product includes a stripped down code package of the game intended for learning purposes. All of the code is present, but copyrighted assets (character sprites, chapters, etc) and chapter content have been removed. While this is not tutorial code, it's hopefully helpful to browse the exact code that powers the real game.

Included Videos

01. High Level Overview (16:45)

02. Overworld Data (10:19)

03. Overworld Components (08:05)

04. Battles (18:01)

05. Pixel Art Menus (12:55)

06. Editor Application (21:16)