Book Image

HTML5 Game Development Hotshot

By : Seng Hin Mak, Makzan Makzan (Mak Seng Hin)
Book Image

HTML5 Game Development Hotshot

By: Seng Hin Mak, Makzan Makzan (Mak Seng Hin)

Overview of this book

Table of Contents (15 chapters)
HTML5 Game Development HOTSHOT
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Index

A

  • accounting.js
    • URL / Classified intel
  • ActionScript class / The role of Adobe Flash when creating assets
  • addChildAt method / Adding the addChildAt display object to a specific z-index when adding a child
  • addChild method / The addChild method
  • Adobe Flash
    • used, in asset creating / The role of Adobe Flash when creating assets
    • about / The role of Adobe Flash when creating assets
  • Adobe PhoneGap Build
    • URL / Classified intel
  • allowPatternsInSameLevel function / Comparing players and compositions of the quest
  • array
    • randomizing / Objective complete – mini debriefing

B

  • back face visibility / The card-flipping effect
  • background-size* contain property
    • about / Background-size – cover and contain
    • border-image, using / Using border-image to decorate the customer view
  • background-size* cover property / Background-size – cover and contain
  • background-size property
    • about / Background-size – cover and contain
  • ball
    • shooting / Shooting the ball, Shooting the ball
  • ball-shooting game
    • overview / Mission briefing
    • features / Why is it awesome?
    • project tasks / Your Hotshot objectives
    • hoop, creating / Engage thrusters
    • physics world construction / Explaining the construction of the physics world, Classified intel
    • power indicator / Adding a launch bar with power, Prepare for lift off
    • visualizing, with graphics / Engage thrusters, Objective complete – mini debriefing
  • battle animation
    • defining / Building the battle animation
    • building / Prepare for lift off, Engage thrusters
    • sequence, creating / The animation sequence
    • CSS keyframes animation, using / Using the CSS keyframes animation
    • shaking animation / The card shaking animation
    • blaze animation / The blaze animation
  • BeginContact function / Contact listener
  • best practices, CSS Quest Game
    • local data storage / Storing the data in local storage
    • stars collection / Collecting stars
  • best practices, tower defense game
    • statistics, providing / Providing more statistics
    • scenes, managing / Managing scenes
    • pause button, adding / Adding a pause button
    • keyboard shortcut, adding / Adding a keyboard shortcut
    • alternate currency / Introducing an alternate currency
  • Bitmap class / Objective complete – mini debriefing
  • bitmap graphics
    • loading, into tower defense game / Prepare for lift off, Engage thrusters, Objective complete – mini debriefing, Classified intel
  • blaze animation
    • about / The blaze animation
  • body definition / Understanding body definition and fixture definition
  • border-image property
    • using, for customer view decoration / Using border-image to decorate the customer view
    • URL / Using border-image to decorate the customer view
  • Box2D
    • about / Preparing the vendor files
    • force, applying / Applying the force
    • bodies, clearing / Clearing all bodies to start the game all over
  • Box2D editor
    • URL / Designing the physics world
  • Box2DWeb / Preparing the vendor files
  • boxes
    • removing / Removing the boxes, Prepare for lift off
    • removing, steps / Engage thrusters, Objective complete – mini debriefing
    • removing, TweenJS used / Objective complete – mini debriefing
  • bubble
    • moving / Classified intel
  • building
    • selecting / Prepare for lift off
    • button helper / Button helper
    • drawing / Drawing the building
    • depth illustrations, creating for / Creating depth illustrations by ordering the buildings
    • construction progress over time, adding / Prepare for lift off
    • upgrading / Upgrading buildings
    • mini quests, providing / Providing mini quests
    • types, space junk / Objective complete – mini debriefing
    • types, satellite / Objective complete – mini debriefing
    • enemy attack, allowing / Prepare for lift off, Engage thrusters, Designing the movement of the enemy
  • building panel
    • Power Supply / Prepare for lift off
    • Coins Generator / Prepare for lift off
    • Merchant / Prepare for lift off
    • creating / Engage thrusters
    • user interface flow / Objective complete – mini debriefing
  • BuildingsList / Objective complete – mini debriefing
  • bullet
    • used, for enemy attack / Prepare for lift off, Engage thrusters, Objective complete – mini debriefing
  • button
    • creating / Creating buttons
  • button helper / Button helper

