You are previewing Building HTML5 Games with ImpactJS.

Building HTML5 Games with ImpactJS

Cover of Building HTML5 Games with ImpactJS by Jesse Freeman Published by O'Reilly Media, Inc.
  1. Introducing HTML5 Game Development
  2. SPECIAL OFFER: Upgrade this ebook with O’Reilly
  3. A Note Regarding Supplemental Files
  4. Preface
    1. About This Book
    2. Who This Book Is For
    3. Who This Book Is Not For
    4. Conventions Used in This Book
    5. This Book’s Example Files
    6. Using Code Examples
    7. How To Use This Book
    8. Safari® Books Online
    9. How to Contact Us
    10. Acknowledgments
  5. 1. Introduction To Impact
    1. Why Use Impact?
    2. Setting Up a Local Environment
    3. Install WebStorm/PHPStorm
    4. Install Apache/PHP/MySQL
    5. Other Hosting Options
    6. Setting Up a New Impact Project
    7. Modules
    8. How Classes Work
    9. Core Classes
    10. How Inner Classes Work
    11. Level Editor
  6. 2. Working With Sprites
    1. Sprites and Sprite Sheets
    2. Scripting in Photoshop
    3. Working with Sprites in Photoshop
    4. Optimizing Sprites
  7. 3. Introduction To Game Design
    1. What is Game Design?
    2. Sample Game Design Document
      1. Gameplay
      2. Exploring a Map
      3. Combat
      4. Completing a Map
      5. Death
      6. Main Character
      7. Monsters
      8. Bosses
      9. Equipment
      10. Inventory
      11. Equipping Items
      12. Weapons and Armor
      13. Leveling Up
      14. Winning the Game
    3. Coming Up With Ideas
    4. Books to Read
  8. 4. Building A Game
    1. Creating Our First Level
    2. Saving/Loading Maps in Weltmeister
    3. CollisionMaps
    4. The Main Class
    5. Customizing the Main Class
    6. Key Binding
    7. Creating the Player Class
      1. Using Your Sprite Sheet
      2. Adding Simple Physics
      3. Defining Animation Sequences
    8. Creating a Monster Class
    9. Collision Detection
    10. type Property
    11. checkAgainst Property
    12. collides Property
    13. Health
    14. Weapons
    15. Firing the Weapon
    16. Add Multiple Weapons
    17. Killing Entities
    18. Respawning the Player
    19. Create Death Animations
    20. Adding Grenade Explosions
    21. Customizing the Camera
    22. Loading New Levels
  9. 5. Working With Text
    1. Creating Font Sprite Sheets
    2. Adding Text to Your Game
  10. 6. Working With Sound
    1. Adding Sounds
    2. Adding Music
    3. Mobile Browser Sound Compatibility Issues
  11. 7. Creating Game Screens and HUDs
    1. Extending Impact’s Game Class
    2. Creating a Start Screen
    3. Player Stats Screen
    4. Creating the Game Over Screen
    5. Adding In-Game HUD
    6. Game Rewards
    7. In-Game Analytics
  12. 8. Debugging Your Game
    1. Impact’s Debugger
    2. Publishing Your Game
    3. Baking Your Game
    4. Mobile Web Support
    5. Compiling for Native iOS
  13. 9. Wrapping Up
    1. References and Links
  14. About the Author
  15. SPECIAL OFFER: Upgrade this ebook with O’Reilly

Setting Up a New Impact Project

Impact is a self-contained project. Each game you create will require you to copy the default Impact project folder (which you get once you buy a license) into a new location on your server and start from scratch. Impact is set up so you can easily do all your work from your local host.

To get started, copy the Impact project into your local host. You should see the following files (Figure 1-1).

Impact project files.

Figure 1-1. Impact project files.

As you can see, I have renamed my impact folder residentraver, which is the name of the game we are going to create in this book. Here is a quick breakdown of everything in the folder:


This is the main .html file that runs your game.


This is the core code for Impact and where you will store your own game-specific JS files. This also contains the source code for Weltmeister.


This is the assets directory, and where all game art and sound files will go.


This directory contains .php scripts to minify your game’s JS files and make it harder for people to have access to the game’s source code. This is part of the license and is important so you don’t accidentally distribute the source code.


This is the level editor’s .html file.

You should now have everything you need to run your first game. If you open your browser and navigate to http://localhost/residentraver[1] you should see the following page (Figure 1-2).

This is what you will see when you run an Impact game for the first time.

Figure 1-2. This is what you will see when you run an Impact game for the first time.

Before moving on, I just wanted to take a quick moment to look at the index.html file and how it is set up. Open it up in your editor and you should see the following HTML code:

1    <!DOCTYPE html>
2    <html>
3    <head>
4        <title>Impact Game</title>
5        <style type="text/css">
6            html,body {
7                background-color: #000;
8                color: #fff;
9                font-family: helvetica, arial, sans-serif;
10                margin: 0;
11                padding: 0;
12                font-size: 12pt;
13            }
1415            #canvas {
16                position: absolute;
17                left: 0;
18                right: 0;
19                top: 0;
20                bottom: 0;
21                margin: auto;
22                border: 1px solid #555;
23            }
24        </style>
26        <script type="text/javascript" src="lib/impact/impact.js"></script>
27        <script type="text/javascript" src="lib/game/main.js"></script>
28    </head>
29    <body>
30        <canvas id="canvas"></canvas>
31    </body>
32    </html>

Outside of the style tag, you may notice there isn’t a lot of code actually embedded in the page. We have two script tags that load in the impact.js framework and our main.js JavaScript file. Finally the only tag in body is the Canvas element.


The Canvas element is part of the HTML5 spec and is what actually allows Impact to run in the browsers. Think of the canvas as an image that we can draw bitmap data into. Impact takes care of all the underlying code we would have had to write in order to display game graphics to the screen. You can learn more about how the Canvas tag works at It’s also important to note that the Canvas element only works in modern browsers such as Chrome 13+, Safari 3.2+, Firefox 6+ and IE 9+. For a full list of browsers that support the Canvas element, go to

You can also add your own HTML code around the Canvas element and design this page to look like any other HTML file. Just keep in mind that we use the canvas id in our game in order to tell impact where to render our game’s graphics to, so don’t change it unless you update your game’s initialization logic.

Now we are ready to learn more about the Impact framework.

[1] Based on how Apache is set up on your computer, you may have a different URL for your localhost. If you are using MAMP, it may be http://localhost:8888, or with XAMP it is http://localhost. Refer to your Apache documentation for the correct URL.

The best content for your career. Discover unlimited learning on demand for around $1/day.