Intro -- HTML5 Game Development HOTSHOT -- Table of Contents -- HTML5 Game Development HOTSHOT -- Credits -- About the Author -- About the Reviewers -- www.PacktPub.com -- Support files, eBooks, discount offers, and more -- Why subscribe? -- Free access for Packt account holders -- Preface -- What this book covers -- What you need for this book -- Who this book is for -- Sections -- Mission briefing -- Why is it awesome? -- Your Hotshot objectives -- Mission checklist -- Task 1 -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Classified intel -- Mission accomplished -- A Hotshot challenge / Hotshot challenges -- Conventions -- Reader feedback -- Customer support -- Downloading the example code -- Errata -- Piracy -- Questions -- 1. Building a CSS Quest Game -- Mission briefing -- Why is it awesome? -- Your Hotshot objectives -- Mission checklist -- Creating the HTML structure -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- HTML structure -- Modularizing the logic -- Variable scope in JavaScript -- Classified intel -- Managing the game scene -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Creating buttons -- Placing the scene logic and the namespace -- The transition between scenes -- The scene object inheritance -- Prototype chaining -- Classified intel -- Representing the quest composition -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Separating the data and view -- Visualizing the quest patterns -- Quest level -- Composition and quest modules -- Placing the patterns on the deck -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Selecting the pattern -- Engage thrusters -- Objective complete - mini debriefing -- Undo the player composition.

Comparing the player and compositions of the quest -- Prepare for lift off -- Representing a pattern overlapping relationship -- Engage thrusters -- Objective complete - mini debriefing -- Comparing players and compositions of the quest -- Classified intel -- Showing different quests -- Engage thrusters -- Objective complete - mini debriefing -- Adding a countdown timer to the game -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Mission accomplished -- Hotshot challenges -- Storing the data in local storage -- Collecting stars -- 2. Card Battle! -- Mission briefing -- Why is it awesome? -- Your Hotshot objectives -- Mission checklist -- Creating the game scenes -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- HTML structure for scenes -- HTML structure for game objects -- Logic modules -- Game flow -- Scenes' methods -- Creating a 3D card-flipping effect -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- 3D transform -- The card-flipping effect -- Toggling the flipping state -- Classified intel -- Selecting a card -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Resetting the card's initial position -- Selecting the card with a click event -- Removing the non-selected cards -- Short delay before the card goes into transition -- Classified intel -- Adding a power value to the cards -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Randomize logic -- Card definition -- Classified intel -- Creating the opponent's card -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- The opponent card's transition -- The entry point of the battle animation -- Building the battle animation -- Prepare for lift off -- Engage thrusters.

Objective complete - mini debriefing -- The animation sequence -- Using the CSS keyframes animation -- The card shaking animation -- The blaze animation -- Classified intel -- Adding health points to the game -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- The health point module -- The health points reduction formula -- Ending the game -- Classified intel -- Restarting the game for the next round of battle -- Engage thrusters -- Objective complete - mini debriefing -- Mission accomplished -- Hotshot challenges -- 3. Space Runner -- Mission briefing -- Why is it awesome? -- Your Hotshot objectives -- Mission checklist -- Managing the scenes -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Classified intel -- Defining the floor and tiles in the game -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- The tiles -- The tile pattern -- The setting.js file -- Classified intel -- The role of HTML, CSS, and JavaScript -- Controlling the tiles creation in JavaScript -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- The Tile definition -- The view object for the runway -- The temporary code -- Using translate3d for 2D translation -- Classified intel -- Using a game loop -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Integer map -- Game loop -- The main Game loop -- Moving the tiles down -- The duration -- Classified intel -- Parallax background scrolling -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Parallel scrolling background -- Controlling a player with the keyboard -- Engage thrusters -- Objective complete - mini debriefing -- Classified intel -- Determining a collision between the player and tiles -- Prepare for lift off.

Engage thrusters -- Objective complete -- Determining collision -- Spritesheet animation -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Creating the spritesheet image -- Spritesheet using CSS3 animation -- Changing the animation speed -- Classified intel -- Spritesheet animation versus CSS3 transition -- Mission accomplished -- Hotshot challenges -- 4. Multiply Defense -- Mission briefing -- Why is it awesome? -- Your Hotshot objectives -- Mission checklist -- Setting up the canvas and EaselJS -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Why use library to draw on a canvas? -- The addChild method -- The CreateJS namespace -- Classified intel -- Defining the numbered box -- Engage thrusters -- Objective complete - mini debriefing -- Drawing a shape with the Graphics object -- Class inheritance -- Container -- Chaining the prototype and inheritance -- Random position -- Classified intel -- The game loop and falling boxes -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Inputs and equations -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Classified intel -- Removing the boxes -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Classified intel -- The easing function -- Ending the game -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Classified intel -- Restarting the game -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Classified intel -- Pausing the game -- Replacing the rectangle shape with bitmap graphics -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Classified intel -- Mission accomplished -- A Hotshot challenge.

5. Building an Isometric City Game -- Mission briefing -- Why is it awesome? -- Your Hotshot objectives -- Mission checklist -- Designing the game's user interface -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Tween-based cloud animation -- Classified intel -- Placing the tiles and grid in the city layer -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Registration point -- Isometric formula -- Choosing which building to build -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Button helper -- Classified intel -- Placing buildings on the floor -- Prepare for lift off -- Planning the placing flow -- Engage thrusters -- Objective complete - mini debriefing -- Conversion from screen coordinates to isometric coordinates -- Drawing the building -- Building view classes -- Applying color filter -- Classified intel -- The different mouseover events -- Translating coordinates between global and local -- Creating depth illustrations by ordering the buildings -- Advancing the construction progress over time -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Generating coins and diamonds -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Classified intel -- Collecting pop-up diamonds -- Prepare for lift off -- Engage thrusters -- Objective complete - mini debriefing -- Diamond sprite animation -- Classified intel -- Saving and loading the game progress -- Engage thrusters -- Objective complete - mini debriefing -- Using local storage -- Classified intel -- Having more than one saving slot -- Mission accomplished -- Hotshot challenges -- Eliminating waiting time by paying -- Upgrading buildings -- Providing mini quests -- 6. Space Defenders -- Mission briefing.

Why is it awesome?.

With a wide range of projects to build, this step-by-step guide will give you all the tools you need to create a variety of games. 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.

Description based on publisher supplied metadata and other sources.

Electronic reproduction. Ann Arbor, Michigan : ProQuest Ebook Central, 2018. Available via World Wide Web. Access may be limited to ProQuest Ebook Central affiliated libraries.