C

  • cached graphics / Caching graphics inside the assets file
  • canvas
    • about / Why use library to draw on a canvas?
    • redrawing / Classified intel
  • card
    • selecting / Selecting a card, Prepare for lift off, Engage thrusters
    • initial position, resetting / Resetting the card's initial position
    • selecting, with click event / Selecting the card with a click event
    • non-selected cards, removing / Removing the non-selected cards
    • transition delay / Short delay before the card goes into transition
    • power value, adding / Prepare for lift off, Engage thrusters
    • power value, randomizing / Randomize logic
  • checkCollision function
    • defining / Engage thrusters
  • city layer
    • tiles, placing / Prepare for lift off, Engage thrusters
    • grid, placing / Prepare for lift off
    • registration point / Registration point
    • isometric formula / Isometric formula
  • class attribute
    • using / The tile pattern
  • class definition
    • about / The Tile definition
  • class inheritance
    • working, in EaselJS / Class inheritance
  • Codekit / Separating the JavaScript files into modules
  • coins
    • generating / Engage thrusters
  • collision
    • determining, between player and tiles / Determining a collision between the player and tiles, Determining collision, Spritesheet animation
  • collision detection
    • handling / Prepare for lift off, Engage thrusters
    • sensor, adding / Engage thrusters
    • contact listener / Contact listener
    • user data / User data, Classified intel
    • bodies, destroying / Object removal
  • color filter
    • applying / Applying color filter
  • colorQuestGame / Placing the scene logic and the namespace
  • composition.js file / Prepare for lift off
  • construction progress over time
    • advancing / Advancing the construction progress over time, Engage thrusters
  • Container class / Container
  • countdown timer
    • adding, to CSS Quest Game / Adding a countdown timer to the game, Prepare for lift off, Engage thrusters
  • createFromSequence method
    • creating / Engage thrusters
  • createHoop method
    • about / Engage thrusters
  • CreateJS canvas game
    • project, preparing / Setting up the canvas and EaselJS, Engage thrusters
  • CreateJS code repository
    • TweenJS file download, URL / Prepare for lift off
  • CreateJS namespace / The CreateJS namespace
  • CreateJS toolkit / The role of Adobe Flash when creating assets
  • createTile method
    • used, for creating dynamic tile element / The view object for the runway
  • cross obstacle
    • adding, with motor spinning / Adding a cross obstacle, Engage thrusters, Classified intel
  • CSS3 animation
    • used, for animating sprite sheet / Spritesheet using CSS3 animation
  • CSS3 transition
    • versus sprite sheet animation / Spritesheet animation versus CSS3 transition
  • CSS flexbox module / Classified intel
  • CSS keyframes animation
    • using / Using the CSS keyframes animation
  • CSS Quest Game
    • file structure, creating / Prepare for lift off
    • basic game structure, creating / Engage thrusters
    • HTML structure / HTML structure
    • user interaction, adding to / Engage thrusters
    • countdown timer, adding to / Adding a countdown timer to the game, Prepare for lift off, Engage thrusters
    • best practices / Storing the data in local storage
  • customer queue
    • creating / Prepare for lift off, Engage thrusters, Objective complete – mini debriefing
    • canvas, resizing / Resizing the canvas
  • customer view
    • decorating, border-image property used / Using border-image to decorate the customer view

D

  • 3D card-flipping effect
    • creating / Prepare for lift off, Engage thrusters
    • about / The card-flipping effect
  • 3D transform / 3D transform
  • data-* attribute
    • using / Separating the data and view
  • data- attribute
    • used, to embed element-specific data / Classified intel
  • debug draw / Debug draw
  • deck
    • pattern, placing on / Prepare for lift off , Engage thrusters
  • defense buildings
    • adding / Placing the defense buildings, Prepare for lift off, Engage thrusters
  • diamonds
    • generating / Engage thrusters
  • diamond sprite animation / Diamond sprite animation
  • DisplayObject class / Objective complete – mini debriefing
  • Document Object Model (DOM) / Classified intel, HTML structure for game objects
  • dropping effect
    • defining, with CSS transform / Classified intel

