Pokémon JavaScript Game Tutorial with HTML Canvas

Overview

Embark on a comprehensive JavaScript game development journey with this 7-hour tutorial focused on creating a Pokémon-style game using HTML Canvas. Learn essential game development concepts, from map creation using Tiled to implementing player movements, battle sequences, and audio effects. Master techniques for rendering game maps, designing player animations, handling collisions, and creating engaging battle interfaces. Dive into advanced topics like attack systems, dialogue queuing, and seamless transitions between game states. Gain hands-on experience in building a fully functional game while exploring key programming concepts and game design principles.

Syllabus

Introduction
Game Map Theory
Where to Find Free Game Assets
Download Tiled and Import a Tileset
Tile Brush, Paint Bucket, and Randomization
Landmass Formations
Tile Layering for a Plateau
Layering and Placement of Trees
Paths and Landscape Details
Collisions and Map Boundaries
Foreground Layers
Exporting Layers for Project Import
Programming - Project Setup
Import and Render Map
Player Creation
Move Player Through Map on Keydown
Player-to-Map-Boundary Collisions
Foreground Object Programming
Player Movement Animation
Battle Activation
Transition from Map to Battle Sequence
Draw Battle Background
Add Battle Sprites
Add Attack Bar Interface
Add Health Bar Interface
Attacks - Tackle
Attacks - Fireball
Queueing Dialogue
Populate Attacks Based on Chosen Monster
Randomizing Attacks
Display Attack Type
End Battle
Transition Back to Map
Audio and Sound Effects