Pokémon JavaScript Game Tutorial with HTML Canvas

This tutorial guides learners through building a Pokémon-style browser game with JavaScript and HTML Canvas. It covers map creation, player movement and collisions, animated battles, attacks, dialogue, interfaces, and sound effects.

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