HTML5 Game Development by Example: Beginner's Guide - Second Edition

Make the most of HTML5 techniques to create exciting games from scratch
Preview in Mapt

HTML5 Game Development by Example: Beginner's Guide - Second Edition

Makzan

1 customer reviews
Make the most of HTML5 techniques to create exciting games from scratch
Mapt Subscription
FREE
$29.99/m after trial
eBook
$25.20
RRP $35.99
Save 29%
Print + eBook
$44.99
RRP $44.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$25.20
$44.99
$29.99p/m after trial
RRP $35.99
RRP $44.99
Subscription
eBook
Print + eBook
Start 30 Day Trial

Frequently bought together


HTML5 Game Development by Example: Beginner's Guide - Second Edition Book Cover
HTML5 Game Development by Example: Beginner's Guide - Second Edition
$ 35.99
$ 25.20
HTML5 Games Development by Example: Beginner’s Guide Book Cover
HTML5 Games Development by Example: Beginner’s Guide
$ 26.99
$ 18.90
Buy 2 for $35.00
Save $27.98
Add to Cart
Subscribe and access every Packt eBook & Video.
 
  • 5,000+ eBooks & Videos
  • 50+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 

Book Details

ISBN 139781785287770
Paperback354 pages

Book Description

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.

Table of Contents

Chapter 1: Introducing HTML5 Games
Discovering new features in HTML5
Discovering new features in CSS3
The benefit of creating HTML5 games
What others are playing with HTML5
What we are going to create in this book
Preparing the development environment
Summary
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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

What You Will Learn

  • Build real-time network multiplayer games
  • Add physics to your canvas games by using the Box2D physics engine
  • Build a CSS3-driven card game with transform and 3D flipping effects
  • Learn to add sounds to your games
  • Make a drawing tool in Canvas
  • Create multiple layers in a canvas game
  • Store game data persistently by using local storage
  • Use sprite sheets to create frame-based animation

Authors

Table of Contents

Chapter 1: Introducing HTML5 Games
Discovering new features in HTML5
Discovering new features in CSS3
The benefit of creating HTML5 games
What others are playing with HTML5
What we are going to create in this book
Preparing the development environment
Summary
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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
Chapter 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

Book Details

ISBN 139781785287770
Paperback354 pages
Read More
From 1 reviews

Read More Reviews

Recommended for You

Mastering Web Application Development with AngularJS Book Cover
Mastering Web Application Development with AngularJS
$ 26.99
$ 5.40
Mastering Unity 2D Game Development Book Cover
Mastering Unity 2D Game Development
$ 32.99
$ 6.60
Object-Oriented JavaScript - Second Edition Book Cover
Object-Oriented JavaScript - Second Edition
$ 29.99
$ 21.00
Building a Game with Unity and Blender Book Cover
Building a Game with Unity and Blender
$ 35.99
$ 25.20
MEAN Web Development Book Cover
MEAN Web Development
$ 29.99
$ 3.00
Responsive Web Design with HTML5 and CSS3 Book Cover
Responsive Web Design with HTML5 and CSS3
$ 23.99
$ 4.80