Cover image for HTML5 Game Development HOTSHOT

HTML5 Game Development HOTSHOT

Author Makzan
Release Date: 2014/07/01
ISBN: 9781849695466
Topic:
0%
108
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Build interactive games with HTML, DOM, and the CreateJS Game library

In Detail

This book will show you how to create stunning cross-browser games without the need for Flash or other plugins. Learn about Box2D, DOM elements, the EaselJS framework, and more, all providing a foundation of knowledge to expand your game-creating skills. With in-depth explanations and step-by-step instructions, you will finish this book feeling confident about building great games with HTML. Whether you are familiar with the basics of object-oriented programming concepts, are new to HTML game development, or are familiar with just web design, this project-based book will get you up and running in no time. It will teach and inspire you to create great interactive content on the Web.

What You Will Learn

  • Create DOM-based HTML5 games
  • Use the CreateJS library to build a canvas-based game
  • Create different types of animations that are spritesheet-based, tween-based, and Flash vector-based
  • Modularize game components in JavaScript with object inheritance
  • Store and load persistent game progress in browsers
  • Convert coordinates between the screen and isometric perspective
  • Maintain a hierarchy for game elements to keep the extensibility of the game
  • Learn essential workflows and tools to create game assets easier

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. HTML5 Game Development HOTSHOT
    1. Table of Contents
    2. HTML5 Game Development HOTSHOT
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Sections
      5. Mission briefing
        1. Why is it awesome?
        2. Your Hotshot objectives
        3. Mission checklist
      6. Task 1
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
        4. Classified intel
      7. Mission accomplished
      8. A Hotshot challenge / Hotshot challenges
      9. Conventions
      10. Reader feedback
      11. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Building a CSS Quest Game
      1. Mission briefing
        1. Why is it awesome?
        2. Your Hotshot objectives
        3. Mission checklist
      2. Creating the HTML structure
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. HTML structure
          2. Modularizing the logic
          3. Variable scope in JavaScript
        4. Classified intel
      3. Managing the game scene
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Creating buttons
          2. Placing the scene logic and the namespace
          3. The transition between scenes
          4. The scene object inheritance
          5. Prototype chaining
        4. Classified intel
      4. Representing the quest composition
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Separating the data and view
          2. Visualizing the quest patterns
          3. Quest level
          4. Composition and quest modules
      5. Placing the patterns on the deck
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
      6. Selecting the pattern
        1. Engage thrusters
        2. Objective complete – mini debriefing
          1. Undo the player composition
      7. Comparing the player and compositions of the quest
        1. Prepare for lift off
          1. Representing a pattern overlapping relationship
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Comparing players and compositions of the quest
        4. Classified intel
      8. Showing different quests
        1. Engage thrusters
        2. Objective complete – mini debriefing
      9. Adding a countdown timer to the game
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
      10. Mission accomplished
      11. Hotshot challenges
        1. Storing the data in local storage
        2. Collecting stars
    9. 2. Card Battle!
      1. Mission briefing
        1. Why is it awesome?
        2. Your Hotshot objectives
        3. Mission checklist
      2. Creating the game scenes
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. HTML structure for scenes
          2. HTML structure for game objects
          3. Logic modules
            1. Game flow
            2. Scenes' methods
      3. Creating a 3D card-flipping effect
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. 3D transform
          2. The card-flipping effect
          3. Toggling the flipping state
        4. Classified intel
      4. Selecting a card
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Resetting the card's initial position
          2. Selecting the card with a click event
          3. Removing the non-selected cards
          4. Short delay before the card goes into transition
        4. Classified intel
      5. Adding a power value to the cards
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Randomize logic
          2. Card definition
        4. Classified intel
      6. Creating the opponent's card
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. The opponent card's transition
          2. The entry point of the battle animation
      7. Building the battle animation
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. The animation sequence
          2. Using the CSS keyframes animation
          3. The card shaking animation
          4. The blaze animation
        4. Classified intel
      8. Adding health points to the game
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. The health point module
          2. The health points reduction formula
          3. Ending the game
        4. Classified intel
      9. Restarting the game for the next round of battle
        1. Engage thrusters
        2. Objective complete – mini debriefing
      10. Mission accomplished
      11. Hotshot challenges
    10. 3. Space Runner
      1. Mission briefing
        1. Why is it awesome?
        2. Your Hotshot objectives
        3. Mission checklist
      2. Managing the scenes
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
        4. Classified intel
      3. Defining the floor and tiles in the game
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. The tiles
          2. The tile pattern
          3. The setting.js file
        4. Classified intel
          1. The role of HTML, CSS, and JavaScript
      4. Controlling the tiles creation in JavaScript
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. The Tile definition
          2. The view object for the runway
          3. The temporary code
          4. Using translate3d for 2D translation
        4. Classified intel
      5. Using a game loop
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Integer map
          2. Game loop
          3. The main Game loop
          4. Moving the tiles down
          5. The duration
        4. Classified intel
      6. Parallax background scrolling
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Parallel scrolling background
      7. Controlling a player with the keyboard
        1. Engage thrusters
        2. Objective complete – mini debriefing
        3. Classified intel
      8. Determining a collision between the player and tiles
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete
          1. Determining collision
      9. Spritesheet animation
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Creating the spritesheet image
          2. Spritesheet using CSS3 animation
          3. Changing the animation speed
        4. Classified intel
          1. Spritesheet animation versus CSS3 transition
      10. Mission accomplished
      11. Hotshot challenges
    11. 4. Multiply Defense
      1. Mission briefing
        1. Why is it awesome?
        2. Your Hotshot objectives
        3. Mission checklist
      2. Setting up the canvas and EaselJS
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Why use library to draw on a canvas?
          2. The addChild method
          3. The CreateJS namespace
        4. Classified intel
      3. Defining the numbered box
        1. Engage thrusters
        2. Objective complete – mini debriefing
          1. Drawing a shape with the Graphics object
          2. Class inheritance
          3. Container
          4. Chaining the prototype and inheritance
          5. Random position
        3. Classified intel
      4. The game loop and falling boxes
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
      5. Inputs and equations
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
        4. Classified intel
      6. Removing the boxes
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
        4. Classified intel
          1. The easing function
      7. Ending the game
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
        4. Classified intel
      8. Restarting the game
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
        4. Classified intel
          1. Pausing the game
      9. Replacing the rectangle shape with bitmap graphics
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
        4. Classified intel
      10. Mission accomplished
      11. A Hotshot challenge
    12. 5. Building an Isometric City Game
      1. Mission briefing
        1. Why is it awesome?
        2. Your Hotshot objectives
        3. Mission checklist
      2. Designing the game's user interface
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Tween-based cloud animation
        4. Classified intel
      3. Placing the tiles and grid in the city layer
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Registration point
          2. Isometric formula
      4. Choosing which building to build
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Button helper
        4. Classified intel
      5. Placing buildings on the floor
        1. Prepare for lift off
          1. Planning the placing flow
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Conversion from screen coordinates to isometric coordinates
          2. Drawing the building
          3. Building view classes
          4. Applying color filter
        4. Classified intel
          1. The different mouseover events
          2. Translating coordinates between global and local
          3. Creating depth illustrations by ordering the buildings
      6. Advancing the construction progress over time
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
      7. Generating coins and diamonds
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
        4. Classified intel
      8. Collecting pop-up diamonds
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Diamond sprite animation
        4. Classified intel
      9. Saving and loading the game progress
        1. Engage thrusters
        2. Objective complete – mini debriefing
          1. Using local storage
        3. Classified intel
          1. Having more than one saving slot
      10. Mission accomplished
      11. Hotshot challenges
        1. Eliminating waiting time by paying
        2. Upgrading buildings
        3. Providing mini quests
    13. 6. Space Defenders
      1. Mission briefing
        1. Why is it awesome?
        2. Your Hotshot objectives
        3. Mission checklist
      2. Setting up the user interface
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. The head-up display
        4. Classified intel
          1. The role of Adobe Flash when creating assets
          2. Separating the JavaScript files into modules
      3. Placing the defense buildings
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
        4. Classified intel
      4. Summoning the enemies
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Enemies that reach the earth
        4. Classified intel
      5. Generating energy
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
        4. Classified intel
      6. Enemies attacking the buildings
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Designing the movement of the enemy
        4. Classified intel
          1. Caching graphics inside the assets file
      7. Firing bullets and attacking the enemies
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
        4. Classified intel
      8. Controlling enemy waves
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. The enemy spawn logic
          2. Controlling the difficulty of the game
        4. Classified intel
          1. The tower defense strategy
      9. Loading the bitmap graphics into the game
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
        4. Classified intel
      10. Mission accomplished
      11. Hotshot challenges
        1. Providing more statistics
        2. Managing scenes
        3. Adding a pause button
        4. Adding a keyboard shortcut
        5. Introducing an alternate currency
    14. 7. A Ball-shooting Machine with Physics Engine
      1. Mission briefing
        1. Why is it awesome?
        2. Your Hotshot objectives
        3. Mission checklist
          1. Preparing the vendor files
      2. Creating a simulated physics world
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Defining gravity
          2. Debug draw
          3. Understanding body definition and fixture definition
          4. Defining shapes
          5. Pixels per meter
          6. The update method
        4. Classified intel
      3. Shooting the ball
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Shooting the ball
          2. Applying the force
          3. Explaining the construction of the physics world
        4. Classified intel
      4. Handling collision detection
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Contact listener
          2. User data
        4. Classified intel
          1. Object removal
      5. Defining levels
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Building the level
        4. Classified intel
          1. Designing the physics world
      6. Adding a launch bar with power
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
        4. Classified intel
      7. Adding a cross obstacle
        1. Engage thrusters
        2. Objective complete – mini debriefing
        3. Classified intel
      8. Visualizing the graphics
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Adding the addChildAt display object to a specific z-index when adding a child
        4. Classified intel
          1. Visualizing the spinning cross
          2. 9-slice scaling
      9. Choosing a level
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Choosing a level
        4. Classified intel
          1. Clearing all bodies to start the game all over
      10. Mission accomplished
      11. Hotshot challenges
    15. 8. Creating a Sushi Shop Game with Device Scaling
      1. Mission briefing
        1. Why is it awesome?
        2. Your Hotshot objectives
        3. Mission checklist
          1. SoundJS
      2. Making the responsive layout
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
        4. Classified intel
      3. Decorating the game
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Background-size – cover and contain
          2. Using border-image to decorate the customer view
      4. Making the sushi
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
        4. Classified intel
      5. Creating a customer queue
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Resizing the canvas
      6. Refilling sushi ingredients
        1. Engage thrusters
        2. Objective complete – mini debriefing
        3. Classified intel
      7. Adding sound effects
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
        4. Classified intel
      8. Distributing the game
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Concatenate and minify the code
          2. Hosting a static website
        4. Classified intel
      9. Making the game mobile friendly
        1. Prepare for lift off
        2. Engage thrusters
        3. Objective complete – mini debriefing
          1. Enable the touch event
          2. An iOS mobile web app
        4. Classified intel
          1. Mobile app distribution
          2. Offline cache
      10. Mission accomplished
      11. A Hotshot challenge
    16. Index
18.116.21.229