Build a Pokémon Game in JavaScript - p5.js Tutorial

Published: 16 January 2024
on channel: JSLegendDev
14,191
412

For written tutorials, go to my substack : https://jslegenddev.substack.com/

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

Source code (Github repo) : https://github.com/JSLegendDev/Pokemo...

Assets (where you can download everything at once) : https://github.com/JSLegendDev/Pokemo...

Alternative link (where you need to download one by one) : https://github.com/JSLegendDev/Pokemo...

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


On this page of the site you can watch the video online Build a Pokémon Game in JavaScript - p5.js Tutorial with a duration of hours minute second in good quality, which was uploaded by the user JSLegendDev 16 January 2024, share the link with friends and acquaintances, this video has already been watched 14,191 times on youtube and it was liked by 412 viewers. Enjoy your viewing!