Building a JavaScript RPG game + Releasing on Steam (Danger Crew presentation)

In this meetup presentation, we cover the journey of creating an RPG game with HTML, CSS, and JavaScript. We package up the project with Electron to release on platforms like Steam.

My friends and I didn't know anything about game development when we started this project, but we quickly learned that our front end development skills were very useful in the process.

I hope the topics in this video encourage you to get started with making your own JavaScript game today!

00:00:00 Intro
00:01:30 Danger Crew
00:02:57 Roadmap
00:03:52 Demo
00:08:15 JavaScript Frameworks
00:09:12 Building the Overworld
00:10:55 Camera system
00:12:33 Character art
00:13:52 SVG
00:14:56 Single frames
00:15:24 Sprite sheet animations
00:16:50 Building the Battles
00:18:09 Battle Actions
00:20:00 Turn Cycle
00:21:44 Web Dev and Game Dev aren't so different
00:22:53 Intro to Electron
00:24:10 Packaging the game with Electron
00:26:24 Steam page
00:27:04 There's nothing stopping you

*** Links ***

🎮 Danger Crew on Steam:

🎥 I'm working on a new JavaScript Game Development course. Get access here:

🎮 Check out my full bundle of video game development tutorials
(No Ads, Early access to new videos, Extra content not on YouTube!)

💬 Discord
Need help, have a question, or want to share your game dev project?

✉️ Join my Email List!
Get updated when new videos are ready.
You'll get a free RPG Sprite Pack in your inbox, too:

Twitter / X:

Be my friend on LinkedIn:

Danger Crew's website

Electron's website:

[DrewConley]

Hey friends, let us know here in the comments what kind of game you're working on with JavaScript!

[TodorescuProgramming]

that sprite animation is pure genius... how easy you did it to just toggle the class that has the keyframes with steps... great job guys! going to buy this game on steam

[perseuswong]

This is the CLEANEST code I've ever seen. In fact, I'll credit this video for convincing me to rewrite my game in React + Electron

[chocomunky]

I'm still relatively early in my Web Dev journey. I've been programming for about a year now and have created two games: Blackjack, which is... Blackjack using DOM elements, and Space Cat, a clone of the old pc-80 game Space Mouse, made with Javascript and rendered using the canvas element. I actually first started messing around with Game Dev back in the golden days of Flash and ActionScript and later dabbled with Game Maker Studio. Both of those languages paved the road for me to learn Javascript. Space Cat was a huge milestone for me because I was able to build an entire game engine without using any frameworks or tutorials. I also had a lot of fun making it. Learning about Electron was a huge inspiration for me and I can't wait to work on my next game project. Awesome video!

[danielmorris]

Awesome, thanks for the intro and info

[MrMariy]

awesome. thank you! I am trying to create a 2d topdown realtime multiplayer with node and react, now i've got some motivation

[DiegoDevPro]

Great talk and amazing project. Thanks for sharing your experience.

[mrti]

How did I not think about this before.. genius man.. genius.

[ahntree]

The tutorial is awesome… I was looking for game dev tutorial as a frontend developer and this is it! Thank you Drew.

[scribs]

Fantastic presentation! Very inspirational, I started working on a browser game today with some friends and members from my community and now I have newfound faith that it'll actually become something :D

[AirIsLungFood]

Great tutorial! I found this incredibly helpful, and as you hoped, motivational!
After working as a web developer on a three year solo project and not taking any time off, I'm being 'forced' to use some of my vacation time.
I'm maybe a bit of a workaholic, and need to be working on something. I spent the first few days gaming on steam but started dreading the thought of doing that for the next week and a half.
No joke, your video has made me excited about my time off! :D
Thanks for sharing!

[eboatwright_]

I found this game a few years ago, and today and yesterday I played the demo. I have to say, this is probably one of my favorite games! :D

[iRaionSama]

You're an inspiration to all of us! Thank you very much for this encouraging video in these hard times :D

[brotherhoodwithnobanner]

Thank you sir this is exactly the tutorial I want. Just learned react at university and can’t wait to have a try

[LucasDev]

DUDE! This game is amazing! Even more knowing that it was done only using web dev languages, I insist on buying and spending a few days playing, RPG is my favorite style, I work in web dev for more than 10 years, I always wanted to make games but I never managed because I am not good with graphics. I loved the way you used tiles to make the player move through squares. Congratulations! What an incredible game.

[DisasterMan]

15:23 this is pure css genius, nice one!

[excers]

Ik nothing about Javascript, now I feel like I can make a game lol. Ur a good presenter!

[advanced]

Hey that this awesome!! Look very cool! i am working on a RPG too, a Horror-one i am a new game dev. as a game dev Game engines ARE NOT important !! you dont have to spend too much money for making a awesome game.. you can make great games too with free engines. like me i using JavaScript and C++ to make games and too i bought the Danger Crew game yesterday.

[mitejmadan]

eureka moment!!!
This video have really opened my mind in web development. I love the UI of the game. I have been a huge pokemon fan.

[ajinkyax]

the line made me subscribe "I help ppl get into game development" <3