Make a Pokémon Game in JavaScript (Tutorial)

Become a member to get early access to upcoming tutorials : https://buymeacoffee.com/jslegend

For written tutorials, go to my substack : https://jslegenddev.substack.com/
Like the tutorial? You can support me here : https://www.buymeacoffee.com/jslegend

Live demo : https://jslegend.itch.io/p5-pokemon-prototype

Source code (Github repo) : https://github.com/JSLegendDev/Pokemon-p5js

Assets (where you can download everything at once) : https://github.com/JSLegendDev/Pokemon-p5js/tree/master/assets

Alternative link (where you need to download one by one) : https://github.com/JSLegendDev/Pokemon-p5js/tree/master/assets

- Software -

VSCode : https://code.visualstudio.com/

Tiled : https://www.mapeditor.org/

Download p5.js here : https://p5js.org/download/ (scroll down to find the download section for p5.min.js)

Chapters

0:00 Intro
1:44 Project Setup
2:19 Making the canvas responsive with CSS
6:40 Setting up p5
8:32 How to load fonts + Initializing canvas
12:18 Creating the menu scene
28:21 Creating the world scene
42:21 Writing the player code
1:08:36 Error in setAnimFrame
1:15:32 Implementing a camera
1:42:38 Fixing player movement
1:46:05 Drawing the world map in Tiled
2:04:17 Implementing the world map in the game
2:30:11 Creating hitboxes for the world (Collidables)
2:43:54 Implementing debug mode
3:10:25 Writing the code for the NPC
3:27:18 Implementing dialog system
3:48:51 Making screen blink when talking to NPC
4:00:22 Implementing Battle scene + system