Makzan.
HTML5 Game Development HOTSHOT. - 1 online resource (429 pages)
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.
9781849695473
Computer games -- Design.
Electronic games -- Design.
HTML (Document markup language).
Electronic books.
QA76.76.H94 -- .M359 2014eb
005.72
HTML5 Game Development HOTSHOT. - 1 online resource (429 pages)
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.
9781849695473
Computer games -- Design.
Electronic games -- Design.
HTML (Document markup language).
Electronic books.
QA76.76.H94 -- .M359 2014eb
005.72