Play all

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

Description:

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.

Pokémon JavaScript Game Tutorial with HTML Canvas

Chris Courses

Add to list

#Programming #Programming Languages #Javascript #Game Development #Web Development #HTML & CSS #Web Design #Art & Design #Visual Arts #Animation #Engineering #Electrical Engineering #Digital Signal Processing #Audio Processing #Audio Effects #Collision Detection #HTML Canvas

0:00 / 0:00