Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying HTML5 Game Development Hotshot
  • Table Of Contents Toc
HTML5 Game Development Hotshot

HTML5 Game Development Hotshot

By : Seng Hin Mak, Makzan Makzan (Mak Seng Hin)
4 (6)
Buy this Book
close
close
HTML5 Game Development Hotshot

HTML5 Game Development Hotshot

4 (6)
By: Seng Hin Mak, Makzan Makzan (Mak Seng Hin)
Buy this Book

Overview of this book

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.
Table of Contents (10 chapters)
close
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Sections
Icon
Mission briefing
Icon
Task 1
Icon
Mission accomplished
Icon
A Hotshot challenge / Hotshot challenges
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. Building a CSS Quest Game
Icon
1. Building a CSS Quest Game
Icon
Mission briefing
Icon
Creating the HTML structure
Icon
Managing the game scene
Icon
Representing the quest composition
Icon
Placing the patterns on the deck
Icon
Selecting the pattern
Icon
Comparing the player and compositions of the quest
Icon
Showing different quests
Icon
Adding a countdown timer to the game
Icon
Mission accomplished
Icon
Hotshot challenges
2
2. Card Battle!
Icon
2. Card Battle!
Icon
Mission briefing
Icon
Creating the game scenes
Icon
Creating a 3D card-flipping effect
Icon
Selecting a card
Icon
Adding a power value to the cards
Icon
Creating the opponent's card
Icon
Building the battle animation
Icon
Adding health points to the game
Icon
Restarting the game for the next round of battle
Icon
Mission accomplished
Icon
Hotshot challenges
3
3. Space Runner
chevron up
Icon
3. Space Runner
Icon
Mission briefing
Icon
Managing the scenes
Icon
Defining the floor and tiles in the game
Icon
Controlling the tiles creation in JavaScript
Icon
Using a game loop
Icon
Parallax background scrolling
Icon
Controlling a player with the keyboard
Icon
Determining a collision between the player and tiles
Icon
Spritesheet animation
Icon
Mission accomplished
Icon
Hotshot challenges
4
4. Multiply Defense
Icon
4. Multiply Defense
Icon
Mission briefing
Icon
Setting up the canvas and EaselJS
Icon
Defining the numbered box
Icon
The game loop and falling boxes
Icon
Inputs and equations
Icon
Removing the boxes
Icon
Ending the game
Icon
Restarting the game
Icon
Replacing the rectangle shape with bitmap graphics
Icon
Mission accomplished
Icon
A Hotshot challenge
5
5. Building an Isometric City Game
Icon
5. Building an Isometric City Game
Icon
Mission briefing
Icon
Designing the game's user interface
Icon
Placing the tiles and grid in the city layer
Icon
Choosing which building to build
Icon
Placing buildings on the floor
Icon
Advancing the construction progress over time
Icon
Generating coins and diamonds
Icon
Collecting pop-up diamonds
Icon
Saving and loading the game progress
Icon
Mission accomplished
Icon
Hotshot challenges
6
6. Space Defenders
Icon
6. Space Defenders
Icon
Mission briefing
Icon
Setting up the user interface
Icon
Placing the defense buildings
Icon
Summoning the enemies
Icon
Generating energy
Icon
Enemies attacking the buildings
Icon
Firing bullets and attacking the enemies
Icon
Controlling enemy waves
Icon
Loading the bitmap graphics into the game
Icon
Mission accomplished
Icon
Hotshot challenges
7
7. A Ball-shooting Machine with Physics Engine
Icon
7. A Ball-shooting Machine with Physics Engine
Icon
Mission briefing
Icon
Creating a simulated physics world
Icon
Shooting the ball
Icon
Handling collision detection
Icon
Defining levels
Icon
Adding a launch bar with power
Icon
Adding a cross obstacle
Icon
Visualizing the graphics
Icon
Choosing a level
Icon
Mission accomplished
Icon
Hotshot challenges
8
8. Creating a Sushi Shop Game with Device Scaling
Icon
8. Creating a Sushi Shop Game with Device Scaling
Icon
Mission briefing
Icon
Making the responsive layout
Icon
Decorating the game
Icon
Making the sushi
Icon
Creating a customer queue
Icon
Refilling sushi ingredients
Icon
Adding sound effects
Icon
Distributing the game
Icon
Making the game mobile friendly
Icon
Mission accomplished
Icon
A Hotshot challenge
9
Index
Icon
Index

Mission briefing

We will learn how to create a CSS-based sprite sheet animation. We will also learn the concept of parallax scrolling and use JavaScript to handle keyboard inputs. You can visit the URL http://makzan.net/html5-games/space-runner/ to play the example game in order to have a better understanding of what we will build throughout this project.

A screenshot of the game is shown as follows:

Why is it awesome?

After covering two game examples that used a mouse in the earlier projects, this is the first time we will handle keyboard inputs.

We will use a game loop in this project. The Game loop is an important technique in a game that drives the updates for both the logic and as well as the view rendering. We will further work on the animation by using a sprite sheet that animates frame by frame. Game loop and sprite sheet animation are two essential concepts of game development. We will even use these techniques in the later project that build games with canvas and game library.

In addition...

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
HTML5 Game Development Hotshot
End of Section 3
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon