HTML5 Game Development [VIdeo]


HTML5 Game Development [VIdeo]
Downloadable video: $39.99
save 15%!

Packt Video. Stream online or download for unrestricted offline use. Learn more

Course Contents
The Author
Sample Clip
  • New! Packt Video courses: practical screencast-based tutorials that show you how to get the job done. Bite sized chunks, hands on instructions, and powerful results.
  • Create two simple yet elegant games in HTML5
  • Build games that run on both desktops and mobile browsers
  • Presented in a modular approach, with elegant code and illustrated concepts to help you learn quickly
  • Updated the code to work for CreateJS version 0.7.1 at -

Video Details

Language : English
Release Date : Tuesday, December 31, 2013
Course Length : 1 hour and 58 minutes
ISBN : 1849695881
ISBN 13 : 9781849695886
Author(s) : Makzan
Topics and Technologies : Game Development, Other, Video

Table of Contents

  1. Planning Your First Game  [12:08 minutes]
    • Planning Your Game
    • Setting Up Your File Structure
    • Setting Up HTML and JS
    • Drawing Basic Shapes with EaselJS
    • Implementing Your First Game Object

  2. Creating the Core Game Logic [15:23 minutes]
    • Displaying Multiple Objects on Stage
    • Adding Click Input Events
    • Adding the Game Logic
    • Adding the Game Over Logic
    • Restarting the Game

  3. Adding Graphics to Your Game [14:44 minutes]
    • Preparing Your Graphics
    • Adding Graphics to the Game
    • Preloading Graphics
    • Adding Custom Web Fonts
    • Making Your Game Mobile-friendly

  4. Planning Your Second Game [17:13 minutes]
    • Planning the Rush Game
    • Defining the Game Object Class
    • Creating a Platform Class
    • Creating Movable Game Objects
    • Adding Platforms to Your Stage

  5. Game Objects and Collisions [13:42 minutes]
    • Handling Platforms and Hero Collisions
    • Implementing the Obstacle Game Objects
    • Handling Obstacle and Hero Collisions
    • Handling Collisions with Generic Methods
    • Implementing the Detection Score Counter

  6. Character Movement and Input Handling [12:05 minutes]
    • Adding Gravity to the Level
    • Applying Gravity to the Hero
    • Making the Hero Run
    • Making the Hero Jump
    • Handling Hero-Obstacle Collisions

  7. Adding Graphics and Animations [15:40 minutes]
    • Creating the Rush Game's Graphics
    • Integrating Static Graphics in Rush
    • Using EaselJS Sprite Sheet Animations
    • Creating the Dynamic Platform Width Logic
    • Preloading Graphics and the Progress Bar

  8. Polishing Your Final Game [17:44 minutes]
    • Creating a Main Menu Scene
    • Create a Game Over Scene
    • Displaying Scores
    • Displaying a Scoreboard
    • Finalizing Your Game's Web Page


Makzan focuses on web development and game design. He has over 14 years of experience in building digital products. He has worked on real-time multiplayer interaction games, iOS applications, and rich interactive websites.

He has written two books and one video course on building a Flash virtual world and creating games with HTML5 and the latest web standards. He is currently teaching courses in Hong Kong and Macao SAR.

Sorry, there are currently no downloads available for this video.

Code Downloads

Download the code and support files for this video.

Support, complaints and feedback.

Packt is committed to making Packt Video courses a valuable, useful way for IT professionals to learn new skills. We have made every effort to ensure that this course reaches the required standard and will work on our customer's devices. Please go to our support page.

What you will learn from this video course

  • Create interactive games with gravity and collisions
  • Modularize game components and create easily maintainable code
  • Convert and embed custom fonts into your game and web pages
  • Develop sprite and sprite sheet animations
  • Preload graphic files and optimize your startup performance
  • Control scene transitions such as main menu and game over scenes
  • Understand core concepts that can be applied to developing other rich media and interfaces for your websites
  • Test and optimize your game's performance

Who this video course is for

HTML5 Game Development is ideal for anyone who wants to get started with the fundamentals of game development in HTML5. Some basic knowledge of HTML, JavaScript, and CSS would be useful.

In Detail

HTML5 (as a platform) is a collection of technologies, such as JavaScript and CSS3, that allows the delivery of new and exciting multimedia using the native features of new and more capable web browsers. It allows game developers to create fun, exciting, and immersive games, as well as other interactive content that can enhance your web portals.

HTML5 Game Development will teach you all that you need to know to get started with creating your first game in HTML5 so you can start building captivating games from scratch.

This course is packed with step-by-step instructions to help you build modular code, optimize your game for deployment, and easily modify and reuse game logic to extend your game.

With this course, you’ll build two incrementally complex 2D games that run on both desktop and mobile browsers. This course will explain game programming best practices, complete with simplified game logic, physics and collision handling, as well as custom graphics and fonts.

Your first exercise is a simple counting game that lays the foundations for creating clean, customizable, and modular code. We’ll then move on to building a “rush” game with moving backgrounds, basic physics, and dynamic scoreboards.

We’ll cover essentials such as handling mobile touch events, controlling scene transitions, custom fonts and graphics, optimizing your game's load time, a loading progress bar, collision detection, keeping score, and creating a deployable game.

HTML5 Game Development will be your guide as you create two complete games that are compatible with multiple desktop and mobile web browsers.

Screenshots from the course

Use the EaselJS library to draw with managed states

Make your game mobile-friendly

Create a GameObject class structure

Create a game with multiple game objects that work together

Add gravity to your level

Preload graphics and display a progress bar


Packt video courses are designed to cover the breadth of the topic in short, hands-on, task-based videos. Each course is divided into short manageable sections, so you can watch the whole thing or jump to the bit you need. The focus is on practical instructions and screencasts showing you how to get the job done.

The examples in this video course are built using a simple canvas with modularized JavaScript game logic. You'll use basic object-oriented programming concepts to create game components and test your game using a simulator - optimizing it for real-world situations before deployment.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software