YoVDO

Pokémon JavaScript Game Tutorial with HTML Canvas

Offered By: Chris Courses via YouTube

Tags

Javascript Courses Programming Courses Game Development Courses HTML & CSS Courses Web Design Courses Animation Courses Audio Effects Courses Collision Detection Courses HTML Canvas Courses

Course Description

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


Taught by

Chris Courses

Related Courses

Computer Vision: The Fundamentals
University of California, Berkeley via Coursera
Programming Languages
University of Virginia via Udacity
Learn to Program: Crafting Quality Code
University of Toronto via Coursera
Computational Photography
Georgia Institute of Technology via Coursera
Algorithms: Design and Analysis, Part 2
Stanford University via Coursera