About this Course

This course will walk you through the major components of building GRITS, an HTML5 game. We'll talk about how to take standard game development techniques, and use them to create high performance HTML5 applications.

Play Trailer Play Trailer
Course Cost
Free
Timeline
Approx. 2 months
Skill Level
Intermediate
Included in Course
  • Rich Learning Content

  • Interactive Quizzes

  • Taught by Industry Pros

  • Self-Paced Learning

  • Student Support Community

Join the Path to Greatness

This free course is your first step towards a new career with the VR Developer Nanodegree Program.

Free Course

HTML5 Game Development

by Google

Enhance your skill set and boost your hirability through innovative, independent learning.

Icon steps 54aa753742d05d598baf005f2bb1b5bb6339a7d544b84089a1eee6acd5a8543d

Course Leads

  • Colt McAnlis
    Colt McAnlis

    Instructor

  • Peter Lubbers
    Peter Lubbers

    Instructor

  • Sean Bennett
    Sean Bennett

    Instructor

What You Will Learn

Lesson 1

Introduction to Canvas rendering

  • Explains the basics of the canvas element as well as image formats.
Lesson 1

Introduction to Canvas rendering

  • Explains the basics of the canvas element as well as image formats.
Lesson 2

Atlases

  • How can the canvas be manipulated to handle a lot of graphics at once.
  • Atlases versus Spritesheets
  • How to find the true boundaries of an image with frame trimming.
Lesson 2

Atlases

  • How can the canvas be manipulated to handle a lot of graphics at once.
  • Atlases versus Spritesheets
  • How to find the true boundaries of an image with frame trimming.
Lesson 3

Map rendering

  • Shooting robots: Drawing the map.
  • Tiled map data and deep dive into map data.
Lesson 3

Map rendering

  • Shooting robots: Drawing the map.
  • Tiled map data and deep dive into map data.
Lesson 4

Basic Input, handling events

  • Capturing user input.
  • Event listeners and keyboard input.
  • Keyboard firing and mouse firing.
Lesson 4

Basic Input, handling events

  • Capturing user input.
  • Event listeners and keyboard input.
  • Keyboard firing and mouse firing.
Lesson 5

The entity hierarchy

  • Building an entity.
  • Order of operations.
Lesson 5

The entity hierarchy

  • Building an entity.
  • Order of operations.
Lesson 6

Box2D, and using external libraries

  • Pixel perfect collision.
  • How to use Box2D.
Lesson 6

Box2D, and using external libraries

  • Pixel perfect collision.
  • How to use Box2D.
Lesson 7

Adding sound

  • Getting sounds into your game.
  • Sound and WebAudio.
Lesson 7

Adding sound

  • Getting sounds into your game.
  • Sound and WebAudio.
Lesson 8

Asynchronous Loading

  • Asset loading and asset managers.
  • Caching images.
  • GRITS loading.
Lesson 8

Asynchronous Loading

  • Asset loading and asset managers.
  • Caching images.
  • GRITS loading.

Prerequisites and Requirements

Knowledge of HTML, Javascript, and how the web works is necessary for this course. There is an optional lesson on the specific parts of Javascript and the DOM that you'll need for this class as a refresher, but this is not an introductory course on Javascript.

See the Technology Requirements for using Udacity.

Why Take This Course

At the end of this course, you'll understand how to develop an HTML5 game. You will gain familiarity with HTML5 features such as 2D canvas and techniques for improving performance.

What do I get?
  • Instructor videos
  • Learn by doing exercises
  • Taught by industry professionals

Thanks for your interest!

We'll be in touch soon.

Icon globe e82eae5d45465aba4fbe4bb746905ce55dc3324f310b79c60e4a20089057d347

Udacity 现已提供中文版本! A Udacity tem uma página em português para você! There's a local version of Udacity for you! Sprechen Sie Deutsch?

Besuchen Sie de.udacity.com und entdecken Sie lokale Angebote, unsere Partnerunternehmen und Udacitys deutschsprachigen Blog.

前往优达学城中文网站 Ir para a página brasileira Go to Indian Site Icon flag de deedb1a7a695700236cb6ef4204ddbede5d197dab9b47716c87a0b4d5d9fc325 Zu de.udacity.com continue in English