Learn HTML5 by Creating Fun Games电子书

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