HTML5 Game Development by Example: Beginner's Guide - Second Edition
| Learn |
|
|---|---|
| About |
HTML5 is a markup language used to structure and present content for the World Wide Web and is a core technology of the Internet. It is supported across different platforms and is also supported by various browsers. Its innovative features, such as canvas, audio, and video elements, make it an excellent game building tool. HTML5 Game Development by Example Beginner's Guide Second Edition is a step-by-step tutorial that will help you create several games from scratch, with useful examples. Starting with an introduction to HTML5, the chapters of this book help you gain a better understanding of the various concepts and features of HTML5. By the end of the book, you'll have the knowledge, skills, and level of understanding you need to efficiently develop games over the network using HTML5. |
| Features |
|
| Page Count | 354 |
| Course Length | 10 hours 37 minutes |
| ISBN | 9781785287770 |
| Date Of Publication | 25 Jun 2015 |
1
Introducing HTML5 Games
2
Getting Started with DOM-based Game Development
| Preparing the HTML documents for a DOM-based game |
| Time for action – installing the jQuery library |
| Setting up the Ping Pong game elements |
| Time for action – placing Ping Pong game elements in the DOM |
| Getting mouse input |
| Time for action – moving DOM objects by mouse input |
| Time for action – Moving the ball with JavaScript Interval |
| Beginning collision detection |
| Time for action – hitting the ball with the paddles |
| Controlling the left paddle movement |
| Time for action – auto moving the left paddle |
| Showing text dynamically in HTML |
| Time for action – Showing the score of both players |
| Summary |
3
Building a Card-matching Game in CSS3
| Moving game objects with CSS3 transition |
| Time for action – moving a playing card around |
| Creating a card-flipping effect |
| Time for action – flipping a card with CSS3 |
| Creating a card-matching memory game |
| Time for action – preparing the card-matching game |
| Adding game logic to the matching game |
| Time for action – adding game logic to the matching game |
| Embedding web fonts into our game |
| Time for action – embedding a font from the Google Fonts directory |
| Summary |
4
Building the Untangle Game with Canvas and the Drawing API
| Introducing the HTML5 canvas element |
| Drawing a circle in the Canvas |
| Time for action – drawing color circles in the Canvas |
| Time for action – putting the circle drawing code into a function |
| Time for action – saving the circle position |
| Drawing lines in the Canvas |
| Time for action – drawing straight lines between each circle |
| Using mouse events to interact with objects drawn in the Canvas |
| Time for action – dragging the circles in the Canvas |
| Detecting line intersection in the Canvas |
| Time for action – distinguishing the intersected lines |
| Adding touch support for tablets |
| Time for action – adding the touch input support |
| Summary |
5
Building a Canvas Game's Masterclass
| Making the Untangle puzzle game |
| Time for action – making the Untangle puzzle game in Canvas |
| Drawing text in the Canvas |
| Time for action – displaying the progress level text inside the canvas element |
| Time for action – embedding a Google web font into the canvas element |
| Drawing images in the Canvas |
| Time for action – adding graphics to the game |
| Time for action – adding CSS styles and image decoration to the game |
| Animating a sprite sheet in Canvas |
| Time for action – making a game guide animation |
| Creating a multilayer Canvas game |
| Time for action – dividing the game into four layers |
| Summary |
6
Adding Sound Effects to Your Games
| Adding a sound effect to the Play button |
| Time for action – adding sound effects to the Play button |
| Building a mini piano musical game |
| Time for action – creating a basic background for the music game |
| Time for action – creating the playback visualization in the music game |
| Creating a keyboard-driven mini piano musical game |
| Time for action – creating a mini piano musical game |
| Adding additional features to the mini piano game |
| Time for action – removing missed melody notes |
| Time for action – adding functionalities to record the music level data |
| Adding touch support |
| Time for action – indicating a game over event in the console |
| Handling the audio event in playback complete events |
| Time for action – indicating a game over event in the console |
| Summary |
7
Saving the Game's Progress
| Storing data using HTML5 local storage |
| Time for action – creating a game over dialog with the elapsed played time |
| Time for action – saving the game score |
| Saving objects in the local storage |
| Time for action – saving the time alongside the score |
| Notifying players when they break a new record with a nice ribbon effect |
| Time for action – creating a ribbon in CSS3 |
| Saving the entire game progress |
| Time for action – saving all essential game data in the local storage |
| Time for action – resuming a game from the local storage |
| Caching the game for offline access |
| Time for action – adding the AppCache Manifest |
| Summary |
8
Building a Multiplayer Draw-and-Guess Game with WebSockets
| Installing a WebSocket server |
| Time for action – installing Node.js |
| Time for action – running a WebSocket server |
| Time for action – showing the connection count in a WebSocket application |
| Time for action – sending total count to all users |
| Building a chatting application with WebSockets |
| Time for action – sending a message to the server through WebSockets |
| Sending every received message on the server side to create a chat room |
| Time for action – sending messages to all connected browsers |
| Making a shared drawing whiteboard with Canvas and WebSockets |
| Time for action – making a local drawing whiteboard with the Canvas |
| Time for action – sending the drawing through WebSockets |
| Building a multiplayer draw-and-guess game |
| Time for action – building the draw-and-guess game |
| Summary |
9
Building a Physics Car Game with Box2D and Canvas
| Installing the Box2D JavaScript library |
| Time for action – installing the Box2D physics library |
| Creating a static ground body in the physics world |
| Time for action – creating a ground in the world |
| Drawing the physics world in the canvas |
| Time for action – drawing the physics world into the Canvas |
| Creating a dynamic box in the physics world |
| Time for action – putting a dynamic box in the world |
| Advancing the world time |
| Time for action – setting up the world step loop |
| Adding wheels to the game |
| Time for action – putting two circles in the world |
| Creating a physical car |
| Time for action – connecting the box and two circles with a revolute joint |
| Adding force to the car with a keyboard input |
| Time for action – adding force to the car |
| Time for action – creating the world with ramps |
| Checking collisions in the Box2D world |
| Time for action – checking a collision between the car and the destination body |
| Restarting the game |
| Time for action – restarting the game while pressing the R key |
| Adding a level support to our car game |
| Time for action – loading the game with levels data |
| Replacing the Box2D outline drawing with graphics |
| Time for action – adding a flag graphic and a car graphic to the game |
| Adding a final touch to make the game fun to play |
| Time for action – decorating the game and adding a fuel limitation |
| Adding touch support for tablets |
| Time for action – adding touch support |
| Summary |
10
Deploying HTML5 Games
| Preparing the deploying materials |
| Putting the game on the Web |
| Hosting the node.js server |
| Deploying as a mobile web app in the home screen |
| Time for action – adding a meta tag for a mobile web app |
| Building an HTML5 game into a Mac OS X app |
| Time for action—putting the HTML5 games into a Mac app |
| Building an HTML5 game into a mobile app with the Web View |
| Building with the PhoneGap build |
| App store's reviewing process |
| Summary |