E

  • EaselJS
    • about / Mission checklist
    • class inheritance, working / Class inheritance
  • EaselJS documentation
    • URL / Objective complete – mini debriefing, Button helper
    • about / The different mouseover events
  • EaselJS library code
    • URL / Mission checklist
  • easing function / The easing function
  • educational canvas-based game
    • about / Mission briefing
    • goal / Mission briefing
    • URL / Mission briefing
    • features / Why is it awesome?
    • objectives / Your Hotshot objectives
    • inputs, adding / Inputs and equations, Engage thrusters, Objective complete – mini debriefing
    • multiplication equation, adding / Prepare for lift off, Engage thrusters, Objective complete – mini debriefing
    • ending / Ending the game, Engage thrusters
    • restarting, with game-over scene / Engage thrusters, Objective complete – mini debriefing
    • pausing / Pausing the game
  • enemies
    • spawning / Summoning the enemies, Prepare for lift off, Engage thrusters, Objective complete – mini debriefing
    • movement, designing / Designing the movement of the enemy
    • attacking, with bullet / Prepare for lift off, Engage thrusters, Objective complete – mini debriefing
  • enemy attack
    • allowing, on building / Prepare for lift off, Engage thrusters
  • enemy spawn
    • logic, comparing / The enemy spawn logic
    • issue / Controlling the difficulty of the game
  • energy
    • generating, steps / Engage thrusters

F

  • fixture definition / Understanding body definition and fixture definition
  • flipped state
    • toggling / Toggling the flipping state
  • force, Box2D
    • ApplyForce / Applying the force
    • ApplyImpulse / Applying the force

G

  • game.js file / Mission checklist
  • game loop
    • about / Why is it awesome?
    • used, for creating tiles / Using a game loop, Engage thrusters, Objective complete – mini debriefing
    • timeout loop / Game loop
    • requestAnimationFrame function / Game loop
    • coding, in game.js file / Engage thrusters
  • game objects
    • HTML structure / HTML structure for game objects
  • game scene
    • four scenes flow, managing / Prepare for lift off
    • management part, coding / Engage thrusters
    • toggling / The transition between scenes
    • types / The scene object inheritance
  • gameScene.tick function / Engage thrusters
  • gameScene object
    • about / Game loop
  • game scenes
    • creating / Prepare for lift off, Engage thrusters
    • HTML structure / HTML structure for scenes
  • game width-box width / Random position
  • GetForge service / Hosting a static website
  • GetUserData method
    • about / Contact listener, User data
  • global coordinates / Translating coordinates between global and local
  • global Ticker
    • benefit / Objective complete – mini debriefing
  • gotoAndStop method / Classified intel
  • graphics
    • visualizing / Engage thrusters, Objective complete – mini debriefing
    • addChildAt display, adding / Adding the addChildAt display object to a specific z-index when adding a child
    • spinning cross, visualizing / Visualizing the spinning cross
    • 9-slice scaling / 9-slice scaling
  • Graphics object
    • used, for shape drawing / Drawing a shape with the Graphics object
  • gravity
    • defining / Defining gravity
  • Grunt / Separating the JavaScript files into modules
  • Gulp / Separating the JavaScript files into modules

H

  • head-up display (HUD) / The head-up display
  • health point (HP) / Engage thrusters
  • health points
    • adding / Engage thrusters
    • module / The health point module
    • reduction formula / The health points reduction formula
  • hoop, ball-shooting game
    • creating / Engage thrusters
  • HTML5 rocks
    • URL / Using translate3d for 2D translation
  • HTML structure
    • about / Prepare for lift off, HTML structure
    • creating, steps / Engage thrusters
    • JavaScript logic, modularizing / Modularizing the logic
    • variable / Variable scope in JavaScript
    • Classified intel / Classified intel
    • for game scenes / HTML structure for scenes
    • for game objects / HTML structure for game objects

