HTML5 Game Development - Second Edition
0.5 (1 rating)
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.
8 students enrolled
Wishlisted Wishlist

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

Add to Wishlist

HTML5 Game Development - Second Edition

Create robust and spectacular games in two hours with these fast-paced, yet beginner-friendly videos based on HTLM5
0.5 (1 rating)
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.
8 students enrolled
Created by Packt Publishing
Last updated 8/2016
Current price: $10 Original price: $75 Discount: 87% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 3 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Draw vector game graphics in Adobe Animate
  • Modularize game components and create maintainable reusable code
  • Manage a graphics display in Canvas with CreateJS library
  • Deploy the game on the web for visitors to play
  • Define programming classes for game objects
  • Determine the collision between an avatar and different types of game object
  • Identify difficulty by controlling the platforms placement and enemies count
  • Implement a score multiplier when the player collects coins in a streak
  • Find out how to polish and enhance the game by adding a menu scene and game-over scene
View Curriculum
  • Basic knowledge of HTML, CSS, and JavaScript is expected.

HTML5 and related web standards, such as JavaScript and CSS3, enable 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 to engage your users.

This course will take you through all you need to know to get started creating your first game in HTML5. It starts by introducing you to working with HTML5 to create web-based games. Through practical game examples, you will understand how to work with HTML to create game logic, work with animations in CSS3, add audio, implement basic physics and collision detection, build levels, and polish the game with menus and game over sequences.

You will see how to write games with the graphical in-browser drawing capabilities of HTML Canvas, with the support of the CreateJS library. It also covers how to make games mobile-friendly. By the end of this video, you will be comfortable creating in-browser games in HTML and CSS.

About The Author

Thomas Makzan focuses on the fields of web development and game design. He has over 15 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 several books on building a Flash virtual world, creating games with HTML5, and building websites with the Flexbox layout. He currently teaches 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.
Compare to Other HTML Courses
Curriculum For This Course
40 Lectures
Planning the Count game
5 Lectures 25:04

This video provides an overview of the entire course.

Preview 03:51

We need to get started with the project, and for that, we first need to set up the environment. 

Setting Up Your File Structure

Download the CreateJS library. 

Setting Up the Canvas with CreateJS

Our game is still blank, as we haven't added any graphics to it. So now, we will need to create graphics and connect it with the code for the game to work.

Preparing the Graphics

We have all the preparations, but the game is still empty. It's now time to get our game up and running. We'll use the graphics to implement the game object. 

Implementing Your First Game Object
Creating the Core logic
5 Lectures 17:33

We will be displaying multiple objects on stage and will also be producing the main logic of the game.

Preview 04:07

We placed the box on the stage, but we still cannot interact with them. We will add interactivity to the game object by adding tap input events.

Adding Tap Input Events

Make the game look good in mobile and improve the game display.

Making the Game Mobile Friendly

We have made the box clickable, but there is no constraint now. We need to implement the core game logic. 

Adding the Game Logic

We need to determine how the game ends and show a game overview. 

Adding the Game Over Logic
Polishing the Count Game
5 Lectures 26:45

Enhance the game overview with animation. Also add interaction to the numbered box.

Preview 10:29

Make our game user friendly by allowing it to restart after it is over. 

Restarting the Game

Display a customized web font in the numbered box by adding custom web fonts to the game.

Adding Custom Web Font

We will add sound effects to the game so that when the player clicks on the button or the game object, there are audio effects.

Adding Audio Effect

Deploying the game on the web to make it available for others players. 

Deploying the Game on the Web
Preparing the Rush Game
5 Lectures 22:29

We want to kick start a new game. 

Preview 04:06

We need to create game graphics and add them to the game. 

Creating the Rush Game’s Graphics

We want to set up the foundation GameObject class. 

Defining the GameObject Class

We will create a Platform class so that the avatar will stand on it later. 

Creating a Platform Class

We will create a better hierarchy for the platforms and the avatar.

Adding Platforms to Stage
Moving the Character
5 Lectures 19:59

We want the avatar to stand on the platform. So, we need to check whether they collide 

Preview 03:55

We need to make game objects move. 

Creating Movable Game Objects

We want to make the avatar fall under gravity. 

Applying Gravity to the Avatar

We want to make the avatar run towards the right of the screen. 

Making the Avatar Run

We want to make the avatar jump over a gap when the player presses the mouse button. 

Making the Avatar Jump
Collision Detection
5 Lectures 14:24

We need an enemy before we create our collision detection logic. 

Preview 03:44

Detect collision between hero and the enemy by checking their bounding box. 

Handling Enemy and Hero Collisions

We want to make the collisions work not only on one enemy, but also on any type of game object collection. 

Handling Collisions with Generic Methods

We need another game object type to test our collision detection code. 

Implementing the Coins Objects

Handle the collision between Hero and coins.

Handling Hero-Coins Collision
Building Levels
5 Lectures 18:26

We want continuous platforms with game objects on them. 

Preview 06:08

We want to make the game has more variety by having multiple platform width. 

Creating the Multiple Platform Width

We want different difficulties. 

Defining Levels with Difficulty

We want to generate platforms based on the level data. 

Generating Platforms and Game Objects Based on Level

We want to calculate the accumulated score based on the current level and the coins collected

Level Up with Game Score Multiplier
Polishing the Rush Game
5 Lectures 26:53

We want to add a menu scene before the game starts, so that the game starts when players is ready instead of the game starts when page is loaded. 

Preview 07:44

We want to add a game over scene and connect the scene between menu, game and game over. 

Creating a Game Over Scene

We want to show the game score to the player.

Displaying Scores

We want to make the game’s web page attractive. 

Finalizing Your Game’s Web Page

We want to allow adding the game’s web page to home screen of mobile phones with a nice icon. 

Adding the Game to Home Screen
About the Instructor
Packt Publishing
3.9 Average rating
8,197 Reviews
58,910 Students
687 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.