Let's build an RPG with JavaScript - Part 1: Project Beginnings

Let's embark on a journey to create a full RPG with just HTML, CSS, and JavaScript.
In this series, we're going to create a game similar to Pokemon Red/Blue or early Final Fantasy, but about pizza chefs.
There are tons of ways to approach a project like this... this is only one of them! Feel free to take the concepts covered in this series and build on top of them, change them, make them your own for your own game.
New episodes uploaded every 3 - 4 days until the project is complete!
** Links **
Download the code (and images) for this episode from Google Drive here:
drive.google.com/file/d/1n4Oe...
(Click the Download button)
More about Pizza Legends:
coopmode.dev/series/pizza-leg...
💬 Discord
Need help, have a question, or want to share your game dev project?
Join our Discord. Here's the link: / discord
---------------------------------
More 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...
---------------------------------
✉️ 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...
---------------------------------
Twitter / X:
/ drewconley13
Be my friend on LinkedIn:
/ drew-conley-a7865a29

[@DrewConley]

New episodes published every few days as we build this thing!

[@trongph.animation]

I'm waiting every single day pal !

[@ensignwilliampittsjr5216]

what engine are you using for this?

[@LUGAYTOP]

@@ensignwilliampittsjr5216 vs code

[@ezoterikcodex]

Finally I found a video that the guy just don't throw up the codes to my face. You are simply explaining are you doing. I just being to watch and thx for this content

[@erievhs]

This is exactly what i was looking for, everytime i look up how to make an Rpg i get pseudo advice articles like "you have to work really hard" or "start making a cardboard game" thank you for showing how to literally make a game

[@DrewConley]

Lol, hopefully this will help out a little more than the bits of advice you mentioned. That said, it definitely calls for you to step in and make it your own 🤘

[@RandalfElVikingo]

Well, I bet you need those advices because I dare you to make an RPG game. I will be the first to play it.

[@RandalfElVikingo]

@@erievhs Yeah! That's what I like.

[@KaletheQuick]

I'll play your game :) I came here for the same reason as you :)

[@angelap.8160]

So excited for this series! the scaling with css and pixelated blew my mind! awesome channel!😁

[@pakuman5358]

Dude I am so glad you are doing this. Danger Crew inspired me to use my react skills to start working on my own turn based RPG. So excited to watch this whole series! You are an inspiration :)

[@sgtJA]

Such an underrated channel. Really excited to see you posting rpg game dev stuff again. The Danger Crew vids were the best. I really hope you get lots of new subs!

[@maseyeet313]

I started making a game with an entire team just because of your videos and now you are making an entire series of making one, keep it up!

[@uh_vinia]

Wow this honestly is really interesting, detailed, and just really helpful and fun!! Thank you for this!

[@fingersnap]

Just started and finished this part one of this tutorial today. You explained everything great. I'm excited to continue this project!

[@gregoryedwards9097]

Bro, I'm just getting started with coding, started about two weeks ago, and coming across this is a Godsend. Thank you Drew! Earned a new sub!

[@emmettcrass3133]

I've been struggling with building games in JS for months but you explained it in a way that is finally making sense. Thanks a bunch for sharing these tutorials!

[@haydengalyean3704]

Ive been struggling with js for so long and this one video opened my eyes to everything Ive been missing, The way you explain things as you're doing it is what makes you a great teacher! thank you for broadening my horizon and giving me motivation and inspiration!

[@stevecastaneda]

Subbed! Going to watch your series, please don't stop making them!

[@YMRGUITAR]

I was pretty hyped up when I saw this notification pop up, I’ve left it for a while so I’ve got a little backlog to work through. Thanks for this Drew, I’m excited to start coding along!

[@miho9453]

Absolutely loved this. So clear and engaging. Thank you!

[@glaydsonp]

God dammit man, that's some GREAT content! I'm a webdev interested on learning how to build games and I wasn't sure I wanted to learn right now how to use Unity or something else. I'm loving to see that it's not only posible to create a game with JS but it's a good way to get started.

[@EmiliaKaida]

I love these tutorial series about RPG games! Please keep them coming.

[@kyleareich]

Dude I just stumbled upon your videos and your channel. Great tutorials man. Really well done.

[@danyelofair]

This is exactly what I was looking for. Thanks a lot for the efforts you put on this, really appreciate it!

[@JNYTwastaken]

Whre can i find the images

[@eboatwright_]

This is super cool! I loved the demo for Danger Crew, so it's gonna be really exciting to see this one! :D

[@rickruizdana]

Thank you Drew!!! This is my first on javascript ever, and it all worked perfectly! I was somehow lost when you started using Visual Studio Code, as I thought it was the same as the Visual Studio used with Unity, but made the switch right away. Anyway, I just wanted to make this comment to remind me (and encourage me) that I was able to finish part one. I know that for now I'm just copying your code, and that my results are because of your great work explaining us, but is a start. Lets dig into the javascript world! Thanks again, glad I found your channel!

[@ZeroZiltch]

I was looking for something like this, appreciated Drew o/ This will help me tons in getting started o/

[@madamecocotte4688]

Exactly what I needed !!! I'm so excited !!!

