Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Mindfulness Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Freelancing Online Business Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Game Development Fundamentals

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.
Rating: 3.6 out of 53.6 (136 ratings)
1,252 students
Created by Nicholas Lever
Last updated 11/2020
English
English [Auto]
30-Day Money-Back Guarantee

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

15 sections • 59 lectures • 5h 43m total length

  • Join the Facebook Group
    00:12
  • Preview01:47
  • Using Web Server for Chrome
    03:59
  • Using GitHub
    03:51
  • Setting up a web server on Windows
    03:36
  • Setting up a web server on a Mac
    06:58
  • Setting up a web server on Linux
    05:23
  • Creating, testing and inspecting your test page
    04:02
  • Are you ready to start the course
    6 questions

  • Showing a single image on a HTML5 canvas
    Preview13:28
  • Using the resources
    00:35
  • Multiple sprites and frame refreshing
    09:45
  • Multiple sprite states and destroying sprites
    11:23
  • Adding interactivity
    07:53
  • Preview06:57
  • What do you know about simple sprites
    6 questions

  • Introducing frame animation
    08:20
  • Canvas transforms
    06:43
  • Adding user interaction to control the sprite
    03:07
  • What have you learned
    3 questions

  • Using the AudioContext interface
    04:37
  • Adding music
    02:55
  • Adding sound events to a simple game
    01:52
  • What have you learned?
    4 questions

  • Initialising the collapse game
    07:07
  • Understanding the different game states and different sprite states.
    01:56
  • Finding the connected sprites using recursion
    07:06
  • Use recursion to find connected items in a 8 x 9 grid
    1 question
  • Updating the game grid, spawning new sprites and handling the drop
    05:11
  • Amending the collapse game
    1 question

  • Preview05:41
  • Adding physics bodies to sprites
    03:47
  • Adding mouse events to the physics engine
    07:57
  • Controlling sprite animations with physics
    04:18
  • What have you learned?
    6 questions

  • How to use the Spritoon app
    06:48
  • Preview06:50
  • Overview of the Spritoon library
    07:26
  • Matrices to move, rotate and scale sprites in a parent-child hierarchy
    04:55

  • Save the bear - navigate a polar bear across melting icebergs
    06:39
  • Controlling the user character and adding a UI
    05:09
  • Adding a download progress bar
    02:48
  • Adding instructions and updating sprite layering
    05:36
  • Create a Spritoon Anim
    1 question
  • Test your knowledge of pre-loading
    4 questions

  • Preview09:21
  • Handling the user character
    05:28
  • Collision testing
    07:11

  • Initialising the reversi game
    06:47
  • Adding player moves
    11:45
  • 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.

Instructor

Nicholas Lever
Game developer
Nicholas Lever
  • 4.4 Instructor Rating
  • 1,373 Reviews
  • 7,790 Students
  • 9 Courses

After getting a degree in Graphic Design, I started work in 1980 as a cartoon animator. Buying a Sinclair ZX81 back in 1982 was the start of a migration to a full time programmer. The ZX81 was quickly swapped for the Sinclair Spectrum, a Z80 processor and a massive 48K of ram made this a much better computer to develop games. I developed a few games using Sinclair Basic and then Assembler. The Spectrum was swapped for a Commodore Amiga and I developed more games in the shareware market, moving to using C. At this stage it was essentially a hobby. Paid work was still animated commercials. 

I finally bought a PC in the early nineties and completed an Open University degree in Maths and Computing. I created a sprite library ActiveX control and authored my first book, aimed at getting designers into programming. In the mid nineties along came Flash and the company I was now running, Catalyst Pictures, became known for creating games. 

Since then the majority of my working life has been creating games, first in Flash and Director, as Director published the first widely available 3D library that would run in a browser using a plugin. 

In recent years game development has involved using HTML5 and Canvas. Using both custom code and various libraries. A particular preference is to use the latest version of Adobe Flash, now called Animate that exports to the Javascript library Createjs. 

I've worked for the BBC. Johnson and Johnson. Deloitte, Mars Corporation and many other blue chip clients. The company I've run for over 30 years has won a number of awards and been nominated for a BAFTA twice, the UK equivalent to the Oscar. 

Over the last 20 years I have been struck by just how difficult it has been to get good developers and have decided to do something about this rather than just complain. I run a CodeClub for kids 9-13 years old and I'm developing a number of courses for Udemy hoping to inspire and educate new developers. Most of my courses involve real-time 3d either using the popular Open Source library Three.JS or Unity. I'm currently having a lot of fun developing WebXR games and playing with my Oculus Quest.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.