HTML5 Canvas Tutorials for Beginners | Become a Canvas Pro 📋 - Pokémon JavaScript Game Tutorial with HTML Canvas

Get 65 more hours of content from 200 additional lessons only at https://chriscourses.com/courses Google Drive Assets - https://drive.google.com/drive/folders/1cbdyXiO7IlIDgSDul6yMvFrJ-acQgJjf Download Tiled - https://www.mapeditor.org/download.html Tiles - https://cypor.itch.io/12x12-rpg-tileset Monsters - https://pixel-boy.itch.io/ninja-adventure-asset-pack Finished Demo - https://chriscoursespokemon.netlify.app/ Source Code - https://github.com/chriscourses/pokemon-style-game 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