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

Video Description

Build two HTML5 games in two hours with these fast-paced beginner-friendly videos

About This Video

  • Create two simple yet elegant games in HTML5

  • Build games that run on both desktops and mobile browsers

  • Presented in a modular approach, with elegant code and illustrated concepts to help you learn quickly

  • Updated the code to work for CreateJS version 0.7.1 at - https://github.com/makzan/HTML5-Games-Examples/commit/4ed86ae488d35768f5...

  • In Detail

    HTML5 (as a platform) is a collection of technologies, such as JavaScript and CSS3, that allows 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 that can enhance your web portals.

    HTML5 Game Development will teach you all that you need to know to get started with creating your first game in HTML5 so you can start building captivating games from scratch.

    This course is packed with step-by-step instructions to help you build modular code, optimize your game for deployment, and easily modify and reuse game logic to extend your game.

    With this course, you’ll build two incrementally complex 2D games that run on both desktop and mobile browsers. This course will explain game programming best practices, complete with simplified game logic, physics and collision handling, as well as custom graphics and fonts.

    Your first exercise is a simple counting game that lays the foundations for creating clean, customizable, and modular code. We’ll then move on to building a “rush” game with moving backgrounds, basic physics, and dynamic scoreboards.

    We’ll cover essentials such as handling mobile touch events, controlling scene transitions, custom fonts and graphics, optimizing your game's load time, a loading progress bar, collision detection, keeping score, and creating a deployable game.

    HTML5 Game Development will be your guide as you create two complete games that are compatible with multiple desktop and mobile web browsers.

    Table of Contents

    1. Chapter 1 : Planning Your First Game
      1. Planning Your Game 00:01:12
      2. Setting Up Your File Structure 00:01:46
      3. Setting Up HTML and JS 00:02:46
      4. Drawing Basic Shapes with EaselJS 00:03:06
      5. Implementing Your First Game Object 00:03:21
    2. Chapter 2 : Planning Your First Game
      1. Displaying Multiple Objects on Stage 00:02:29
      2. Adding Click Input Events 00:03:20
      3. Adding the Game Logic 00:03:47
      4. Adding the Game Over Logic 00:03:44
      5. Restarting the Game 00:01:58
    3. Chapter 3 : Adding Graphics to Your Game
      1. Preparing Your Graphics 00:02:13
      2. Adding Graphics to the Game 00:02:40
      3. Preloading Graphics 00:04:05
      4. Adding Custom Web Fonts 00:03:19
      5. Making Your Game Mobile-friendly 00:02:28
    4. Chpater 4 : Planning Your Second Game
      1. Planning the Rush Game 00:02:44
      2. Defining the Game Object Class 00:03:38
      3. Creating a Platform Class 00:04:11
      4. Creating Movable Game Objects 00:03:44
      5. Adding Platforms to Your Stage 00:02:51
    5. Chapter 5 : Game Objects and Collisions
      1. Handling Platforms and Hero Collisions 00:04:35
      2. Implementing the Obstacle Game Objects 00:02:18
      3. Handling Obstacle and Hero Collisions 00:02:10
      4. Handling Collisions with Generic Methods 00:02:27
      5. Implementing the Detection Score Counter 00:02:07
    6. Chapter 6 : Character Movement and Input Handling
      1. Adding Gravity to the Level 00:03:49
      2. Applying Gravity to the Hero 00:02:06
      3. Making the Hero Run 00:02:15
      4. Making the Hero Jump 00:01:19
      5. Handling Hero-Obstacle Collisions 00:02:41
    7. Chapter 7 : Adding Graphics and Animations
      1. Creating the Rush Game's Graphics 00:03:52
      2. Integrating Static Graphics in Rush 00:01:30
      3. Using EaselJS Sprite Sheet Animations 00:04:01
      4. Creating the Dynamic Platform Width Logic 00:02:57
      5. Preloading Graphics and the Progress Bar 00:03:22
    8. Chapter 8 : Polishing Your Final Game
      1. Creating a Main Menu Scene 00:03:59
      2. Create a Game Over Scene 00:02:34
      3. Displaying Scores 00:03:17
      4. Displaying a Scoreboard 00:04:24
      5. Finalizing Your Game's Web Page 00:03:33