Learn HTML5 by Creating Fun Games

Rodrigo Silveira

• Publisher: Packt Publishing
• Year: 2013
• ISBN:
  9781849696029
• Edition: 1
• Topic: Ciencia de la computación
• Subtopic: Programación en HTML

In Detail

HTML is fast, secure, responsive, interactive, and stunningly beautiful. It lets you target the largest number of devices and browsers with the least amount of effort. Working with the latest technologies is always fun and with a rapidly growing mobile market, it is a new and exciting place to be.

"Learn HTML5 by Creating Fun Games" takes you through the journey of learning HTML5 right from setting up the environment to creating fully-functional games. It will help you explore the basics while you work through the whole book with the completion of each game.

"Learn HTML5 by Creating Fun Games" takes a very friendly approach to teaching fun, silly games for the purpose of giving you a thorough grounding in HTML5. The book has only as much theory as it has to, often in tip boxes, with most of the information explaining how to create HTML5 canvas games. You will be assisted with lots of simple steps with screenshots building towards silly but addictive games.

The book introduces you to HTML5 by helping you understand the setup and the underlying environment. As you start building your first game that is a typography game, you understand the significance of elements used in game development such as input types, web forms, and so on.We will see how to write a modern browser-compatible code while creating a basic Jelly Wobbling Game. Each game introduces you to an advanced topic such as vector graphics, native audio manipulation, and dragging-and-dropping. In the later section of the book, you will see yourself developing the famous snake game using requestAnimationFrame along with the canvas API, and enhancing it further with web messaging, web storage, and local storage. The last game of this book, a 2D Space shooter game, will then help you understand mobile design considerations.

Approach

By teaching HTML5 by developing exciting games, the reader will see concrete applications for each of the concepts, and will also have a powerful deliverable at the end of each chapter - a fully functional game. We learn the various concepts using very abstract examples - how to model animals, foods, or fictitious machines. This makes learning and understanding a lot easier, and much more enjoyable.

Who this book is for

If you are are looking to get a good grounding in how to use the new awesome technology that is HTML5, this book is for you. Basic knowledge of HTML and/or HTML5 is welcome, but optional. The book is a friendly and exciting reference for beginners.

Learn HTML5 by Creating Fun Games

---

Table of Contents

Learn HTML5 by Creating Fun Games

Credits

About the Author

About the Reviewer

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

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. An Overview of HTML5

What is HTML?

A brief history of HTML

The evolution of the World Wide Web

What is HTML5?

HTML5 – the next step in the evolution

HTML5 is not a single feature

More semantic document structure

A warning about performance

Native features of the browser

Automatic form validation

New input types

Telephone-friendly hyperlinks

CSS-based DOM selectors

Text-to-speech

CSS3

Separation of concerns

Reusability of visual design

Ease of maintenance

Scalability

The evolution of CSS

Experimental features and vendor prefixes

CSS preprocessors

CSS3 modules

Style attributes

Selectors

Colors

Media queries

JavaScript APIs

New JavaScript APIs

The Web as a platform

The Open Web

HTML5 – a game changer

Learning HTML5 through game development

Summary

2. HTML5 Typography

The game

Game elements

The options widget

The game title

Boat

Sky

Waves

Tracks

Players

The main container

Words to write

Words written

The message container

The message title

The new champion form

Leaderboard

Game controls

HTML

The web form

Range input

Email input

Data attributes

CSS

Web fonts

Transitions

Animations

The text shadows

The box shadows

The border radius

JavaScript

Query selectors

API usage

Web forms

New input types

Date

Month

Week

Time

Datetime

Datetime-local

Color

Email

Number

Range

Search

Tel

Url

Form validation

Validity state object

Custom validation

Used in the game

Data attributes

Used in the game

Query selectors

Used in the game

Web fonts

Transitions

Animations

The text shadow

The box shadow

The border radius

The code

The HTML structure

JavaScript and logic

Summary

3. Understanding the Gravity of HTML5

Browser compatibility

Supporting different browsers

HTML5 libraries and frameworks

jQuery

Google Web Toolkit

Supporting browsers with limited HTML5 features

Gracefully degrade

Polyfills

Modernizr

The game

Code structure

API usage

Web audio

Scalable Vector Graphics (SVG)

Drag-and-drop

Web audio

How to use it

SVG

How to use it

Drag-and-drop

