HTML5 Game Development HOTSHOT

Name: HTML5 Game Development HOTSHOT
Brand: Packt Publishing
Price: 24.99 EUR
Availability: OnlineOnly

Makzan Makzan(Autor*in)

Packt Publishing

1. Auflage

Erschienen am 8. Juli 2014

366 Seiten

E-Book

PDF mit Adobe-DRM

Systemvoraussetzungen

978-1-84969-547-3 (ISBN)

24,99 €inkl. 7% MwSt.

Systemvoraussetzungen

für PDF mit Adobe-DRM

E-Book Einzellizenz

Als Download verfügbar

Kundeninformation

Beschreibung

Weitere Details

Weitere Ausgaben

Inhalt

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?
Your Hotshot objectives
Mission checklist
Setting up the user interface
Prepare for lift off
Engage thrusters
Objective complete - mini debriefing
The head-up display
Classified intel
The role of Adobe Flash when creating assets
Separating the JavaScript files into modules
Placing the defense buildings
Prepare for lift off
Engage thrusters
Objective complete - mini debriefing
Classified intel
Summoning the enemies
Prepare for lift off
Engage thrusters
Objective complete - mini debriefing
Enemies that reach the earth
Classified intel
Generating energy
Prepare for lift off
Engage thrusters
Objective complete - mini debriefing
Classified intel
Enemies attacking the buildings
Prepare for lift off
Engage thrusters
Objective complete - mini debriefing
Designing the movement of the enemy
Classified intel
Caching graphics inside the assets file
Firing bullets and attacking the enemies
Prepare for lift off
Engage thrusters
Objective complete - mini debriefing
Classified intel
Controlling enemy waves
Prepare for lift off
Engage thrusters
Objective complete - mini debriefing
The enemy spawn logic
Controlling the difficulty of the game
Classified intel
The tower defense strategy
Loading the bitmap graphics into the game
Prepare for lift off
Engage thrusters
Objective complete - mini debriefing
Classified intel
Mission accomplished
Hotshot challenges
Providing more statistics
Managing scenes
Adding a pause button
Adding a keyboard shortcut
Introducing an alternate currency
7. A Ball-shooting Machine with Physics Engine
Mission briefing
Why is it awesome?
Your Hotshot objectives
Mission checklist
Preparing the vendor files
Creating a simulated physics world
Prepare for lift off
Engage thrusters
Objective complete - mini debriefing
Defining gravity
Debug draw
Understanding body definition and fixture definition
Defining shapes
Pixels per meter
The update method
Classified intel
Shooting the ball
Prepare for lift off
Engage thrusters
Objective complete - mini debriefing
Shooting the ball
Applying the force
Explaining the construction of the physics world
Classified intel
Handling collision detection
Prepare for lift off
Engage thrusters
Objective complete - mini debriefing
Contact listener
User data
Classified intel
Object removal
Defining levels
Prepare for lift off
Engage thrusters
Objective complete - mini debriefing
Building the level
Classified intel
Designing the physics world
Adding a launch bar with power
Prepare for lift off
Engage thrusters
Objective complete - mini debriefing
Classified intel
Adding a cross obstacle
Engage thrusters
Objective complete - mini debriefing
Classified intel
Visualizing the graphics
Prepare for lift off
Engage thrusters
Objective complete - mini debriefing
Adding the addChildAt display object to a specific z-index when adding a child
Classified intel
Visualizing the spinning cross
9-slice scaling
Choosing a level
Prepare for lift off
Engage thrusters
Objective complete - mini debriefing
Choosing a level
Classified intel
Clearing all bodies to start the game all over
Mission accomplished
Hotshot challenges
8. Creating a Sushi Shop Game with Device Scaling
Mission briefing
Why is it awesome?
Your Hotshot objectives
Mission checklist
SoundJS
Making the responsive layout
Prepare for lift off
Engage thrusters
Objective complete - mini debriefing
Classified intel
Decorating the game
Prepare for lift off
Engage thrusters
Objective complete - mini debriefing
Background-size - cover and contain
Using border-image to decorate the customer view
Making the sushi
Prepare for lift off
Engage thrusters
Objective complete - mini debriefing
Classified intel
Creating a customer queue
Prepare for lift off
Engage thrusters
Objective complete - mini debriefing
Resizing the canvas
Refilling sushi ingredients
Engage thrusters
Objective complete - mini debriefing
Classified intel
Adding sound effects
Prepare for lift off
Engage thrusters
Objective complete - mini debriefing
Classified intel
Distributing the game
Prepare for lift off
Engage thrusters
Objective complete - mini debriefing
Concatenate and minify the code
Hosting a static website
Classified intel
Making the game mobile friendly
Prepare for lift off
Engage thrusters
Objective complete - mini debriefing
Enable the touch event
An iOS mobile web app
Classified intel
Mobile app distribution
Offline cache
Mission accomplished
A Hotshot challenge
Index

Systemvoraussetzungen

Als PDF speichern Als Link merken