Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

HTML5 Game Development : Beginner to Pro

Name: HTML5 Game Development : Beginner to Pro
Rating: 3.9 (175 reviews)

Learn to use the HTML5 Canvas to create HTML5 games that will run in all modern desktop and mobile browsers.

Created byNicholas Lever

Last updated 11/2024

English

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

Coding Exercises

This course includes our updated coding exercises so you can practice your skills as you learn.

Course content

15 sections • 61 lectures • 5h 44m total length

Join the Facebook Group0:12
JavaScript in 12 Easy Lessons - e-book0:28
What are you going to learn1:47
Using Web Server for Chrome3:59
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. Most web pages need to download additional resources, images or other assets. If working from your local machine then if the url begins with file:// then this means using the local file system and this is not allowed for security reasons. To work on the game we will develop in this course we need to use a Web Server so we can use http:// - in this lecture I show how easy this is done by using Web Server for Chrome, a Chrome extension that is freely available and makes setting up a local web server very easy.
Update:
Web Server for Chrome is a Chrome App and Chrome Apps are being discontinued. Instead use Simple Web Server - https://simplewebserver.org/. Created by the same developer it works in the same way.
Create a New Server
Choose the folder
Click the blue link to open in your browser
Using GitHub3:51
Setting up a web server on Windows3:36
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 a Mac6:58
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 Linux5:23
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.
Creating, testing and inspecting your test page4:02
We look at creating a simple HTML page, viewing it, setting break-points, inspecting it and entering javascript directly in the browser.
Are you ready to start the course

Showing a single image on a HTML5 canvas13:28
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.
Using the resources0:35
Multiple sprites and frame refreshing9:45
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 sprite states and destroying sprites11:23
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.
Adding interactivity7:53
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.
Using sprite sheets6:57
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.
What do you know about simple sprites

Introducing frame animation8:20
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.
Canvas transforms6:43
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.
Adding user interaction to control the sprite3:07
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.
What have you learned

Using the AudioContext interface4:37
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.
Adding music2:55
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 sound events to a simple game1:52
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.
What have you learned?

Initialising the collapse game7:07
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.
Understanding the different game states and different sprite states.1:56
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.
Finding the connected sprites using recursion7:06
Using recursion to get an array of connected sprites
Find the resources in video 1 for this section.
Use recursion to find connected items in a 8 x 9 grid
Updating the game grid, spawning new sprites and handling the drop5:11
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.
Amending the collapse game

Introducing the Matter physics engine5:41
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.
Adding physics bodies to sprites3:47
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 mouse events to the physics engine7:57
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.
Controlling sprite animations with physics4:18
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.
What have you learned?

Save the bear - navigate a polar bear across melting icebergs6:39
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.
Controlling the user character and adding a UI5:09
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.
Adding a download progress bar2:48
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 instructions and updating sprite layering5:36
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.
Create a Spritoon Anim
Test your knowledge of pre-loading

Preloading and scrolling a platform game9:21
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.
Handling the user character5:28
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.
Collision testing7:11
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.

Initialising the reversi game6:47
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.
Adding player moves11:45
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 computer moves7:22
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.

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."
"I am currently taking a gaming class in college and this course so far has been able to help me understand what the professor was doing as they expected you to know just a proper setup which I didn't, and this course brought me up to speed very quickly by just doing the initial setup."

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.

HTML5 Game Development : Beginner to Pro

What you'll learn

Explore related topics

Coding Exercises

Course content

Introduction9 lectures • 30min

Getting started with the HTML5 Canvas6 lectures • 50min

Animating your sprites3 lectures • 18min

Let's make a noise3 lectures • 9min

Creating a collapse game4 lectures • 21min

Physics is fun4 lectures • 22min

Using Spritoon4 lectures • 26min

OK - we know enough, let's make a real game4 lectures • 20min

Platformers3 lectures • 22min

Games where the computer is the opponent3 lectures • 26min

Requirements

Description

Who this course is for: