Pokémon JavaScript Game Tutorial with HTML Canvas

0:00 Introduction
2:45 Game Map Theory
5:36 Where to Find Free Game Assets
10:12 Download Tiled and Import a Tileset
16:07 Tile Brush, Paint Bucket, and Randomization
21:07 Landmass Formations
31:14 Tile Layering for a Plateau
35:20 Layering and Placement of Trees
38:56 Paths and Landscape Details
52:04 Collisions and Map Boundaries
1:00:33 Foreground Layers
1:04:24 Exporting Layers for Project Import
1:08:12 Programming - Project Setup
1:18:41 Import and Render Map
1:28:52 Player Creation
1:44:27 Move Player Through Map on Keydown
2:10:37 Player-to-Map-Boundary Collisions
3:04:58 Foreground Object Programming
3:10:45 Player Movement Animation
3:25:41 Battle Activation
3:53:23 Transition from Map to Battle Sequence
4:15:04 Draw Battle Background
4:19:28 Add Battle Sprites
4:32:00 Add Attack Bar Interface
4:54:42 Add Health Bar Interface
5:04:29 Attacks - Tackle
5:29:34 Attacks - Fireball
5:56:05 Queueing Dialogue
6:11:51 Populate Attacks Based on Chosen Monster
6:25:36 Randomizing Attacks
6:28:34 Display Attack Type
6:33:13 End Battle
6:39:55 Transition Back to Map
6:58:02 Audio and Sound Effects

[ChrisCourses]

Please let me know if any assets are missing from the description, it's hard to QA seven hours worth of video so I definitely could have missed something.

[FreePhoenix]

You are the legend. Not every programmer can share their 7 hours to teach other how to create an HTML Canvas+JS game from scratch. Thank you for your efforts

[real_synkas]

Since this is pixel art, you can save a lot of space by instead of scaling up the source image to 400% like shown at 1:25:30, you import the image at the native size of the assets you are using (typically 16x16, 32x32 or 64x64px per tile), and scale it up in code instead. You can use the css function scale(4) (would be 400% like he does in the tutorial), together with the css property image-rendering: "pixelated". This will scale up all pixels without adding any smoothing or anti aliasing. The end result will be the exact same, but with a fraction of the file size, which means way faster loading times for the user :)
Good tutorial! Thanks :)

[desislavivanov]

Everything in vanilla JS in such a low amount of time. that's mindblowing

[GameDevExperiments]

Wow this is awesome! As someone who has spent the last 2 years making tutorials for a pokemon game, I'm really impressed by how much you managed to cover in 7 hours.

[smortemm]

Finally, a tutorial that's step-by-step, guided, and uses plain vanilla javascript. Good job!

[lucaslima]

Just stop blowing my mind bro 🤯. What an impressive project you're delivered to us. Thank you!

[ashish_prajapati_tr]

Helping you to break YouTube algorithm

[Retrofire-]

I miss seeing this kind of dedication. Always go above and beyond the call of duty in your work ethic, an admirable quality.

[glowinthedark]

Just in case this stupid mistake happens to anyone else - if you are at 2:33:35 and you are wondering how the log reads out 185 Boundaries and not 26 - when you copy your Collisions from the JSON file into your collisions.js, you need to copy the data ABOVE the little property text, not the data below it. A few seconds of inattentiveness - an hour of going mad trying to find my error.

[Holphana]

You are the youtuber I've been looking for. The last 4-5 years in fact. You do "Gods" work. Thankyou.

[pickyou]

I have finally completed the whole tutorial. This is an amazing tutorial in general for just learning the whole language. You quite literally have examples of everything my class tried to teach me this semester.

Extra: I cant pay for the premium but because of how well this tutorial was i haved created a brand new map, and can transition to new maps, essentialy all of the code for the new maps is automatic.

[joaocesarlima]

Amazing! This is the kind of game development tutorial I miss on YouTube! Please keep it up!

[addy]

holy cow! i’m currently going through clear code’s pygame tutorials, but i’d love to follow this one afterwards. videos like this makes me excited to learn new things

[nonequivalence]

I'm a backend PHP Laravel developer but god damn this is very impressive. Using straight up vanilla JS to complete this is honestly incredible. This is real development right here. Props to you.

[nacs]

Really impressive how you did this without massive JS frameworks, nice work!

[kidbrave_]

OMG!! I'm 8 minutes into this video and I'm already calling you my FAVORITE! Youtuber! I been trying to find someone that builds javascript games from scratch that can exactly teach and show from beginning such as finding assets and breakdown the logic of a game!!! I am beyond geeked for this tutorial!!! Thank you sooo much for creating your youtube channel and giving back!! I'm going to learn so much and it'll be from an amazing instructor!! 😁🙌🏽

[the_kid]

Hey Chris your channel is like the tool box for my work. Even now after having about a year of experience in javascript programming, whenever I get stuck, I keep on visiting and revisiting your channel in order to get back to the basics and find out what the core problem is. Every video of yours always holds a huge hint leading to the solution of every problem that I encounter. Thank you!!!

[joshuahovis]

Just finished this video and it was so awesome. I work professionally using JavaScript and TypeScript but this video taught me many new things! Never thought something like this would be doable within vanilla JS. But now I intend to certainly buy your premium course and build this out to a much bigger application now that I have the building blocks. Thanks for this!

[guitar]

I'm 45 minutes in and already so much has happened. My son asked me how to make video games so we've started with scratch Jr and I've been looking for other ways. I started learning code and then this came up. Such a cool video. I can't wait to see what all else happens in another measley 45 minutes.