HTML5 Games Development by Example: Beginner’s Guide

For developers who want to build enterprise web applications using HTML5, CSS3, JavaScript, and external XPIs, this tutorial is all you need. Structured around the creation of a real application, it’s practical and easily assimilated.

HTML5 Games Development by Example: Beginner’s Guide

Beginner's Guide
Makzan

For developers who want to build enterprise web applications using HTML5, CSS3, JavaScript, and external XPIs, this tutorial is all you need. Structured around the creation of a real application, it’s practical and easily assimilated.
$10.00
$44.99
RRP $26.99
RRP $44.99
eBook
Print + eBook
$12.99 p/month

Want this title & more? Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.
+ Collection
Free sample

Book Details

ISBN 139781849691260
Paperback352 pages

About This Book

  • Learn HTML5 game development by building six fun example projects
  • Full, clear explanations of all the essential techniques
  • Covers puzzle games, action games, multiplayer, and Box 2D physics
  • Use the Canvas with multiple layers and sprite sheets for rich graphical games
  • Harness CSS3 special effects to create polished, engaging puzzle games

Who This Book Is For

This book is for web designers or game developers who want to build browser games with HTML5 and CSS3. You’ll need some background with web development or other programming but no game development experience is necessary.

Table of Contents

Chapter 1: Introducing HTML5 Games
Discovering new features in HTML5
Discovering new features in CSS3
Learning more detail of new HTML5 and CSS3 features
The benefit of creating HTML5 games
What others are playing with HTML5
Browsing more HTML5 games
What we are going to create in this book
Summary
Chapter 2: Getting Started with DOM-based Game Development
Preparing the development environment
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 DOM
Time for action Changing position of elements with jQuery
Getting a keyboard input from players
Time for action Moving DOM objects by a keyboard input
Supporting multiple keyboard input from players
Time for action Listening to keyboard input with another approach
Moving a DOM object with JavaScript Interval
Time for action Moving the ball with JavaScript Interval
Beginning collision detection
Time for action Hitting the ball with the paddles
Showing text dynamically in HTML
Time for action Showing the score of both players
Summary
Chapter 3: Building a Memory 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 Google Font Directory
Summary
Chapter 4: Building the Untangle Game with Canvas and Drawing API
Introducing the HTML5 Canvas Element
Drawing a circle in canvas
Time for action Drawing color circles on canvas
Time for action Drawing different arcs with arc function
Time for action Putting the circle drawing code into a function
Time for action Saving the circle position
Drawing lines in canvas
Time for action Drawing straight lines between each circle
Interacting with drawn objects in canvas with mouse events
Time for action Dragging the circles in canvas
Detecting line intersection in canvas
Time for action Distinguishing the intersected lines
Making the untangle puzzle game
Time for action Making the untangle puzzle game in canvas
Summary
Chapter 5: Building a Canvas Games Masterclass
Filling shapes with gradient color
Time for action Drawing a gradient color background to the Untangle game
Time for action Filling the circles with radial gradient color
Drawing text in canvas
Time for action Displaying the progress level text inside the canvas element
Time for action Embedding Google Web Font into the canvas element
Drawing images in canvas
Time for action Adding graphics to the game
Time for action Adding CSS styles and images decoration to the game
Animating a sprite sheet in canvas
Time for action Making a game guide animation
Creating a multi-layers 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
Time for action Converting an MP3 sound to Ogg format with Audacity
Building a mini piano musical game
Time for action Creating a basic background to the music game
Time for action Creating the playback visualization in the music game
Linking the play button to the music game scene
Time for action Animating the scene transition
Creating a keyboard-driven mini piano musical game
Time for action Creating a mini piano musical game
Time for action Removing music dots with the splice function
Adding additional features to the mini piano game
Time for action Removing missed melody notes
Time for action Adding functionality to record the music level data
Handling the audio event on playback completes
Time for action Indicating a game over event in the console
Summary
Chapter 7: Using Local Storage to Store Game Data
Storing data by 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 of breaking 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
Summary
Chapter 8: Building a Multiplayer Draw-and-Guess Game with WebSockets
Trying an existing WebSockets web application
Time for action Trying the multiuser sketchpad
Installing a WebSocket server
Time for action Installing Node.JS
Time for action Creating a WebSocket server that sends the total count of connections
Time for action Showing the connection count in a WebSocket application
Building a chatting application with WebSockets
Time for action Sending a message to the server through WebSockets
Broadcasting every received message on the server side to create a chat room
Time for action Broadcasting the 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
Decorating the draw-and-guess game with CSS
Time for action Decorating the 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 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 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
Summary

