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:
store.steampowered.com/app/10...
💬 Discord
Need help, have a question, or want to share your game dev project?
Join our Discord. Here's the link: / discord
✉️ Join my Email List!
Get updated when new videos are ready.
You'll get a free RPG Sprite Pack in your inbox, too:
us13.list-manage.com/subscrib...
My tutorial series:
⭐️ Full Bundle of all my gamedev Series:
drewconley.gumroad.com/l/full...
Ciabatta's Revenge - Action puzzle game in React JS!
drewconley.gumroad.com/l/ciab...
Action Multiplayer - GBC-style Zelda game, but with multiplayer!
drewconley.gumroad.com/l/acti...
Pizza Legends in Godot - RPG Overworld in Godot v4!
drewconley.gumroad.com/l/pizz...
Canvas RPG Kit - everything you need to build a quick RPG game engine:
drewconley.gumroad.com/l/canv...
Front End Interviewing Bootcamp:
www.coopmode.dev/series/front...
---------------------------------
Twitter / X:
/ drewconley13
Be my friend on LinkedIn:
/ drew-conley-a7865a29
Danger Crew's website
thedangercrew.com
Electron's website:
www.electronjs.org/

[@DrewConley]

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

[@luizfernandonoschang8298]

Awesome job!! Could you please make another video talking about Steam peculiarities? For example, did you use the Steam's achievments system? How does it work? Is it an API that you can work with using ajax requests or there is a specific port of the Steam library for JavaScript? That would be very interesting....

[@DrewConley]

Luiz Fernando Noschang that’s a really cool idea! We only scratched the surface of Steam features with this game, but I did learn a lot of random quirks about the platform. Will ponder and see if I have enough for a useful video!

[@kronokun]

I am working on a game called kings and pigs, in this game you play as a vi(king) who defends himself against pigs with bombs, planes and other weapons

[@pmmbb3344]

Danger Crew looks absolutely awesome. I am surprised by one detail though... it looks like you use DOM elements for displaying sprites, nonetheless it moves smoothly ( I decided to use canvas fearing some lag, or other issues with DOM elements animated by CSS and javascript) I have been developing Angel Squad, purely out of vanilla JS, HTML, CSS, pixelart, with its campaigns and dedicated game editors using the same technologies + PHP. Angel Squad is a mix of a brickbreaker, and a vertical shmup with powerups, combos and other features. Your character can be upgraded, and powerups can be purchased with gold coins. The game is divided into various missions that (can) contain several objectives. A demo will be soon available on itch.io

[@mrss_darkdragonov]

Me, I'm making games called Zpecial Child and Les Geass. I need some help to create a Free games for Android on Play Store. I hope they don't need to pay someone. Just i need some help for my project

[@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

[@iRaionSama]

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

[@scribs404]

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

[@DiegoDevPro]

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

[@user-ql3pe4nm3i]

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

[@sempribo]

Thank you Drew for this awesome presentation! The game looks really cool.

[@EmiliaKaida]

Great presentation! An in-depth tutorial with all the details would be even greater.

[@Asty__]

This is so inspiring. Your presentation was really nice and clear, both visually and in your explanation. What you said truly opens up doors and potential I didn't expect. It's amazing to see some of the behind-the-scene work and thinking process. I also love the concept of the game that is centered around developers stuff. I wish there were more games around that. Thank you, and wishing you the best.

[@sabinedeviche6502]

Love your videos! Thank you SO MUCH for creating them and sharing your knowledge :)

[@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

[@damienvanced5790]

So inspiring. Really well explained. Just love it ! Great job !

[@kamote8192]

I'm an aspiring game developer and also a React front end dev. I'm glad I found your channel! Please don't stop making videos

[@mirang2803]

Excellent demonstration! Game looks really cool :) Good job!