I

  • inheritance
    • working / Chaining the prototype and inheritance
  • Instant Sprite
    • URL / Creating the spritesheet image
  • InstantSprite web tool
    • about / Creating the spritesheet image
  • integer-type mappings
    • using / Integer map
    • benefits / Integer map
  • isEqualToComposition method / Comparing players and compositions of the quest
  • isometric city game
    • features / Why is it awesome?
    • tasks / Your Hotshot objectives
    • user interface, designing / Prepare for lift off
    • tiles, placing in city layer / Prepare for lift off
    • grid, placing in city layer / Prepare for lift off
    • building, selecting / Choosing which building to build
    • building, placing on floor / Prepare for lift off
    • coins, generating / Generating coins and diamonds
    • diamonds, generating / Generating coins and diamonds
    • saving / Saving and loading the game progress
    • loading / Saving and loading the game progress
    • local storage, using / Using local storage
    • multiple saving slots / Having more than one saving slot
    • about / Mission accomplished
    • waiting time, eliminating / Eliminating waiting time by paying
    • building, upgrading / Upgrading buildings
  • isPlayerDead method / The health point module
  • isSomeoneDead method / The health point module

J

  • JavaScript
    • writing / Mission checklist
    • variables / Variable scope in JavaScript
    • tiles creation, controlling / Controlling the tiles creation in JavaScript, Engage thrusters, The Tile definition, Classified intel
  • JavaScript best practices
    • URL / Mission checklist
  • JavaScript files
    • separating, into modules / Separating the JavaScript files into modules
    • merging, approaches / Separating the JavaScript files into modules
  • joints / Classified intel

K

  • keyboard inputs
    • used, for controlling player / Engage thrusters, Objective complete – mini debriefing, Classified intel
  • keyframes / Engage thrusters

L

  • layerAllowsPattern function / Comparing players and compositions of the quest
  • level
    • choosing / Prepare for lift off, Engage thrusters, Choosing a level
  • leveling system
    • adding / Prepare for lift off, Engage thrusters, Objective complete – mini debriefing
  • LiveReload / Separating the JavaScript files into modules
  • loadManifest method / Objective complete – mini debriefing
  • local storage
    • using / Using local storage
    • list, saving in / Using local storage
    • things, saving in / Using local storage
  • logic modules
    • game flow / Game flow
    • scenes module / Scenes' methods

M

  • -moz / Classified intel
  • -ms / Classified intel
  • 100 milliseconds / Shooting the ball
  • main game loop
    • about / The main Game loop
  • matching game
    • about / Mission briefing
    • advantages / Why is it awesome?
    • hotshot objectives / Your Hotshot objectives
  • media query / Objective complete – mini debriefing
  • meter / Pixels per meter
  • metric / Pixels per meter
  • mini quest
    • providing / Providing mini quests
  • mouseover event / The different mouseover events
  • mouse over events
    • stagemousemover / The different mouseover events
    • mouseover / The different mouseover events
    • rollover / The different mouseover events
  • MovieClip / Mission checklist
  • Mozilla Developer Network page
    • URL / Offline cache
  • MP3 format / Classified intel
  • multilayered pattern composition
    • creating / Prepare for lift off
    • overlapping relationship, representing / Representing a pattern overlapping relationship
  • multiple levels
    • defining / Prepare for lift off
    • level.js file, working on / Engage thrusters
    • building / Building the level
    • physics world / Designing the physics world

N

  • numbered box
    • creating / Engage thrusters
    • drawing, with Graphics object / Drawing a shape with the Graphics object
    • prototype, changing / Chaining the prototype and inheritance
    • dropping, from random position / Random position
  • Numeral.js
    • URL / Classified intel

O

  • -o / Classified intel
  • Object.create method / The scene object inheritance
  • onFrame function
    • about / Engage thrusters
  • opponent's card
    • creating / Prepare for lift off, Engage thrusters, The entry point of the battle animation
    • transitioning / The opponent card's transition

