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

Makzan

• Verlag: Packt Publishing
• Jahr: 2015
• ISBN:
  9781785287886
• Auflage: 2
• Thema: Computer Science
• Thema: Programming in HTML

About This Book

• Get to grips with the latest HTML5, Canvas, CSS, and JavaScript techniques
• Learn to create exciting puzzle games, action games, multiplayer, and Box2D physics
• A task-based approach to achieve practical skills required for game development

Who This Book Is For

This book is for web designers who have a basic knowledge of HTML, CSS, and JavaScript and want to create Canvas or DOM-based games that run on browsers.

HTML5 Game Development by Example Beginner's Guide Second Edition

---

Table of Contents

HTML5 Game Development by Example Beginner's Guide Second Edition

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

Time for action – heading

What just happened?

Pop quiz – heading

Have a go hero – heading

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Introducing HTML5 Games

Discovering new features in HTML5

Canvas

Audio

Touch Events

GeoLocation

WebGL

WebSocket

Local storage

Offline applications

Discovering new features in CSS3

CSS3 transition

CSS3 transform

CSS3 animation

The benefit of creating HTML5 games

Free and open standards

Support for multiple platforms

Native app-rendering performance in particular scenarios

Breaking the boundary of usual browser games

Building HTML5 games

What others are playing with HTML5

Coca-Cola's Ahh campaign

Asteroid-styled bookmarklet

X-Type

Cursors.io

What we are going to create in this book

Preparing the development environment

Summary

2. Getting Started with DOM-based Game Development

Preparing the HTML documents for a DOM-based game

Time for action – installing the jQuery library

What just happened?

New HTML5 doctype

Header and footer

The best practice to place the JavaScript code

Choosing the jQuery file

Running jQuery inside a scope

Running our code after the page is ready

Pop quiz

Downloading the image assets

Setting up the Ping Pong game elements

Time for action – placing Ping Pong game elements in the DOM

What just happened?

Using jQuery

Understanding basic jQuery selectors

Understanding the jQuery CSS function

Manipulating game elements in DOM with jQuery

Understanding the behavior of absolute position

Declaring global variables in a better way

Pop quiz

Getting mouse input

Time for action – moving DOM objects by mouse input

What just happened?

Getting the mouse event

RequestAnimationFrame

Checking the console window

Moving a DOM object with JavaScript Interval

Time for action – Moving the ball with JavaScript Interval

What just happened?

Creating a JavaScript timer with the setInterval function

Understanding the game loop

Separating the data and the view logic

Beginning collision detection

Time for action – hitting the ball with the paddles

What just happened?

Have a go hero

Controlling the left paddle movement

Time for action – auto moving the left paddle

What just happened?

Showing text dynamically in HTML

Time for action – Showing the score of both players

What just happened?

Have a go hero – winning the game

Summary

3. Building a Card-matching Game in CSS3

Moving game objects with CSS3 transition

Time for action – moving a playing card around

What just happened?

2D transform functions

3D transform functions

Tweening the styles using CSS3 transition

Have a go hero

Creating a card-flipping effect

Time for action – flipping a card with CSS3

What just happened?

Toggling a class with jQuery's toggleClass function

Introducing CSS' perspective property

Have a go hero

Introducing backface-visibility

Creating a card-matching memory game

Downloading the sprite sheet of playing cards

Setting up the game environment

Time for action – preparing the card-matching game

What just happened?

Cloning DOM elements with jQuery

Selecting the first child of an element in jQuery using child filters

Vertically aligning a DOM element

Using CSS sprite with a background position

Adding game logic to the matching game

Time for action – adding game logic to the matching game

What just happened?

Executing code after the CSS transition has ended

Delaying code execution on flipping cards

Randomizing an array in JavaScript

Storing internal custom data with an HTML5 custom data attribute

Pop quiz

Accessing custom data attribute with jQuery

Pop quiz

Have a go hero

Making other playing card games

Have a go hero

Embedding web fonts into our game

Time for action – embedding a font from the Google Fonts directory

What just happened?

Choosing different font delivery services

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

What just happened?

Putting in fallback content when the web browser does not support the Canvas

The Canvas context

Drawing circles and shapes with the Canvas arc function

Converting degrees to radians

Executing the path drawing in the Canvas

Beginning a path for each style

Have a go hero

Closing a path

Pop quiz

Wrapping the circle drawing in a function

Time for action – putting the circle drawing code into a function

What just happened?

Dividing code into files

Generating random numbers in JavaScript

Saving ...