How to use it

Summary

4. Using HTML5 to Catch a Snake

The game

API usage

How to use it

Typed arrays

How to use it

ArrayBuffer and ArrayBufferView

Typed array view types

Canvas

How to use it

clearRect

Fill and stroke

Lines

Shapes

Text

Transformations

Drawing images

Manipulating pixels

Web workers

How to use it

Offline application cache

How to use it

The code

Summary

5. Improving the Snake Game

The game

API usage

Web messaging

How to use it

Web storage

Local storage

Session storage

IndexedDB

IDBFactory

IDBOpenDBRequest

IDBTransaction

readwrite

readonly

versionchange

Getting elements

Deleting elements

The code

Saving the high score

Taking screenshots of the game

Summary

6. Adding Features to Your Game

Advanced HTML5 APIs

WebGL

Hello, World!

Web sockets

The connection

The server-side code

The client-side code

Video

Attributes

Events

Geolocation

A Google Maps example

Upcoming CSS features

Programming in the bleeding edge

CSS shaders

Using custom filters

CSS columns

The column rule

Column breaks

CSS regions and exclusions

Regions

Exclusions

Defining shapes

Summary

7. HTML5 and Mobile Game Development

Desktop versus mobile

Major implementation considerations

Screen size and orientation

Computing power

Battery life

Browser differences

Best practices

Degrade gracefully and enhance progressively

Finger-friendly design

Save battery life

Plan for offline

Offering a desktop version

Understanding media queries

width

height

device-width

device-height

orientation

aspect-ratio

device-aspect-ratio

color

color-index

monochrome

resolution

scan

grid

Understanding touch events

touchstart

touches

changedTouches

targetTouches

touchend

touchmove

The touch object

identifier

screenX

screenY

clientX

clientY

pageX

pageY

radiusX

radiusY

rotationAngle

force

target

The game

Code structure

/css

/img

/js

/components

/entities

/widgets

Canvas.js

EnemyManager.js

GameLoop.js

PhysicsManager.js

Vec2.js

main.js

index.html

Mobile optimizations

Combine resources

Track touches by IDs

Use CSS animations with caution

Use separate canvases for each game layer

Use image atlases

Summary

Index

Learn HTML5 by Creating Fun Games

Copyright © 2013 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: June 2013

Production Reference: 1190613

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-84969-602-9

www.packtpub.com

Cover Image by Duraid Fatouhi (<[email protected]>)

Credits

Author

Rodrigo Silveira

Reviewer

Thomas Mak

Acquisition Editor

Andrew Duckworth

Commissioning Editor

Shreerang Deshpande

Lead Technical Editor

Madhuja Chaudhari

Technical Editors

Veena Pagare

Priya Singh

Sampreshita Maheshwari

Project Coordinator

Apeksha Chitnis

Proofreaders

Aaron Nash

Bernadette Watkins

Indexer

Hemangini Bari

Graphics

Ronak Dhruv

Valentina Dsilva

Production Coordinator

Nilesh R. Mohite

Cover Work

Nilesh R. Mohite

About the Author

Rodrigo Silveira is a web engineer at Deseret Digital Media. His responsibilities include back-end system development, tools, and maintenance, front-end application development and design, and more recently, he's been involved in mobile development of various products on the Android platform.

He received his Bachelor's of Science in Computer Science from Brigham Young University, Idaho, as well as an Associate's Degree in Business Management from LDS Business College in Salt Lake City, Utah.

His fascination for web development began in his early teenage years, and his skills grew as he discovered the power of a library subscription, a curious and willing mind, and supportive parents and friends. Today Rodrigo balances his time between the three great passions of his life—his family, software development, and video games (with the last two usually being mingled together).

About the Reviewer

Thomas Mak, also known as Makzan, is a developer with a specialty in web development and game design. He has over ten years of experience building digital products, including real-time multiplayer interaction games and iOS applications.

He is currently a founder of game development learning company, 42games (http://42games.net), where he makes game development tutorials and online learning resources.

He has written two books with Packt publishing and one screencast series for building Flash Virtual World and making games with HTML5 and related web standards.

I would like to thank my family and my wife, Candy Wong, for supporting all my writings.

www.PacktPub.com

Support files, eBooks, discount offers and more

You might want to visit www.PacktPub.com for support files and downloads related to your book.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <service@packtpu...