P

  • parallax background scrolling
    • about / Parallax background scrolling
    • creation / Engage thrusters, Parallel scrolling background, Controlling a player with the keyboard
  • patch.js file / Prepare for lift off
  • pattern
    • placing, on deck / Placing the patterns on the deck , Engage thrusters
    • selecting / Engage thrusters
  • perspective / The card-flipping effect
  • physics.js file / Mission checklist
  • Physics editor
    • URL / Designing the physics world
  • physics engine
    • use / Why is it awesome?
  • physics world
    • designing / Designing the physics world
    • spinning cross, creating in / Engage thrusters
  • PieGuy game / Offline cache
  • player
    • controlling, with keyboard / Controlling a player with the keyboard, Engage thrusters, Objective complete – mini debriefing
  • playing card game
    • about / Mission briefing
    • features / Why is it awesome?
    • objectives / Your Hotshot objectives
    • health points, adding / Adding health points to the game, Engage thrusters
    • next round cards, resetting / Restarting the game for the next round of battle, Objective complete – mini debriefing
    • improving, tips / Hotshot challenges
    • special items, adding / Hotshot challenges
    • multiple players / Hotshot challenges
  • pop-up diamonds
    • collecting / Prepare for lift off, Engage thrusters, Objective complete – mini debriefing
    • diamond sprite animation / Diamond sprite animation
  • power indicator
    • creating / Engage thrusters, Objective complete – mini debriefing
  • power value
    • adding, to cards / Prepare for lift off, Engage thrusters
  • prefix-free tool
    • URL / Classified intel
  • PreloadJS / Mission checklist, Classified intel
  • project folder
    • index.html file / Prepare for lift off
    • game.css file / Prepare for lift off
    • js directory / Prepare for lift off
    • images directory / Prepare for lift off
  • prototype
    • changing / Chaining the prototype and inheritance
  • prototype chain / The scene object inheritance, Prototype chaining

Q

  • quest.js file / Prepare for lift off
  • quest composition
    • patch.js file / Prepare for lift off
    • representing / Prepare for lift off
    • composition.js file / Prepare for lift off
    • quest.js file / Prepare for lift off
    • patterns, inserting into / Engage thrusters, Objective complete – mini debriefing
    • data manipulation logic, separating / Separating the data and view
    • element display logic, separating / Separating the data and view
    • quest patterns, visualizing / Visualizing the quest patterns
    • quest level / Quest level
    • modules / Composition and quest modules
    • comparing, by logic code / Engage thrusters
    • displaying / Engage thrusters
  • quest level
    • about / Quest level
  • quest modules / Composition and quest modules

R

  • randomWants function / Engage thrusters
  • rectangular shape
    • changing, to bitmap graphic / Replacing the rectangle shape with bitmap graphics, Engage thrusters, Objective complete – mini debriefing
  • RectShape function / Classified intel
  • requestAnimationFrame function
    • about / Game loop
    / Classified intel
  • reset method / The view object for the runway
  • responsive layout skeleton
    • creating / Prepare for lift off
    • HTML and CSS, working on / Engage thrusters
  • rollover event / The different mouseover events
  • RUBE editor
    • URL / Designing the physics world

S

  • 9-slice scaling
    • about / 9-slice scaling
    • URL / 9-slice scaling
  • scene
    • creating, for level selection / Prepare for lift off, Engage thrusters
  • sceneElement property / The scene object inheritance
  • screen coordinates
    • converting, to isometric coordinates / Conversion from screen coordinates to isometric coordinates
  • selected building
    • placing, on floor / Placing buildings on the floor, Planning the placing flow, Engage thrusters
    • placing flow, planning / Planning the placing flow, Engage thrusters
  • setTimeout function / Classified intel
  • SetUserData method
    • about / User data
  • shaking animation
    • doing / The card shaking animation
  • shapes
    • defining / Defining shapes
  • simulated physics world
    • creating / Prepare for lift off, Engage thrusters, Objective complete – mini debriefing
    • gravity / Defining gravity
    • debug draw / Debug draw
    • body definition / Understanding body definition and fixture definition
    • fixures, using / Understanding body definition and fixture definition
    • shapes, defining / Defining shapes
    • meter, using / Pixels per meter
    • metric, using / Pixels per meter
    • updating / The update method
  • smoke animation / Classified intel
  • sound effects
    • adding, to sushi shop game / Prepare for lift off, Engage thrusters, Objective complete – mini debriefing
  • SoundJS / SoundJS
  • SoundJS library
    • documentation, URL / Objective complete – mini debriefing
  • Space Runner
    • about / Mission briefing
    • URL / Mission briefing
    • features / Why is it awesome?
    • objectives / Your Hotshot objectives
    • scenes, managing / Managing the scenes, Prepare for lift off, Engage thrusters, Objective complete – mini debriefing, Classified intel
    • floor and tiles, defining / Defining the floor and tiles in the game, Engage thrusters, Objective complete – mini debriefing
    • tile pattern / The tile pattern
    • setting.js file / The setting.js file
  • spinning cross
    • creating, in physics world / Engage thrusters
    • visualizing / Visualizing the spinning cross
  • sprite sheet animation
    • about / Why is it awesome?, Spritesheet animation
    • key frames technique, applying on player avatar / Engage thrusters, Objective complete – mini debriefing
    • image, creating / Creating the spritesheet image
    • speed, changing / Changing the animation speed
    • versus CSS3 transition / Spritesheet animation versus CSS3 transition
  • sprite sheet generation tools
    • Instant Sprite / Creating the spritesheet image
    • SpritePad / Creating the spritesheet image
    • Texture Packer / Creating the spritesheet image
  • stagemousemove event / The different mouseover events
  • startAttack method / Engage thrusters
  • startOver function
    • reverting / Prepare for lift off
  • startScene property / Prototype chaining
  • steps function
    • about / Spritesheet using CSS3 animation
  • sushi
    • creating / Engage thrusters, Objective complete – mini debriefing, Classified intel
  • sushi shop game
    • overview / Mission briefing
    • features / Why is it awesome?
    • URL / Why is it awesome?
    • objectives / Your Hotshot objectives
    • SoundJS / SoundJS
    • layout, decorating with graphics / Decorating the game, Engage thrusters
    • refilling / Refilling sushi ingredients
    • cash mechanism / Engage thrusters
    • sound effects, adding to / Prepare for lift off, Engage thrusters, Objective complete – mini debriefing, Classified intel
    • deploying, on Internet / Engage thrusters
    • logic code, concatenating / Concatenate and minify the code
    • logic code, minifying / Concatenate and minify the code
    • static website, hosting / Hosting a static website
    • playing, in mobile phones / Making the game mobile friendly, Engage thrusters
    • touch event, enabling / Enable the touch event
    • iOS mobile web app / An iOS mobile web app
    • distributing, as mobile app / Mobile app distribution

