HTML5 Game Development
3.3 (5 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
76 students enrolled
Wishlisted Wishlist

Please confirm that you want to add HTML5 Game Development to your Wishlist.

Add to Wishlist

HTML5 Game Development

Build two HTML5 games in two hours with these fast-paced beginner-friendly videos
3.3 (5 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
76 students enrolled
Created by Packt Publishing
Last updated 6/2017
Current price: $10 Original price: $85 Discount: 88% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 2 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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.
View Curriculum
  • HTML5 Game Development is ideal for anyone who develops websites and who wants to leverage the benefits of including rich interactive media that captivates users; for example, developers working with design agencies to improve branding or independent developers wanting to enhance their skills and portfolios. Some basic knowledge of HTML, JavaScript, and CSS would be useful.

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.

About the Author

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.

Who is the target audience?
  • 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.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
40 Lectures
Planning Your First Game
5 Lectures 12:08

Exhibiting the final game and encouraging viewers to learn how to build it themselves.

Preview 01:11

Avoid having different types of files in one directory. Tidy up the file structure.

Setting Up Your File Structure

It is cumbersome to always start from scratch; this video shows you how to lay the foundations for your game with some boilerplate code.

Setting Up HTML and JS

Canvas drawing is stateless. Use the EaselJS library for the first time to draw something with managed states.

Drawing Basic Shapes with EaselJS

A game object usually contains different components. This video shows how we can put a shape and some text together.

Implementing Your First Game Object
Creating the Core Game Logic
5 Lectures 15:18

We need to have many tiles on stage so we can make them clickable and playable in the next video.

Displaying Multiple Objects on Stage

Our tiles are not yet clickable. We'll make the tiles clickable and remove a tile when it is clicked.

Adding Click Input Events

Tiles can be randomly removed - so we now need some logic to make sure that players eliminate them sequentially, as well as some way to tell the player which tile is next.

Adding the Game Logic

The counter continues even after a player removes all tiles - we'll need to add a "game over" check and display a game over scene.

Adding the Game Over Logic

The game stops at the game over scene, and we'll need to make a provision to play the game again by adding a restart link and logic.

Restarting the Game
Adding Graphics to Your Game
5 Lectures 14:44

We'll need to add graphics to the game, so we'll check and decide the dimensions of each game object and draw them.

Preparing Your Graphics

We'll use a CSS background and the createJS bitmap class to integrate graphics into the game.

Adding Graphics to the Game

The game's startup isn't optimized for slow internet connections - it could start before all graphics are loaded. We'll track the graphics' loading state and begin the game only after all graphics are loaded.

Preloading Graphics

The font face doesn't match the pixel art style of the game. We will create a web font and then use it in the game.

Adding Custom Web Fonts

The game doesn't work smoothly on a mobile device due to delayed click responses and mismatched screen dimensions. We add touch-event support to the tile-removal code and configure the game screen to fit common mobile screens.

Making Your Game Mobile-friendly
Planning Your Second Game
5 Lectures 17:06

We made the first game using just one game object - the tile. We'll now create a game with multiple game objects put together.

Preview 02:43

We have different kinds of game objects, such as the hero, platform, and obstacles. We need a class hierarchy with a generic class to share common properties.

Preview 03:38

The game object is just a definition. We will need to implement a real game object, platform, and put it on stage with a rectangle shape.

Preview 04:11

There are some properties that are shared between moving objects, but this is not applicable to static objects such as platforms. We need a definition for moving objects that extends the GameObject class.

Preview 03:44

We have the essential game objects defined but we have not created a game level yet. This video will teach you to put the platforms together to form a game level.

Preview 02:50
Game Objects and Collisions
5 Lectures 13:35

Detecting whether the hero's position overlaps any platform's bounding box.

Handling Platforms and Hero Collisions

The game is not challenging enough with only platforms. We can put some obstacles on the platforms to force the hero to jump over them.

Implementing the Obstacle Game Objects

We have obstacles on the platforms that the player needs to watch out for. We'll create another loop to check if the hero hits an obstacle.

Handling Obstacle and Hero Collisions

Detecting collisions between the hero and platform or the hero and obstacles is similar - we can create that code as a generic collision-detection method.

Handling Collisions with Generic Methods

We'll create a reward mechanism that allows the player to collect coins.

Implementing the Detection Score Counter
Character Movement and Input Handling
5 Lectures 12:06

Everything in the game is static now and the hero is not moving at all. We will use the createJS ticker function to apply a falling speed to the hero and make him move.

Adding Gravity to the Level

The hero falls through the platform. We will stop the falling when the hero hits the platform.

Applying Gravity to the Hero

The hero stands still on the platform but he doesn't move forward. We will apply an x velocity to the hero so he will run forward.

Making the Hero Run

The hero will fall to the bottom when the next platform is higher than the current one - we'll make the hero able to jump higher.

Making the Hero Jump

The hero can run now but there is no effect when the hero hits the coins and obstacles. We will implement the logic when the hero hits them.

Handling Hero-Obstacle Collisions
Adding Graphics and Animations
5 Lectures 15:40

The current game is displayed with rectangle shapes, we'll need better graphics to attract players. So we will create animation graphics in Flash and export them as a sprite sheet file.

Creating the Rush Game's Graphics

We prepared the graphics but haven't integrated the graphics into the game yet. So we will put the static graphics into the game first.

Integrating Static Graphics in Rush

We have exported the animation into the sprite sheet data. We will now use the SpriteSheet and BitmapAnimation classes to integrate the sprite sheet into the game.

Using EaselJS Sprite Sheet Animations

The width of the platform graphics is fixed, but the logic supports dynamic width. We need a method to scale the platform graphics to a variable width value.

Creating the Dynamic Platform Width Logic

The game graphics takes some time to load but the game starts before all resources are loaded. We will make a preloader class that visualizes the loading progress into a progress bar.

Preloading Graphics and the Progress Bar
Polishing Your Final Game
5 Lectures 17:46

The game starts at once after it is loaded and the player may not be ready for the game yet. So we need to show a menu scene and let the player control when to start the game.

Creating a Main Menu Scene

The game restarts immediately right now, and players haven't a chance compose themselves before the next round. We'll add a game over scene to let players control when the game begins anew.

Create a Game Over Scene

We do not motivate players enough right now to make them play again because they cannot compare how well they played in each game session. We are going to introduce a highest-score challenge.

Displaying Scores

It is not challenging enough with only one high score in the game. We will store a list of the history of highest scores.

Displaying a Scoreboard

The game works perfectly but doesn't have any help options to let first-time visitors know how to play. We are going to decorate the game page and provide more information on the game.

Finalizing Your Game's Web Page
About the Instructor
Packt Publishing
3.9 Average rating
8,109 Reviews
58,308 Students
686 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.