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

HTML5 Game Development - Second Edition

Video Description

Create robust and spectacular games in two hours with these fast-paced, yet beginner-friendly videos based on HTLM5

About This Video

  • Program your very own game from scratch using HTML Canvas with modularized JavaScript game logic

  • Unfold the game design with simplified game logic, physics, and collision

  • Packed with step-by-step instructions and supporting explanations to help you build games that run on desktop and mobile browsers

  • In Detail

    HTML5 and related web standards, such as JavaScript and CSS3, enable the delivery of new and exciting multimedia using the native features of new and more capable web browsers. It allows game developers to create fun, exciting, and immersive games, as well as other interactive content to engage your users.

    This course will take you through all you need to know to get started creating your first game in HTML5. It starts by introducing you to working with HTML5 to create web-based games. Through practical game examples, you will understand how to work with HTML to create game logic, work with animations in CSS3, add audio, implement basic physics and collision detection, build levels, and polish the game with menus and game over sequences.

    You will see how to write games with the graphical in-browser drawing capabilities of HTML Canvas, with the support of the CreateJS library. It also covers how to make games mobile-friendly. By the end of this video, you will be comfortable creating in-browser games in HTML and CSS.

    Table of Contents

    1. Chapter 1 : Planning the Count game
      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
    2. Chapter 2 : Creating the Core logic
      1. Displaying Multiple Objects on Stage 00:04:08
      2. Adding Tap Input Events 00:02:36
      3. Making the Game Mobile Friendly 00:05:06
      4. Adding the Game Logic 00:02:42
      5. Adding the Game Over Logic 00:03:05
    3. Chapter 3 : Polishing the Count Game
      1. Animating the Game Over Scene 00:10:29
      2. Restarting the Game 00:02:02
      3. Adding Custom Web Font 00:04:22
      4. Adding Audio Effect 00:04:46
      5. Deploying the Game on the Web 00:05:07
    4. Chapter 4 : Preparing the Rush Game
      1. Planning the Rush Game 00:04:06
      2. Creating the Rush Game’s Graphics 00:09:29
      3. Defining the GameObject Class 00:04:08
      4. Creating a Platform Class 00:01:51
      5. Adding Platforms to Stage 00:02:56
    5. Chapter 5 : Moving the Character
      1. Handling Platforms and Avatar Collisions 00:03:55
      2. Creating Movable Game Objects 00:04:56
      3. Applying Gravity to the Avatar 00:04:22
      4. Making the Avatar Run 00:02:40
      5. Making the Avatar Jump 00:04:07
    6. Chapter 6 : Collision Detection
      1. Implementing the Enemy Game Object 00:03:45
      2. Handling Enemy and Hero Collisions 00:03:01
      3. Handling Collisions with Generic Methods 00:02:29
      4. Implementing the Coins Objects 00:02:17
      5. Handling Hero-Coins Collision 00:02:54
    7. Chapter 7 : Building Levels
      1. Placing Platforms and Game Objects Together 00:06:09
      2. Creating the Multiple Platform Width 00:03:02
      3. Defining Levels with Difficulty 00:03:24
      4. Generating Platforms and Game Objects Based on Level 00:02:51
      5. Level Up with Game Score Multiplier 00:03:04
    8. Chapter 8 : Polishing the Rush Game
      1. Creating a Main Menu Scene 00:07:44
      2. Creating a Game Over Scene 00:04:16
      3. Displaying Scores 00:03:26
      4. Finalizing Your Game’s Web Page 00:04:20
      5. Adding the Game to Home Screen 00:07:09