Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Create a HTML5 Game from Scratch to your Wishlist.

Add to Wishlist

Create a HTML5 Game from Scratch

Learn how to make html5 games with this HTML5 game development tutorial.
3.6 (42 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.
821 students enrolled
Last updated 9/2015
$15 $200 92% off
30-Day Money-Back Guarantee
  • 2.5 hours on-demand video
  • 2 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?

At ZENVA we specialize in making high-quality technology courses that will give you all the skills you need to turn your ideas into reality. Get in touch to find out about our latest courses and discounts:

Making games is a lot easier than you think. Imagine you could learn how to make HTML5 games that run in all browsers and Windows 8 with our HTML5 game development tutorial in only 2.5 hours! Well, that is exactly what this course does.

We know you've always wanted to make your own games. Don't keep postponing it. Start TODAY

Learn how to create a Zelda-like action game demo from scratch using only Javascript and HTML. No experience or previous knowledge is required! Although knowing the basics of HTML and Javascript is recommended.

This HTML5 game development tutorial is aimed for both beginners and more advanced users who may have HTML5 experience but haven't got into games yet.

Some of the topics you'll learn by building this game from total scratch:

● Creating a basic game that can be embed in any website and can be played with just a web browser.

● Displaying a map and characters on the screen.

● Moving a player on this map.

● Using collision detection to simulate the shooting of bad guys.

● Adding enemies to your games.

● Adding sound to your games.

● Putting it all together to create a fun playable demo.

● All game files, including images and sound are available at the end of each chapter for download.

This HTML5 game development tutorial has been created by Jacob Deichert in collaboration with Pablo Farias. Jacob has created comprehensive HTML5 game dev screencast tutorials on YouTube and other platforms. Pablo is the author of another awesome game dev course called HTML5 Mobile Game Development for Beginners, which you are also welcome to check out.

Who is the target audience?
  • Game enthusiasts who want to turn their game ideas into reality
Students Who Viewed This Course Also Viewed
What Will I Learn?
Learn how to create a simple game using HTML5's CANVAS API
View Curriculum
  • Basic JavaScript knowledge will be of help
Curriculum For This Course
Expand All 29 Lectures Collapse All 29 Lectures 02:25:22
Drawing the background
8 Lectures 31:04

Download course files

In this chapter, we get all of the beginning tasks out of the way. We setup our working directory, all of our files, and get the canvas to draw the background.
Preview 05:12

Drawing the Background - part 2

Drawing the Background - part 3

Drawing the Background - part 4

Drawing the Background - part 5
Update. Draw. Loop
1 Lecture 06:43

In this chapter, we create the very important update, draw, and loop functions. They are used to update and draw each frame which is requested from the browser using requestAnimationFrame.

Update, draw, loop
Drawing the Player
3 Lectures 14:17

In this chapter, we create the player's object, along with it's update and draw functions which allow the player to be drawn to the canvas.

Drawing the player

Drawing the Player - part 2

Drawing the Player - part 3
Controlling the Player
4 Lectures 21:33
In this chapter, we setup event listeners for the arrow keys as well as the spacebar. We also check which direction the player is moving and if they try to go out of bounds.
Controlling the Player

Controlling the Player - part 2

Controlling the Player - part 3

Controlling the Player - part 4
Blocking Objects
4 Lectures 19:56

In this chapter, we create the obstacle object and define where all of the blocking objects on the background are located. Then we check to see if the player collides with any of them.

Blocking Objects

Blocking Objects - part 2

Blocking Objects - part 3

Blocking Objects - part 4
Drawing Enemies
2 Lectures 10:56
The Bad Guys

The Bad Guys - part 2
Moving Enemies
2 Lectures 12:29
Moving Enemies

Moving Enemies - part 2
2 Lectures 12:20

In this chapter, we get started with bullets by creating the bullet object along with it's update, draw, and fire functions. We also add a sound effect for when the bullet is fired.


Shoot! - part 2
Bullet Collisions
1 Lecture 07:33

In this chapter, we check to see if the bullets collide with any alive enemies, an obstacle, or if they try to go out of bounds.

Bullet Collisions
The Game is Ready!
1 Lecture 07:50

In this chapter, we finally check to see if and when the player is shooting, as well as drawing all of the bullets to the canvas. The game is finally finished and fully playable!

The Game is Ready!
1 More Section
About the Instructor
4.3 Average rating
4,021 Reviews
125,654 Students
43 Courses
Software Developer and Founder of ZENVA

Software developer and founder of ZENVA. Since 2012, Pablo has been teaching online how to create games, apps and websites to over 200,000 students through the Udemy and Zenva Academy platforms, and created content for companies such as Amazon and Intel.

Pablo is a member of the Intel Innovator Program in the Asia Pacific, and has run live programming workshops in San Francisco, Brisbane and Bangalore.

Pablo holds a Master in Information Technology (Management) degree from the University of Queensland (Australia) and a Master of Science in Engineering degree from the Catholic University of Chile.

Report Abuse