What You Will Learn

  • Start nice and simple: build a traditional Ping Pong game with two players playing in one computer.
  • Create a CSS3-driven card game with transform and 3D flipping effects.
  • Use the Canvas with multiple layers and the Drawing API to create a string untangle game
  • Frame-by-frame animation with sprite sheets
  • Create HTML5 game audio, and build a piano-based musical game
  • Store game data persistently using local storage.
  • Building real-time network multiplayer games
  • Adding physics to your canvas games using the Box2D physics engine.

In Detail

HTML5 promises to be the hot new platform for online games. HTML5 games work on computers, smartphones, and tablets – including iPhones and iPads. Be one of the first developers to build HTML5 games today and be ready for tomorrow!

The book will show you how to use latest HTML5 and CSS3 web standards to build card games, drawing games, physics games and even multiplayer games over the network. With the book you will build 6 example games with clear step-by-step tutorials.

HTML5, CSS3 and related JavaScript API is the latest hot topic in Web. These standards bring us the new game market, HTML5 Games. With the new power from them, we can design games with HTML5 elements, CSS3 properties and JavaScript to play in browsers.

The book divides into 9 chapters with each one focusing on one topic. We will create 6 games in the book and specifically learn how we draw game objects, animate them, adding audio, connecting players and building physics game with Box2D physics engine.

Authors

Table of Contents

Chapter 1: Introducing HTML5 Games
Discovering new features in HTML5
Discovering new features in CSS3
Learning more detail of new HTML5 and CSS3 features
The benefit of creating HTML5 games
What others are playing with HTML5
Browsing more HTML5 games
What we are going to create in this book
Summary
Chapter 2: Getting Started with DOM-based Game Development
Preparing the development environment
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 DOM
Time for action Changing position of elements with jQuery
Getting a keyboard input from players
Time for action Moving DOM objects by a keyboard input
Supporting multiple keyboard input from players
Time for action Listening to keyboard input with another approach
Moving a DOM object with JavaScript Interval
Time for action Moving the ball with JavaScript Interval
Beginning collision detection
Time for action Hitting the ball with the paddles
Showing text dynamically in HTML
Time for action Showing the score of both players
Summary
Chapter 3: Building a Memory 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 Google Font Directory
Summary
Chapter 4: Building the Untangle Game with Canvas and Drawing API
Introducing the HTML5 Canvas Element
Drawing a circle in canvas
Time for action Drawing color circles on canvas
Time for action Drawing different arcs with arc function
Time for action Putting the circle drawing code into a function
Time for action Saving the circle position
Drawing lines in canvas
Time for action Drawing straight lines between each circle
Interacting with drawn objects in canvas with mouse events
Time for action Dragging the circles in canvas
Detecting line intersection in canvas
Time for action Distinguishing the intersected lines
Making the untangle puzzle game
Time for action Making the untangle puzzle game in canvas
Summary
Chapter 5: Building a Canvas Games Masterclass
Filling shapes with gradient color
Time for action Drawing a gradient color background to the Untangle game
Time for action Filling the circles with radial gradient color
Drawing text in canvas
Time for action Displaying the progress level text inside the canvas element
Time for action Embedding Google Web Font into the canvas element
Drawing images in canvas
Time for action Adding graphics to the game
Time for action Adding CSS styles and images decoration to the game
Animating a sprite sheet in canvas
Time for action Making a game guide animation
Creating a multi-layers 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
Time for action Converting an MP3 sound to Ogg format with Audacity
Building a mini piano musical game
Time for action Creating a basic background to the music game
Time for action Creating the playback visualization in the music game
Linking the play button to the music game scene
Time for action Animating the scene transition
Creating a keyboard-driven mini piano musical game
Time for action Creating a mini piano musical game
Time for action Removing music dots with the splice function
Adding additional features to the mini piano game
Time for action Removing missed melody notes
Time for action Adding functionality to record the music level data
Handling the audio event on playback completes
Time for action Indicating a game over event in the console
Summary
Chapter 7: Using Local Storage to Store Game Data
Storing data by 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 of breaking 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
Summary
Chapter 8: Building a Multiplayer Draw-and-Guess Game with WebSockets
Trying an existing WebSockets web application
Time for action Trying the multiuser sketchpad
Installing a WebSocket server
Time for action Installing Node.JS
Time for action Creating a WebSocket server that sends the total count of connections
Time for action Showing the connection count in a WebSocket application
Building a chatting application with WebSockets
Time for action Sending a message to the server through WebSockets
Broadcasting every received message on the server side to create a chat room
Time for action Broadcasting the 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
Decorating the draw-and-guess game with CSS
Time for action Decorating the 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 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 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
Summary

Book Details

ISBN 139781849691260
Paperback352 pages
Read More