Autoplay
Autocomplete
Previous Lesson
Complete and Continue
HTML5 Game Development Course
Planning Your First Game
Planning Your Game (1:12)
Setting Up Your File Structure (1:46)
Setting Up HTML and JS (2:46)
Drawing Basic Shapes with EaselJS (3:06)
Implementing Your First Game Object (3:22)
Creating the Core Game Logic
Displaying Multiple Objects on Stage (2:30)
Adding Click Input Events (3:21)
Adding the Game Logic (3:48)
Adding the Game Over Logic (3:45)
Restarting the Game (1:58)
Adding Graphics to Your Game
Preparing Your Graphics (2:13)
Adding Graphics to the Game (2:39)
Preloading Graphics (4:07)
Adding Custom Web Fonts (3:20)
Making Your Game Mobile-friendly (2:29)
Planning Your Second Game
Planning the Rush Game (2:43)
Defining the Game Object Class (3:38)
Creating a Platform Class (4:13)
Creating Movable Game Objects (3:45)
Adding Platforms to Your Stage (2:50)
Game Objects and Collisions
Handling Platforms and Hero Collisions (4:37)
Implementing the Obstacle Game Objects (2:19)
Handling Obstacle and Hero Collisions (2:09)
Handling Collisions with Generic Methods (2:27)
Implementing the Detection Score Counter (2:07)
Character Movement and Input Handling
Adding Gravity to the Level (3:49)
Applying Gravity to the Hero (2:06)
Making the Hero Run (2:15)
Making the Hero Jump (1:18)
Handling Hero-Obstacle Collisions (2:42)
Adding Graphics and Animations
Creating the Rush Game's Graphics (3:52)
Integrating Static Graphics in Rush (1:30)
Using EaselJS Sprite Sheet Animations (4:03)
Creating the Dynamic Platform Width Logic (2:58)
Preloading Graphics and the Progress Bar (3:21)
Polishing Your Final Game
Creating a Main Menu Scene (4:00)
Create a Game Over Scene (2:34)
Displaying Scores (3:17)
Displaying a Scoreboard (4:25)
Finalizing Your Game's Web Page (3:34)
Handling Platforms and Hero Collisions
Detecting whether the hero's position overlaps any platform's bounding box.
Complete and Continue