HTML5 Game Development Hotshot
Build interactive games with HTML, DOM, and the CreateJS Game library.
1st Edition
Published on 7. October 2025
366 pages
978-1-84969-547-3 (ISBN)
Description
Key FeaturesBook DescriptionWith 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.What you will learn - Create DOMbased HTML5 games
- Use the CreateJS library to build a canvasbased game
- Create different types of animations that are spritesheetbased, tweenbased, and Flash vectorbased
- 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
Who this book is for
- Use the CreateJS library to build a canvasbased game
- Create different types of animations that are spritesheetbased, tweenbased, and Flash vectorbased
- 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
Who this book is for
More details
Other editions
Additional editions
Seng Hin Mak
Html5 Game Development Hotshot
Book
07/2014
Packt Publishing
€56.60
Shipment within 3-4 weeks
Persons
Hin Mak Seng :
Makzan focuses on the fields of web development and game design. He has over 14 years of experience in building digital products. He has worked on real-time multiplayer interaction games, iOS applications, and rich interactive websites. He has written three books, on building a Flash virtual world, and creating games with HTML5 and the latest web standards and developed a video course as well. He currently teaches courses in Hong Kong and Macao SAR. He writes tutorials and shares his know-how on makzan.net.Makzan (Mak Seng Hin) Makzan :
Makzan focuses on the fields of web development and game design. He has over 14 years of experience in building digital products. He has worked on real-time multiplayer interaction games, iOS applications, and rich interactive websites. He has written three books, on building a Flash virtual world, and creating games with HTML5 and the latest web standards and developed a video course as well. He currently teaches courses in Hong Kong and Macao SAR. He writes tutorials and shares his know-how on makzan.net.
Makzan focuses on the fields of web development and game design. He has over 14 years of experience in building digital products. He has worked on real-time multiplayer interaction games, iOS applications, and rich interactive websites. He has written three books, on building a Flash virtual world, and creating games with HTML5 and the latest web standards and developed a video course as well. He currently teaches courses in Hong Kong and Macao SAR. He writes tutorials and shares his know-how on makzan.net.Makzan (Mak Seng Hin) Makzan :
Makzan focuses on the fields of web development and game design. He has over 14 years of experience in building digital products. He has worked on real-time multiplayer interaction games, iOS applications, and rich interactive websites. He has written three books, on building a Flash virtual world, and creating games with HTML5 and the latest web standards and developed a video course as well. He currently teaches courses in Hong Kong and Macao SAR. He writes tutorials and shares his know-how on makzan.net.
Content
- 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
