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
HTML5 Game Development
Course Cost
Free
Timeline
Approx. 2 months
Skill Level
Intermediate
Included in Course
  • Icon course 01 3edf6b45629a2e8f1b490e1fb1516899e98b3b30db721466e83b1a1c16e237b1 Rich Learning Content

  • Icon course 04 2edd94a12ef9e5f0ebe04f6c9f6ae2c89e5efba5fd0b703c60f65837f8b54430 Interactive Quizzes

  • Icon course 02 2d90171a3a467a7d4613c7c615f15093d7402c66f2cf9a5ab4bcf11a4958aa33 Taught by Industry Pros

  • Icon course 05 237542f88ede3178ac4845d4bebf431ddd36d9c3c35aedfbd92e148c1c7361c6 Self-Paced Learning

  • Icon course 03 142f0532acf4fa030d680f5cb3babed8007e9ac853d0a3bf731fa30a7869db3a Student Support Community

Join the Path to Greatness

This free course is your first step towards a new career with the Senior Web 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
Icon globe e82eae5d45465aba4fbe4bb746905ce55dc3324f310b79c60e4a20089057d347

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

前往优达学城中文网站 Ir para a página brasileira Go to Indian Site or continue to Global Site