HTML5 Game Development : Beginner to Pro

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

Reed courses certificate of completion

Digital certificate - Included

• Introduction 33:38

  • 1: Join the Facebook Group 01:00
  • 2: What are you going to Learn Preview 01:47
  • 3: Using Web Server for Chrome 03:59
  • 4: Using GitHub 03:51
  • 5: Setting up a web server on Windows 03:36
  • 6: Setting up a web server on a Mac 06:59
  • 7: Setting up a web server on Linux 05:24
  • 8: Creating, testing and inspecting your test page 04:02
  • 9: Are you ready to start the course 03:00

• Getting Started with the HTML5 Canvas 54:26

  • 10: Showing a Single Image on a HTML5 Canvas Preview 13:28
  • 11: Using the resources 01:00
  • 12: Multiple sprites and frame refreshing 09:45
  • 13: Multiple sprite states and destroying sprites 11:23
  • 14: Adding interactivity 07:53
  • 15: Using Sprite sheets Preview 06:57
  • 16: What do you know about simple sprites 04:00

• Animating Your Sprites 20:12

  • 17: Introducing frame animation 08:20
  • 18: Canvas transforms 06:44
  • 19: Adding user interaction to control the sprite 03:08
  • 20: What have you learned 02:00

• Let's make a Noise 13:25

  • 21: Using the AudioContext interface 04:38
  • 22: Adding music 02:55
  • 23: Adding sound events to a simple game 01:52
  • 24: What have you learned? 04:00

• Creating a Collapse Game 21:42

  • 25: Initialising the collapse game 07:08
  • 26: Understanding the different game states and different sprite states. 01:56
  • 27: Finding the connected sprites using recursion 07:06
  • 28: Updating the game grid, spawning new sprites and handling the drop 05:11
  • 29: Assignment 00:21

• Physics is Fun 25:43

  • 30: Introducing the Matter Physics engine Preview 05:41
  • 31: Adding physics bodies to sprites 03:47
  • 32: Adding mouse events to the physics engine 07:57
  • 33: Controlling sprite animations with physics 04:18
  • 34: What have you learned? 04:00

• Using Spitoon 26:01

  • 35: How to use the Spritoon app 06:48
  • 36: Rigging a Character with the Spritoon Online App Preview 06:51
  • 37: Overview of the Spritoon library 07:27
  • 38: Matrices to move, rotate and scale sprites in a parent-child hierarchy 04:55

• OK - We know enough, Let's make a real game 24:15

  • 39: Save the bear - navigate a polar bear across melting icebergs 06:39
  • 40: Controlling the user character and adding a UI 05:10
  • 41: Adding a download progress bar 02:49
  • 42: Adding instructions and updating sprite layering 05:37
  • 43: Test your knowledge of pre-loading 04:00

• Platformers 22:01

  • 44: Preloading and Scrolling a platform game Preview 09:21
  • 45: Handling the user character 05:29
  • 46: Collision testing 07:11

• Games where the computer is the Opponent 25:55

  • 47: Initialising the reversi game 06:47
  • 48: Adding player moves 11:46
  • 49: Adding computer moves 07:22

• Card Games 38:36

  • 50: Initialising the game 07:15
  • 51: Handling drag and drop 10:08
  • 52: Dealing from the stack 03:40
  • 53: section11 - video4 17:33

• Save and Load 17:29

  • 54: Save and load - server-side 09:16
  • 55: Save and load - client-side 06:13
  • 56: What have you learned? 02:00

• Particle Effects 22:15

  • 57: Introducing particle effects 05:48
  • 58: Using Sprite with the Particle effect Preview 03:20
  • 59: Adding an emitter and gravity 07:21
  • 60: Using global composite operations 03:20
  • 61: Adding particle effects to a game 02:26

• Multi-Player Games 20:18

  • 62: Installing node.js 04:38
  • 63: Handling server-side code 05:56
  • 64: Handling client-side code 04:44
  • 65: What have you learned? 05:00

• Professional Tools 24:16

  • 66: Adobe Animate 09:05
  • 67: Texture Packer and PhysicsEditor 02:30
  • 68: Cocos2d Creator 06:33
  • 69: Phaser.js 06:08

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."

• 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.

• Basic knowledge of setting up a website.

• A text editor, Brackets (free) is recommended.

• A basic knowledge of HTML and javascript is assumed.

Currently there are no Q&As for this course. Be the first to ask a question.