HTML5 Games

lt;p>HTML5 Gamesshows you how to combine HTML5, CSS3 and JavaScript to make games for the web and mobiles - games that were previously only possible with plugin technologies like Flash. Using the latest open web technologies, you are guided through the process of creating a game from scratch using Canvas, HTML5 Audio, WebGL and WebSockets.  

Inside, Jacob Seidelin shows you how features available in HTML5 can be used to create games. First, you will build a framework on which you will create your HTML5 game. Then each chapter covers a new aspect of the game including user input, sound, multiplayer functionality, 2D and 3D graphics and more. By the end of the book, you will have created a fully functional game that can be played in any compatible browser, or on any mobile device that supports HTML5.

 

Topics include:

 

• Dealing with backwards compatibility
• Generating level data
• Making iOS and Android web apps
• Taking your game offline
• Using Web Workers
• Persistent Game Data
• Drawing with Canvas
• Capturing player input
• Creating 3D graphics with WebGL
• Textures and lighting
• Sound with HTML5 Audio  

And more…

Autorentext

Jacob Seidelin (Copenhagen) is a freelance web developer with 10 years of experience working with both backend programming, graphics design and front-end technology. When not working with clients of all sizes he enjoys JavaScript and HTML5, web game development and generally pushing the limit of what is possible in the browser. The results of his adventures in web development can be witnessed at his website at www.nihilogic.dk

Zusammenfassung

HTML5 Gamesshows you how to combine HTML5, CSS3 and JavaScript to make games for the web and mobiles - games that were previously only possible with plugin technologies like Flash. Using the latest open web technologies, you are guided through the process of creating a game from scratch using Canvas, HTML5 Audio, WebGL and WebSockets.

Inside, Jacob Seidelin shows you how features available in HTML5 can be used to create games. First, you will build a framework on which you will create your HTML5 game. Then each chapter covers a new aspect of the game including user input, sound, multiplayer functionality, 2D and 3D graphics and more. By the end of the book, you will have created a fully functional game that can be played in any compatible browser, or on any mobile device that supports HTML5.

Topics include:

• Dealing with backwards compatibility
• Generating level data
• Making iOS and Android web apps
• Taking your game offline
• Using Web Workers
• Persistent Game Data
• Drawing with Canvas
• Capturing player input
• Creating 3D graphics with WebGL
• Textures and lighting
• Sound with HTML5 Audio
  And more

Inhalt
Introduction 1 Who this book is for 2

What this book is about 2

Part I Getting Started with HTML5 Games 5

CHAPTER 1 Gaming on the Web 7

Tracing the History of HTML5 8

Using HTML5 for Games 8

Canvas 9

Audio 11

WebSockets 12

Web Storage 13

WebGL 14

HTML5 and Flash 14

Creating Backward Compatibility 15

Using feature detection 15

Filling the gaps with polyfills 16

Building a Game 16

Summary 17

CHAPTER 2 Taking the First Steps 19

Understanding the Game 20

Swapping jewels 20

Matching three 20

Level progression 20

Identifying Game Stages 21

Splash screen 21

Main menu 22

Playing the game 22

High score 23

Creating the Application Skeleton 24

Setting up the HTML 25

Adding a bit of style 26

Loading the scripts 27

Creating a DOM helper module 31

Creating the Splash Screen 35

Working with web fonts 36

Styling the splash screen 37

Summary 40

CHAPTER 3 Going Mobile 41

Developing Mobile Web Applications 42

Write once, read many 42

Th e challenges of mobile platforms 43

Handling User Input on Mobile Devices 43

Keyboard input 43

Mouse versus touch 44

Adapting to Small Screen Resolutions 45

Creating scalable layouts 46

Controlling the viewport 48

Disabling user scaling 49

Creating Different Views 50

Creating the main menu 50

Adding screen modules 52

Using CSS media queries 56

Detecting device orientation 58

Adding a landscape style sheet 59

Developing for iOS and Android Devices 62

Placing web applications on the home screen 62

Getting the browser out of the way 71

Debugging Mobile Web Applications 73

Enabling the Safari debugger 74

Debugging on Android 76

Building Native Web Applications 77

PhoneGap 77

Future Mobile Platforms 81

Summary 81

Part II Creating the Basic Game 83

CHAPTER 4 Building the Game 85

Creating the Game Board Module 85

Initializing the game state 87

Filling the initial board 90

Implementing the Rules 93

Validating swaps 93

Detecting chains 95

Refilling the grid 100

Swapping jewels 104

Summary 105

CHAPTER 5 Delegating Tasks to Web Workers 107

Working with Web Workers 107

Limitations in workers 108

What workers can do 109

Using Workers 110

Sending messages 111

Receiving messages 111

Catching errors 112

Shared workers 112

A prime example 114

Using Web Workers in Games 117

Creating the worker module 117

Keeping the same interface 120

Summary 125

CHAPTER 6 Creating Graphics with Canvas 127

Ways to Display Graphics on the Web 128

Bitmap images 128

SVG graphics 128

The canvas element 129

When to choose canvas 129

Drawing with canvas 130

Drawing shapes and paths 131

Using advanced strokes and fill styles 142

Using transformations 147

Adding text, images, and shadows 151

Managing the state stack 156

Drawing the HTML5 logo 157

Compositing 164

Accessing Image Data 167

Retrieving pixel values 167

Updating pixel values 168 Exporting image fi le ...