T

  • textAlign / Classified intel
  • textBaseline / Classified intel
  • tick function / Prepare for lift off
  • Tile definition
    • about / The Tile definition
  • Tile function
    • about / The Tile definition
  • tiles
    • creating, game loop used / Using a game loop, Engage thrusters, Objective complete – mini debriefing
    • representation, integer-type mappings used / Integer map
    • position, changing / Moving the tiles down
    • timeout duration / The duration
  • tiles creation, Space Runner
    • HTML role / The role of HTML, CSS, and JavaScript
    • CSS role / The role of HTML, CSS, and JavaScript
    • JavaScript role / The role of HTML, CSS, and JavaScript
    • controlling, in JavaScript / Controlling the tiles creation in JavaScript, Engage thrusters, The Tile definition, Classified intel
    • temporary code, creating / The temporary code
    • translate3d, using for 2D translation / Using translate3d for 2D translation
  • tower defense game
    • about / Mission briefing
    • advantage / Why is it awesome?
    • tasks / Your Hotshot objectives
    • user interface, setting up / Prepare for lift off
    • leveling system, adding / Controlling enemy waves
    • strategy / The tower defense strategy
    • bitmap graphics, loading into / Prepare for lift off, Engage thrusters, Objective complete – mini debriefing, Classified intel
    • best practices / Providing more statistics
  • translate3d
    • used, for 2D translation / Using translate3d for 2D translation
  • tween-based cloud animation / Tween-based cloud animation
  • TweenJS
    • about / Objective complete – mini debriefing
  • TweenJS documentation
    • built-in easing functions, URL / The easing function
  • TweenJS library / Prepare for lift off

U

  • update method / Engage thrusters
  • updateTilesPosition function
    • about / Engage thrusters
  • user interface, isometric city game
    • designing / Prepare for lift off, Engage thrusters
    • tween-based cloud animation / Tween-based cloud animation
  • user interface, tower defense game
    • setting up / Prepare for lift off
    • foundation, building / Engage thrusters
    • background layer / Objective complete – mini debriefing
    • effect layer / Objective complete – mini debriefing
    • major layer / Objective complete – mini debriefing
    • head-up display (HUD) / The head-up display
    • Adobe Flash / The role of Adobe Flash when creating assets

V

  • vendor folder
    • preparing / Preparing the vendor files
  • view.js file / Mission checklist
  • view classes
    • building / Building view classes
  • view object, runway
    • about / The view object for the runway

W

  • -webkit / Classified intel