[@nickhatboecker]

I'm very excited for this series, because I'm also currently developing a top down adventure in JS with Phaser3 Framework. I hope I can learn some things from this

[@callmejobson]

12/27/21 Part one finished! Thank you Drew!! I and trying to slowly get back into game programming I hope to try and finish one part each day!!

[@BGNewsReporter]

Just found this channel. Really excited to try the project!

[@TheNZKorean]

Great channel! Deserves way more attention.

[@lethiakx]

Thanks for actually explaining the why's behind everything!

[@jakechen4020]

Thank you for these tutorials, help me a lot!

[@pavelerokhin1512]

continue this series man! I like it a lot!

[@DelPieroJoga10]

as a front-end developer, I love so much this channel, mainly this playlist

[@user-qf7xx7qn2x]

Thank you for this wonderful video! Love it!!!!!

[@khoanguyen3044]

the other day i was thinking of playing overcooked on browser and found that there isn't anything like that at the moment so i thought i should learn to create it thank you for making this series

[@industrialhomestead4028]

i'm loving this series!

[@spifet]

Great video! This was exactly what I was looking for! I will definitely go through this tutorial to learn the basics about this original way of game dev, and I hope to get the time eventually and add more functionality and content to share in the Discord community for this game. I will definitely follow your tutorial until the end. BTW, the media queries to make it completely responsive is: .game-container{ position: relative; width: 352px; height: 198px; margin: 0 auto; outline: 1px solid white; transform: scale(3) translateY(50%); } /* Resizing for all screens up until 1278px */ @media (max-width: 1072px){ .game-container{ transform: scale(2.75) translateY(50%); } } @media (max-width: 978px){ .game-container{ transform: scale(2.5) translateY(50%); } } @media (max-width: 891px){ .game-container{ transform: scale(2.25) translateY(50%); } } @media (max-width: 802px){ .game-container{ transform: scale(2) translateY(50%); } } @media (max-width: 714px){ .game-container{ transform: scale(1.75) translateY(50%); } } @media (max-width: 626px){ .game-container{ transform: scale(1.5) translateY(50%); } } @media (max-width: 537px){ .game-container{ transform: scale(1.25) translateY(50%); } } @media (max-width: 447px){ .game-container{ transform: scale(1) translateY(50%); } } @media (max-width: 360px){ .game-container{ transform: scale(0.75) translateY(50%); } }

[@dev_el1277]

Great series, learning lots from part 1!

[@jaycutter5372]

So, i ran in to a problem, that my hero sprite got placed behind the map. For everyone who has the same problem, here is how I solved it. My map had 200KB while my hero sprite had around 4KB, which caused the map to load longer and place it after my hero sprite. Tried to work around this with z Index settings, didn't work either. I rendered the map down to about 30KB and it worked how intended. Great tutorial btw, keep it up!

[@MRVDOG]

I know this was a month ago, but when scaling your canvas, you could use transform-origin instead of translating 50% on the Y :) or you can use display flex on the body with align and justify to center the canvas :)

[@CASMANWHAT]

Loving this series!

[@c.rberyl3759]

Exactly what I was looking for, thanks!

[@fleanardnimoy6555]

Feeling pretty dumb never thought to use the image editor to get the scaling... always spent 100 hrs trying to figure out the mathematicals... this is a great tutorial by the way. You got my Sub!

[@sanjeevmaharjan9795]

very excited for this series !!

[@seanpaul93]

thanks for this, explain everything in detail which is great

[@noname-mw7oy]

You explain things soooooo well ty! 😁

[@ahmedez5113]

I'm very excited for this series

[@kalx6588]

thank you drew!!! loving it.

[@milacherry6738]

Your Content is The best I Ever came across

[@solidboko]

This is so brilliant, thanks a lot !!!

[@namaefumei]

This is gold please make more!

[@zacharyshifrel9107]

Awesome video! I'm watching and converting the vanilla js/html to React code

[@ReuelTeodoro]

This is awesome can’t wait for more

[@SarthakGamer]

Just discovered this channel. I have to say this project playlist is amazing. Keep it up 👊

[@liuchuanyuan4301]

Timestamps: 1:12 setup 5:39 css intro 8:11 javascript intro 14:30 render image to canvas 16:26 scale canvas 21:49 render image to canvas (advance) Note: * VScode have live server extension if you don't have python version 2 as shown in the setup

[@geminii.german]

thanks a lot for that.... i started learning and this is gold ❤

[@sneddengonsalves9320]

this is great, this should have more views

[@treifeske2077]

Awesome project!

[@highernowama5765]

thank you for golden content!

[@lebrongoated23]

Where we you all my life. I am excited to creating a game using html, also thanks for answering my questions In the video.

[@CV-ec6mk]

Glad i found this just what I was looking for

[@SaptadeepDutta_Ex-Xerox]

Amazing how you explain at 15:30 and at 18:32. Thank you. BTW: I didn't know Michael Ross of Suits was such a rad JS dev🤣.

[@xxe0nxx1]

I'm only 7 mins in but God Bless you man this is awesome

[@thayscasado255]

Wowwww, I can't wait for the next one.

