HTML5 Game Development : Beginner to Pro
4.6 (89 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
934 students enrolled

HTML5 Game Development : Beginner to Pro

Learn to use the HTML5 Canvas to create HTML5 games that will run in all modern desktop and mobile browsers.
4.6 (89 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
934 students enrolled
Created by Nicholas Lever
Last updated 2/2019
English
English [Auto-generated]
Current price: $37.99 Original price: $54.99 Discount: 31% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 5.5 hours on-demand video
  • 2 articles
  • 33 downloadable resources
  • 3 coding exercises
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Create stunning games that will run in most modern browsers, desktop and mobile.
  • Understand how to approach a complex interactive game for a client.
  • Understand how to approach multi-player games using web sockets.
  • How to add the bells and whistles to your game that make it stand out in the market
Course content
Expand all 58 lectures 05:39:14
+ Introduction
7 lectures 25:57
Join the Facebook Group
00:12

To use the resources from the course or to develop your own games, you will need a web server. Far and away the simplest option is to use Web Server for Chrome. You will need the Chrome browser installed on your development device. In this lecture we look at downloading, installing and using this simple web server.

Using Web Server for Chrome
03:59

This lecture shows the user how to setup their Windows computer as a web-server, including installing MySql and PHP. In addition we look at installing MySQL Workbench to manage databases. 

Setting up a web server on Windows
03:36

This lecture shows the user how to setup their Mac as a web-server, including installing MySql and PHP. In addition we look at installing Sequel Pro to manage databases. 

Setting up a web server on a Mac
06:58

This lecture shows the user how to setup their Linux computer as a web-server, including installing MySql and PHP. In addition we look at installing MySQL workbench to manage databases. 

Setting up a web server on Linux
05:23

We look at creating a simple HTML page, viewing it, setting break-points, inspecting it and entering javascript directly in the browser. 

Creating, testing and inspecting your test page
04:02

Answer most questions correctly and you have the necessary prerequisites to make the most from the course.

Are you ready to start the course
6 questions
+ Getting started with the HTML5 Canvas
6 lectures 50:01
  • In this video you will be introduced to the HTML5 Canvas for the first time. 
  • You'll be introduced to ES6 classes
  • You'll create a simple Game and Sprite class
  • You will display a single Sprite image on the Canvas

Download the resources, unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

Preview 13:28
Using the resources
00:35
  • In this video you will look display multiple sprites
  • You will create a game loop that is called each time the browser refreshes the screen.

Download the resources, unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

Multiple sprites and frame refreshing
09:45
  • In this video you will begin to see a game take shape. 
  • We add multiple states to the Sprite class
  • We learn how to remove sprites from the render method.

Download the resources, unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

Multiple sprite states and destroying sprites
11:23
  • Adding event listeners to handle mouse and touch interaction.
  • Hit testing
  • Anchor points for sprites, so that scaling and rotation is from the centre of the sprite not the top left corner.

Download the resources, unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

Adding interactivity
07:53
  • Learn to use spritesheets in your games.
  • More information about anchor points

Download the resources (sc02vid05.zip), unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

sc02vid05a.zip contains a more sophisticated game. We will look into this in a later lecture but please review it now to see if you can get an overview on how it is working. 

Preview 06:57

Double check your knowledge of sprites, sprite-sheets and simple animations.

What do you know about simple sprites
6 questions
+ Animating your sprites
3 lectures 18:10
  • Creating sprites that animate through a flick book of images to show different actions
  • Revising the states object to work through a series of images

Download the resources, unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

Introducing frame animation
08:20
  • Allowing a sprite to be flipped horizontally using canvas transforms
  • Developing our sprite library to handle horizontal scaling

Download the resources, unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

Canvas transforms
06:43
  • Using mouse and touch events to control the sprite

Download the resources, unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

Adding user interaction to control the sprite
03:07
What have you learned
3 questions
+ Let's make a noise
3 lectures 09:24
  • Introduces the AudioContext interface to handle multi-layered audio
  • Creates a SFX class to hide the complexity of loading, decoding and playing audio buffers
  • Shows an example of a single SFX being played using the new class

Download the resources, unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

Using the AudioContext interface
04:37
  • Add music
  • Control volume
  • Use multiple sfx

Download the resources, unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

Adding music
02:55
  • Add sfx to a simple game. 

Download the resources, unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

Adding sound events to a simple game
01:52
What have you learned?
4 questions
+ Creating a collapse game
4 lectures 21:20
  • How to initialise the game
  • Arrays of Arrays
  • Game states
  • Having the Sprite inform its parent the Game

Download the resources, unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

Initialising the collapse game
07:07
  • Understand the importance of game and sprite states

Download the resources, unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

Understanding the different game states and different sprite states.
01:56
  • Using recursion to get an array of connected sprites

Find the resources in video 1 for this section.

Finding the connected sprites using recursion
07:06
Use recursion to find connected items in a 8 x 9 grid
1 question
  • Handle moving sprites in the game grid
  • Handle spawning new sprites to fill any gaps
  • Handling the dropping state

Find the resources in video 1 for this section.

Updating the game grid, spawning new sprites and handling the drop
05:11
Can you change the code so it only connects sprites that are horizontally or vertically connected. Not diagonally. All code amends will be to the getConnectedSprites method of the Game class.
Amending the collapse game
1 question
+ Physics is fun
4 lectures 21:43
  • Introduces the Matter physics engine
  • Shows how to create some physics bodies using Matter.Bodies
  • Shows how to create an engine using Matter.Engine
  • Shows how to update the engine

Download the resources, unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

Preview 05:41
  • Learn how to build the physics engine into your sprite library

Download the resources, unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

Adding physics bodies to sprites
03:47
  • Learn to add mouse drag events to a game using mouseConstraints
  • Learn how to remove a physics body when clicked on

Download the resources, unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

Adding mouse events to the physics engine
07:57
  • Learn how to limit which body can be dragged and which cannot
  • Learn how to control an animation using collision events
  • Learn how to control an animation using the physics body velocity

Download the resources, unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

Controlling sprite animations with physics
04:18
What have you learned?
6 questions
+ Using Spritoon
4 lectures 25:59
How to use the Spritoon app
06:48
  • Learn how to rig and animate a character
Preview 06:50
  • Learn about the Actor and Action classes
  • Learn about the AnimSprite and Anim classes
Overview of the Spritoon library
07:26
  • Learn about matrix operation
Matrices to move, rotate and scale sprites in a parent-child hierarchy
04:55
+ OK - we know enough, let's make a real game
4 lectures 20:12
  • Introduces the game
  • Describes the four stages of development
  • Outlines creating the ice field

Download the resources, unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

Save the bear - navigate a polar bear across melting icebergs
06:39
  • Adds animations to the user character
  • Adds a simple UI

Download the resources, unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

Controlling the user character and adding a UI
05:09
  • Adding download progress using the Preloader class in the Spritoon library
  • Adds a css and div to display the bar without the need for graphics

Download the resources, unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

Adding a download progress bar
02:48
  • Adding instruction screens using the Spritoon class TextBlock
  • Adding level spawning
  • Increasing the difficulty
  • Controlling sprite images with index control

Download the resources, unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

Adding instructions and updating sprite layering
05:36
Create a Spritoon Anim
1 question
Test your knowledge of pre-loading
4 questions
+ Platformers
3 lectures 22:00
  • Handling seamless background scrolling
  • Handle moving common position to scroll all sprites
  • Handle parallax scrolling

Download the resources, unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

Preview 09:21
  • Describes animations
  • Handling different user states
  • Using the mouse to control the character

Use the resources from video 1 in this section to work along with the content. 

Handling the user character
05:28
  • How to get the character to land on a platform or the floor.

Use the resources from video 1 in this section to work along with the content. 

Collision testing
07:11
+ Games where the computer is the opponent
3 lectures 25:54
  • Initialising the game
  • Handling resizing

Download the resources, unzip, create a new folder on your web-server and add the files. Run the game in your browser and use a text editor to work along with the code description.

Initialising the reversi game
06:47
  • Learn how to find legal moves
  • Learn how to find the tiles to flip
  • Learn about how to scan a line of tiles

Use the resources from video 1 in this section to work along with the description.

Adding player moves
11:45
  • Create a class to hold a board state
  • Calculate a score for a state based on cell weighting
  • Calculate which legal move is best for the computer based on black and white scores

Use the resources from video 1 in this section to work along with the description.

Adding computer moves
07:22
Requirements
  • Basic knowledge of setting up a website.
  • A text editor, Brackets (free) is recommended.
  • A basic knowledge of HTML and javascript is assumed.
Description

HTML5 Games run on just about all devices. Learn how to create them from someone who has spent the last 20 years creating casual games. All HTML5 games are based around a knowledge of displaying content on a Canvas using JavaScript. We use the latest JavaScript version, ES6, so as well as learning game development you will also learn the latest JavaScript syntax. In this course we start with the basics of individual images on a Canvas. From there we move onto sprites - developing step by step a sprite library that you are free to use in your own games. The library allows you to display frame animated sprites that show a flip book of images to display walking and running characters and much more. 

You will learn: 

  • About physics to easily add dynamic collision detection to your games.

  • How to create platform games, puzzle and card games.

  • How to add multiple layers of audio.

  • How to add a preloader to your games.

  • How to add the bells and whistles that make your game stand out.

  • How to handle multiple users via WebSockets. 

All code is free to use in your own games. The course contains lots of assets and code examples that you are free to use in your own games. As a course student you also have access to an online tool for creating spritesheets and animations. 

Having completed this course you will be ready to develop any 2d game. Only a basic knowledge of HTML and Javascript are assumed, all ideas are explained with examples you can try and resources you can use in your own games

Take a look at the trailer to see the kind of content that you will be building once you've studied the course. HTML5 Game Development is great fun to learn and the skills you learn in this course will greatly improve your JavaScript skills which will be useful in your Web Development career.

Student reviews

  • “Great Course!!! I am learning so much. Nicholas is very good at presenting a concept explaining it and then implementing it into code all the while, allowing me the student to code along addressing any nuances that may be there. He is also very responsive to any questions. I know that enrolling into this course was a great decision and I already have the confidence to begin planning and developing my first game”

  • "If you're looking for the stepping stones to becoming a Game Developer with HTML5, this is the best starting stone you could possibly find. Love this course!!"

  • "This is the first game development course I have been through where I really feel like I am being taught by an absolute expert/professional in the field."

Who this course is for:
  • Students wishing to learn about 2d game authoring
  • Developers who want to use the HTML5 canvas for complex graphic content.
  • Students who want to learn tips and tricks from a pro on interactive sprite animation
  • Developers who want to learn how to create platform, tiled, card and puzzle games.