This course teaches learners how to create a Pokémon-style game using JavaScript and HTML Canvas. By the end of the course, students will be able to build a game map, import assets, handle collisions, create player movement and animations, implement battle sequences with attack and health interfaces, and add audio effects. The course follows a hands-on approach with practical demonstrations and step-by-step guidance. It is designed for individuals interested in game development, JavaScript programming, and interactive web design.
Overview
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
-
Create simple HTML5 Canvas Game with JavaScript Pong Game
-
Animated Physics Game with JavaScript - Tutorial
-
Unity 3D Tutorial - Beat Em Up Fight Game
-
HTML5 Game from scratch step by step learning JavaScript
-
JavaScript Game Development Course for Beginners
-
Code a 2D Game Using JavaScript, HTML, and CSS (w/ Free Game Assets) – Tutorial
