O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning Path: Program Your Own Games with HTML5

Video Description

Build interactive games

In Detail

We always think “I wish I could turn my game idea into a real concept that works cross platform”. Worry no more. With this smooth Learning Path, you’ll be able to create exciting, immersive, and interactive games using the power of HTML5. Game developers and designers absolutely love HTML5 since it simplifies the job of creating graphically-rich interactive games for the Internet and mobile devices. This Learning Path will take you on a journey of creating robust, advanced, and interactive games taking the full advantage of all the HTML5 features.

Prerequisites: Requires a working knowledge of HTML and CSS at a rudimentary level. Aimed at anyone who wish to acquire practical skills to program and build their own games at home.

Resources: Code downloads and errata:

  • HTML5 Animation and Transition

  • HTML5 Game Development - Second Edition

  • Mastering HTML5 Game Development

  • PATH PRODUCTS

    This path navigates across the following products (in sequential order):

  • HTML5 Animation and Transition (2h 22m)

  • HTML5 Game Development - Second Edition (2h 51m)

  • Mastering HTML5 Game Development (2h 20m)

  • Table of Contents

    1. Chapter 1: HTML5 Animation and Transition
      1. Introduction 00:02:34
      2. What is the Difference between a Transition and an Animation? 00:02:31
      3. Introduction to Vectors 00:03:22
      4. Vector Examples 00:04:57
      5. Easing and Acceleration 00:03:20
      6. Interpolation 00:04:07
      7. Rendering Elements Using DOM Objects #1 00:02:24
      8. Rendering Elements Using DOM Objects #2 00:03:00
      9. Rendering Elements Using the HTML5 Canvas Object #1 00:03:00
      10. Rendering Elements Using the HTML5 Canvas Object #2 00:02:44
      11. Rendering Elements Using SVG with Raphaël #1 00:02:38
      12. Rendering Elements Using SVG with Raphaël #2 00:02:27
      13. Setting up a Conventional Rendering Scene 00:04:59
      14. Using the DOM to Animate Objects 00:03:51
      15. Animating Elements Using CSS3 Transitions 00:05:17
      16. Animating Elements Using CSS3 Keyframes 00:03:50
      17. Using SVG with Raphaël to Animate Objects 00:03:39
      18. Animating Elements Using the HTML5 Canvas Object #1 00:03:35
      19. Animating Elements Using the HTML5 Canvas Object #2 00:04:47
      20. Downloading and Setting Up Three.JS 00:03:53
      21. Introduction to Cameras 00:02:13
      22. Rendering Simple Geometries 00:03:29
      23. Animating Geometries 00:03:58
      24. Importing Models from Blender 00:04:39
      25. Rendering Imported Models 00:04:37
      26. Animating Imported Models 00:04:48
      27. Animating Spritesheets #1 00:05:08
      28. Animating Spritesheets #2 00:05:24
      29. Particle Generators #1 00:04:58
      30. Particle Generators #2 00:05:01
      31. Particle Generators #3 00:04:52
      32. Practical Examples #1 00:04:41
      33. Practical Examples #2 00:04:05
      34. Practical Examples #3 00:04:44
    2. Chapter 2 : HTML5 Game Development - Second Edition
      1. The Course Overview 00:03:51
      2. Setting Up Your File Structure 00:05:48
      3. Setting Up the Canvas with CreateJS 00:03:47
      4. Preparing the Graphics 00:05:58
      5. Implementing Your First Game Object 00:05:42
      6. Displaying Multiple Objects on Stage 00:04:08
      7. Adding Tap Input Events 00:02:36
      8. Making the Game Mobile Friendly 00:05:06
      9. Adding the Game Logic 00:02:42
      10. Adding the Game Over Logic 00:03:05
      11. Animating the Game Over Scene 00:10:29
      12. Restarting the Game 00:02:02
      13. Adding Custom Web Font 00:04:22
      14. Adding Audio Effect 00:04:46
      15. Deploying the Game on the Web 00:05:07
      16. Planning the Rush Game 00:04:06
      17. Creating the Rush Game’s Graphics 00:09:29
      18. Defining the GameObject Class 00:04:08
      19. Creating a Platform Class 00:01:51
      20. Adding Platforms to Stage 00:02:56
      21. Handling Platforms and Avatar Collisions 00:03:55
      22. Creating Movable Game Objects 00:04:56
      23. Applying Gravity to the Avatar 00:04:22
      24. Making the Avatar Run 00:02:40
      25. Making the Avatar Jump 00:04:07
      26. Implementing the Enemy Game Object 00:03:45
      27. Handling Enemy and Hero Collisions 00:03:01
      28. Handling Collisions with Generic Methods 00:02:29
      29. Implementing the Coins Objects 00:02:17
      30. Handling Hero-Coins Collision 00:02:54
      31. Placing Platforms and Game Objects Together 00:06:09
      32. Creating the Multiple Platform Width 00:03:02
      33. Defining Levels with Difficulty 00:03:24
      34. Generating Platforms and Game Objects Based on Level 00:02:51
      35. Level Up with Game Score Multiplier 00:03:04
      36. Creating a Main Menu Scene 00:07:44
      37. Creating a Game Over Scene 00:04:16
      38. Displaying Scores 00:03:26
      39. Finalizing Your Game’s Web Page 00:04:20
      40. Adding the Game to Home Screen 00:07:09
    3. Chapter 3 : Mastering HTML5 Game Development
      1. The Course Overview 00:01:57
      2. CreateJS Overview 00:06:44
      3. Playing Sounds in Various Browsers Using SoundJS 00:03:46
      4. Tweening Objects Using TweenJS 00:06:11
      5. Loading Graphic Assets Using PreloadJS 00:07:39
      6. Creating the Graphic Assets 00:04:30
      7. Creating Basic Animations 00:03:40
      8. Game Stage Creation and Object Positioning 00:05:07
      9. Game Logic Overview 00:01:45
      10. Adding the Basic Game Logic – Part 1 00:06:19
      11. Adding the Basic Game Logic – Part 2 00:04:40
      12. Adding the Game Physics – Part 1 00:08:20
      13. Adding the Game Physics – Part 2 00:05:58
      14. Adding the Game Physics – Part 3 00:07:43
      15. Creating the Scoring System 00:07:18
      16. Adding Mouse Controls 00:07:40
      17. Adding Keyboard Controls 00:08:45
      18. Mobile Support 00:03:12
      19. WebStorage – Saving the Game Data 00:07:12
      20. Chrome Developer Console Overview 00:06:28
      21. Debugging with Breakpoints in Chrome 00:03:07
      22. Firefox Debugging 00:02:46
      23. Debugging on Android 00:02:42
      24. Debugging on iOS 00:03:17
      25. Common Errors 00:07:08
      26. Troubleshooting 00:02:48
      27. Additional References and Wrapping Up 00:03:46