[@donbroughton149]

I'm excited to see how this series develops - Do you have plans to package inside of Electron at the end ?

[@DrewConley]

I am considering it! There may be a bonus section at the end that covers basics of electron

[@raiden-va]

Thanks for great lesson

[@arjuno7058]

glad I found this channel

[@NicoM137]

Such an awesome tutorial! As someone aspiring to dabble in developing small games this is truly inspiring and makes the whole process feel in reach. I have to say there’s probably ~25% of this that was still over my head - any recommendations for additional resources to brush up on the basics?

[@azrulnautx]

I would recommend freecodecamp. Their focus is on html css and js so it's great for front end stuff like these!

[@nomoremuda]

I made it!!!! i love pizza :) can't wait to see where this goes!😁

[@haycoal8773]

Hi! I am so happy you uploaded these videos because I got the idea to make a game for my girlfriend for her birthday so I am following along with this :) I do just have one question though, for your backgrounds, did you get them from anywhere specific or did you have someone draw them? Just because I found assets, but they are tilesets so I am just a tad confused on that part. I look forward to your answer, thank you!!

[@MohamedAhmed-bo2vb]

A legend ❤

[@dracula5752]

thanks it looks amazing!

[@mitejmadan8672]

Please don't stop this series. Please. I love RPG games. I am a big fan of pokemon games.

[@StaniasznikoV]

very good job!

[@Ali-lm7uw]

Nice project, very good to learn JS

[@sunnylady]

Thanks!! This was great!! I'm coding while my pinky is broken!!

[@V_C_C]

This is the best tutorial!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! all the other tutorials were not as cool as this or they were all in one super long video ;)

[@user-ql3pe4nm3i]

This is sooooo great...

[@suhritreddy6792]

Thank you man

[@milacherry6738]

8k? subs? Your completely underrated!

[@aaronh920]

This is so helpful. I'm learning a lot! Especially researching every step to make it work the same as yours. Such as hosting a simple http server. On my system, the command is: python3 -m http.server Who knew!?

[@RaymondAtivie]

Great video thank you

[@mj2068]

whaaaaat? free upgrade for my frontend skill to make games? hallelujah, Drew, halle-freaking-lujah!

[@mattmcnett2635]

Your awesome Drew

[@kirbbeans9583]

idk if you know this, but there is a vscode extension called "Live Server," and it makes a server that will also update in real time when you save, its very good, 10/10 reccomend

[@reyco1]

**Check Notes** --- LMAO ... That made my day

[@thefreeze6023]

Hey Drew, what do you think about using a state stack for this type of project?

[@UnderArea51]

Love Danger Crew!

[@Rouzario]

Thank you

[@mev4le]

Hiii! I was wondering how you got your pngs for your game and how you knew what to crop out/ what stuff needed to be seperate. and if you created them can you lmk what the application was 😊

[@Magistrado1914]

Excellent video. Viewed on 2024/08/01

[@sinayeganeh9033]

Nice!

[@sayonmasrif1459]

Amazing

[@kristorres3551]

Great video series so far! I'm having a issue with the whole init process, specifically getting the expected results from 12:50. When changing the function to the overworld.init(); , I don't get the message proving connectivity. Any suggestions?

[@DrewConley]

Hmm, there must be a mismatch somewhere. Try comparing your code to the download code in this one. Often it’s a little forgotten or misspelled thing

[@lukelehane8083]

Great stuff! Some of your earlier videos don't use HTML canvas and seem to favour more regular web dev elements. Would you recommend using canvas for this kind of thing?

[@DrewConley]

It depends on the game, to be honest. I usually end up with a hybrid. I am really just trying to show a few different approaches 😀

[@lukelehane8083]

@@DrewConley ah interesting! Looking forward to the rest of this series!

[@emilylemonly]

thank you

[@Undercraftt]

Look good haha im making a pokemon clone rpg i already end the movement and map draw with only matrix arrays and objects for each cell to get control of the map. I got amazing myselft because wow i can make whatever i want with this configuration.

[@_D3adB0y_]

this is awesome and super useful for what I want to make. Thanks!

[@nursegilbey]

Is there an advantage to developing in Apple? The console thing surprised me, considering on Windows I would download some server app that uses Apache.

[@swayampravodasgupta2956]

As a first time game dev with some basic understanding of JS all I can say is these seem to be great tutorials - Flexible, neatly organized and understandable code structure Efficient yet succinct arguments and declarations The core concepts being used in each and every video in the playlist summarizes some complex workflows and frameworks in a unique way Here's the entire playlist in case there's some trouble finding it kzbin.info/aero/PLcjhmZ8oLT0r9dSiIK6RB_PuBWlG1KSq_

[@andremp1927]

you are the best

[@AdilsonVCasula]

That's right to what i've looking for. Btw, is there a way to go just to the fight scenes without overworld? (like we do in "magic")

[@DrewConley]

I don’t know Magic very well specifically, but the 11th video in this series in the playlist jumps right to Battles without (as much as possible) the overworld dependency. Hope that helps!

[@AdilsonVCasula]

@@DrewConley ty mate. Keep up the great work