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

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:
(Click the Download button)

More about Pizza Legends:

Check out my full collection of JavaScript gamedev tutorials

💬 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:

[DrewConley]

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

[Griot-Guild]

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

[maseyeet]

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!

[pcakeypopp]

started working on a game with a team of people and this series is the absolute perfect resource for learning what it takes to make a game from scratch, thank you

[haydengalyean]

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!

[pakuman]

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!

[emmettcrass]

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!

[skeletor]

Thanks, I'm about to start a project to teach programming in C++ through a game and your series of videos on how to create an RPG game for the web will help me a lot.

[liuchuanyuan]

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

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

[EmiliaKaida]

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

[stevecastaneda]

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

[fingersnap]

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

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

[TheNZKorean]

Great channel! Deserves way more attention.

[miho]

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

[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%);
}
}

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

[danyelofair]

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