Pizza Legends RPG

What is Pizza Legends?

It's an exercise for learning and getting started quickly with game development in JavaScript. It ain't perfect, but it's a fun high level walk-through of the process of making a top-down RPG in only HTML, CSS, and vanilla JavaScript.

How do I run the code?

You must run the code with a local web server. This is a bit different than simply opening raw HTML files. It involves starting a process on your computer that serves files from a localhost URL. For example, you'll start the server and then visit `localhost:3000` in your browser. The port number, 3000, will vary based on the server you are running. My favorite ways to run a web server:

• Serve on npm is fast and easy. Requires a tiny bit of NPM experience, but not too much!
• If you are a VS Code user, Live Server Extension is a great option that works directly inside VS Code.
• Feel free to pop in our Discord if you are new to any of this.

What browsers are supported?

We work with Google Chrome throughout the series. The features should work in other browsers, but some of the graphics rendering details may vary in quality.

Why are my characters are acting weird or freezing when cutscenes finish playing?

• First, remove these two lines of OverworldMap.js. You'll find it at the end of the `startCutscene` method:

  //Reset NPCs to do their idle behavior

  Object.values(this.gameObjects).forEach(object => object.doBehaviorEvent(this))

  Make sure you remove these lines before watching the NPC Updates video (17)! If you don't have these lines, you can go ahead and proceed.

• Work through the changes in the NPC Updates episode. We change the Behavior and Walls code a bit in this video to patch some previously odd behavior.

Why are my characters moving faster than they do in the videos?

If you're on a high refresh rate monitor, you may notice the game loop running faster than what I show in the videos. This is because we use the browser's requestAnimationFrame feature without throttling the speed in which the game loop callback fires. In short, high refresh monitors will send instructions to update the characters more often than normal monitors, thus resulting in faster movement.

We implement a solution for this at the very end of the series.

Can I use the art and assets in my own projects and products?

Yes! You can use the assets, art, and code in your own projects with no need to credit the series, even for paid products you create.

Can I follow along using a framework like React, Angular, etc?

Yes, but it may not be a simple 1:1 conversion. Some areas, like the battles, are very DOM centric and would be pretty straightforward to port with a framework. Some of the Overworld canvas tag operations may get tricky. If you're new to the concepts here, I recommend following the videos as they are recorded, then port the code to your own framework afterward.

How can I expand the game after the series is over?

There are so many things you can add! Here are some ideas:

• Add sound effects and music. Those go a long way in any game!
• More in depth RPG skills and stats
• More battle statuses
• More characters
• Your own cutscene transitions
• Make it responsive and mobile-friendly
• Anything else you can think of!

What if I have another question or need help?

Use the Contact page or join our Discord community. We'll be happy to help you out.