[@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!

[@MrMariy0]

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

[@chocomunky128]

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!

[@retrofuzzuk3672]

This is really great , thank you. I've been working on a Web game recently

[@Frankslaboratory]

Great video Drew, thanks for sharing your knowledge with us

[@helenaisaac3449]

Love the idea and presentation of gamecoding in javascript!! Thank you!!!!💖💖💖

[@christianjohansen1493]

Amazing and encouraging. Thank you.

[@perseuswong6864]

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

[@brentryczak]

This is amazing and highly encouraging. Thanks! Great game also!

[@brotherhoodwithnobanner1309]

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

[@jgarale]

super cool!! thanks for sharing!

[@deanwilcoxson9754]

This is very cool!!! I'm still in school for full stack. But it's good to know I'm not locked into front end and back end. Good inspiration, I look forward to playing Danger Crew!

[@ctXx12345X]

I find your channel very helpful and informative. You should have more subscribers.

[@djwilkins7]

I would love to do something similar - just with action rpm vs turn based. Very cool project. Thanks for sharing!

[@tomnewton3191]

Really well put together video Drew, thanks for the insights! Not working on a game as such but currently building a web app which I intend to "gamify". It's interesting to see that even game dev videos about javascript are much more popular than web dev videos! People love a bit of game development! :D Tom

[@xyhard8603]

Dude , Thank you! You solved my unsolved questions with one video. Subscribed!

[@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.

[@mitejmadan8672]

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.

[@Matt.27]

Awesome work

[@arthur1387]

This is really great! I wish you would make a tutorial about how you made this . . this is so interesting. Great Job!!

[@Jasua]

thanks a lot draw for your inspiration and this motivational video

[@joshuaperezleduc871]

This is GREAT!

[@imxaander3302]

thanks...this is awesome!

[@themaximum9474]

Thank you so much.

[@Kauan-ev5qi]

Thanks for share!

[@DisasterMan10]

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

[@mr2ti41]

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

[@robotpanda6322]

this is wat i needed thanks... as i inserting this directly into my brain

[@T12321]

Love this!

[@diegoiovane7383]

Great work! I've been working with RPGMV but now turning into JavaScript after this series of videos you are releasing. It is a great guide for me since I am only have a couple of months with JavaScript. I am developing a japanese language educational game

[@DrewConley]

Thank you! That's really cool to hear. Keep me posted on your progress!

[@misterdneh]

I don't know a lot of javascript but still cool, I came here from you Firebase Multiplayer guide this RPG looks cool!

[@mishuhishu94]

awesome video thank you! :D

[@RayanLaRoze]

Thanks for your sharing :)

[@joshgordon7299]

Awesome dude, looks like a fun game

[@imxaander3302]

im currently working on a game like monster hunter but 2d and the battle system is turn based , looking forward to your next videos. pixel art is never been easy on first time

[@sy-hungdoan4859]

Very helpful and informative :D

[@LofiCoder]

Amazing presentation! Please make a series tutorial about Pixel art game dev for Web, really want to learn it.

[@banklogs9006]

Thank you.

[@excers2581]

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

[@alexandrasmandrik1441]

Awesome!

[@writeatunethatreallysucks8696]

super cool, game!

[@Kessik8]

I suddenly have an even bigger love for the Webprogramming course I chose to take in university this semester. Thanks!

[@DrewConley]

Good luck with the course! You can achieve anything with web programming 😀

[@AustinInSeoul]

Amazing content!

[@PetiteKennie]

Thanks for this! Big fan of your work since I tried the demo of Danger Crew. Currently building a game for my final project in my web dev bootcamp and it's not as intimidating! :)

[@DrewConley]

That's awesome! Good luck with the game project!

[@eliasprado4709]

I tried to like but I have liked already the last time I went here. Great material.

[@luckymouse1988]

Dropping a like for reintroducing me to Electron!

[@ChapmanKarluvirov]

i love it !!!

[@ajinkyax]

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

[@nazhantheoneandonly6803]

i didnt even know electron existed thx!

[@luisb9862]

I was just thinking about builiding a little card game with js for a project I need (Im just a beginner), and thought it was too difficult. And then this gets in my recommended. Now I have full confidence to do it :D, very well explained and insightful video

[@nathanielcooke1902]

wanna pair program it right now... I'm good with Javascript, HTML, and CSS?

[@luisb9862]

@@nathanielcooke1902 thank you good sir, but its a project for an online course and I cannot receive external help 😇

[@mirusbhergh]

A dream come true!

[@wchorski]

I've been getting the decision paralysis when it comes to game dev tools. I've made quite a bit of demos in Unity3D but pivoted to Web dev for a few years now (React, Node) I was looking into Godot as I'm big on FOSS, but noticed all the great tools for building web games (which is my target) BabylonJS and Phaser seemed to be the 2 big winners. I really liked where in Unity I could build out a 2D and easily transition to 3D so BabylonJS makes the most sense to pick

[@emanueltejadacoste2250]

Wtf this video just got to my screen and im a self taught web dev and also want to become game dev in a coming future ... amazing 👌

[@mathiassamek]

Hello you are very good youtuber and thank´s for your content

[@raficelkouche8531]

That was a great video and your project looks amazing. I am trying to develop a game using react and I would like to have some suggestions regarding tools that I could use to design the maps. I need something beginner-friendly. Thanks !

[@arnaudlelong2342]

Thats supa cool

[@CodingFibre]

Hi, great video there and great ideas ! I started creating my own front-end video game a year ago ans ended UP quitting, didnt know how to manage the z-index property, I'm definitly curious to know how you did to avoid Map items overlapping !

[@eliranassaraf7075]

This is exactly what I was looking for! I use elctron in my day to day and I wanted to know if it was possible to make a game using it. For some reason no one else speaks about it Thanks!

[@r1pfake521]

I would like to see / hear more about the enemy AI logic implementation (picking different abilities based on personality)

[@MultiConatus]

Great! You gave the blueprint. Now, let's make a game in JS and release it on Steam!

[@WorstDeveloper]

I love how the game turned out, and that you were able to create it with normal web dev skills. How much did you end up earning from this project?

[@beunmin6]

Because of this I'm now gonna be a Game Dev.

[@ashleyhoward14]

I loved this! Do you have any recommendations on how to make background music? I'm coming from the pokemon games, so anything like that would be awesome!

[@mitchelloliver18]

this is fucking awesome

[@advanced1000]

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.

[@agent-33]

Pure JS or with frameworks?

[@vallyexe]

Thank you! Ill be honest coding is one of the most stressful and difficult things for me. I want to create an RPG game, but of course I know I need to learn some coding, but Its extremely difficult for me to understand coding concepts. I'm going to try my best to dissect your code and hopefully not give up anytime soon...wish me luck

[@muhammadrafie9562]

Good luck

[@Arceus5555]

Idk if you're still trying to make a game, but definitely try RPG Maker MV or MZ! It's definitely very basic from its start, but you can do practically anything you'd want in there, especially as far as RPGs. Even Godot could be a great free option! I feel like making an RPG like this is most ideal if you're already familiar with front-end development oriented coding languages over more generalized or even game-oriented code languages.

[@bucketlist5722]

nice explanation, really liked the video. I am looking forward to make portfolio website using some game to make it interactive. How did I start?

[@YellowPanamka]

O god save me, now i'm in js game developing LUST, after this video...

[@2infamouz475]

Mother/Earthbound vibes , I fw it lol. Im working on a game myself in vanilla js /css/html , just a simple 2d rendering system in place right now. The workflow has been a dream compared to every other env I've tried. Idk why I slept on web tech for game dev but highly recommend it for a quick entry point / productive workflow with well established & documented languages

[@2infamouz475]

The collaborative potential too omg..u don't need to set up crazy tooling on different platforms to work together when targeting the browser. Any system with a text editor can make contributions w/ ease 🙏

[@ajimas5016]

Dear Mr.Drew, can you make a video about mapping, and make a border if the map isn't square and there is a way/route. and also the tree, so the character doesn't go through the things, and the map. Thankyou

[@antwarior]

bro i absolutely love that idea of battle code lol very interesting, I'm currently looking for a language to call home right now after learning a bit of everything, I finally realize I need focus on one, trying to see which will that be, javascript is too dependent on HTML and css but I do like the simplicity, java is ok but gets crazy with its sintex, python is just a no for me as of right now, kotlin is not my style and everything else is kinda eh lol, lets see which language I finally focus on as my permanent code resident

[@angrywolfjr7164]

this is so inspiring, tho man collision is a bit scary

[@AliciaGuitar]

I have been developing a game since 2006, rewrote it several times in different languages/frameworks... i am now leaning toward vanilla js and MAYBE phaser since the frameworks change so often with breaking changes. I love working with frameworks, but not having to refactor and rewrite every 3 years 🙄

[@gabrielroque6664]

Question: what if I had multiple npcs that walk around or other players in the scene? How would the viewport handle this? How would the animation sprite would be handled with an unknown number of players? What approaches are known?

[@nursegilbey]

Is it better to just code in JavaScript if you're still learning it, or what about using Construct? Does that make you dependent on that system? Your Pizza game tutorial is awesome!

[@lofibayer1851]

Hi there for your game how do you create a save and load function, was thinking of using add to cart, where the add to cart button is the save button in the game and the cart page is the loading page not sure how to get it to work though any ideas

[@nunofontes3895]

Hi Drew, great video! I'm trying to do a game in React. Just one question, where or how do you draw the background image?

[@DrewConley]

I usually reach for css background-image as an inline style on the container. You can swap out the image (for a different level, etc) using state in your container’s render method. Hope this helps!

[@nunofontes3895]

@@DrewConley thanks for the response Drew. Sorry, I didn't explain myself the correct way, I meant how do you build/draw the image pixel by pixel? =) thanks for the patience

[@boot-strapper]

I dont suppose you have open sourced this? I would love to take a closer look or fork it for my own project!

[@mugiwaranoDave]

Awesome content. Subscribed! Will you ever release a full-length paid course?

[@DrewConley]

Yes! I have one in the works right now. Mostly free, but with paid extras

[@mugiwaranoDave]

@@DrewConley Wohoo. Great news, any expected date?

[@dappinstitute]

We'd love to chat. Great video!

[@CASMANWHAT]

Can you make a tutorial how you set up/organized your react app with phaser and how you organized your files etc. thanks a lot!

[@DrewConley]

Hey, this project did not use Phaser.... it's only Create React App. My project setup is honestly very boring but I will consider this!

[@zeroxd.cypher3899]

*slowly claps in awe*

[@skiznit]

Nice game! I've also been working on a react game. What, if anything, are you using canvas to render? It seems most people use canvas to render everything to have more control over the animations.

[@DrewConley]

The character spritesheets here are rendered as individual canvas tags. Graphically intense bits will definitely benefit from canvas. It all depends on the needs of the project. In this game, we were able to get away with mostly just raw DOM elements.

[@BKBees]

Drew, I'm planning a farming type rpg. I'm currently a javascript guy, freelance web developer. I want my game to be pixelated top down quite like a few you've made, but I also want persistance, like saved games and all of that. I plan on using Firebase/Firestore for the backend functions and database, so, what engine/framework do you recommend I use? I've been gathering info on Kaboom and Excalibur and Phaser, but I'd like to hear your opinion. Thanks for your time, I love the videos.

[@DrewConley]

Firebase for the backend is a great choice. Have you tried the front end Kaboom/Phaser/Excalibur options? It’s hard to go wrong, but would be worth the time to prototype your idea in all three to get a feel of your productivity with each library. I’m personally an Excalibur fan.

[@FrostGamingHype]

we full stack definetlly!! need the source code!

[@jadebig0]

How do you create these maps and render them? I'm new to creating games on the web so I'm not sure how to go about creating a map.