25,99 €
Mehr erfahren.
- Herausgeber: John Wiley & Sons
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
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…
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 490
Veröffentlichungsjahr: 2014
Ähnliche
This edition first published 2014
© 2014 John Wiley and Sons, Ltd.
Registered office
John Wiley & Sons Ltd, The Atrium, Southern Gate, Chichester, West Sussex, PO19 8SQ, United Kingdom
For details of our global editorial offices, for customer services and for information about how to apply for permission to reuse the copyright material in this book please see our website at www.wiley.com.
The right of the author to be identified as the author of this work has been asserted in accordance with the Copyright, Designs and Patents Act 1988.
All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, except as permitted by the UK Copyright, Designs and Patents Act 1988, without the prior permission of the publisher.
Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books.
Designations used by companies to distinguish their products are often claimed as trademarks. All brand names and product names used in this book are trade names, service marks, trademarks or registered trademarks of their respective owners. The publisher is not associated with any product or vendor mentioned in this book. This publication is designed to provide accurate and authoritative information in regard to the subject matter covered. It is sold on the understanding that the publisher is not engaged in rendering professional services. If professional advice or other expert assistance is required, the services of a competent professional should be sought.
Trademarks: Wiley and the Wiley logo are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates in the United States and/or other countries, and may not be used without written permission. All other trademarks are the property of their respective owners. John Wiley & Sons, Ltd. is not associated with any product or vendor mentioned in the book.
A catalogue record for this book is available from the British Library.
ISBN 978-1-118-85538-6 (paperback); ISBN 978-1-118-85545-4 (ePub); 978-1-118-85546-1 (ePDF)
Set in 7.5/10 Chaparral pro by TCS/SPS
Printed in US by Bind-Right
Publisher’s Acknowledgements
Some of the people who helped bring this book to market include the following:
Editorial and Production
VP Consumer and Technology Publishing Director: Michelle Leete
Associate Director–Book Content Management: Martin Tribe
Associate Publisher: Chris Webb
Associate Commissioning Editor: Ellie Scott
Project Editor: Sydney Argenta
Copy Editor: Melba Hopper
Technical Editor: Andrew Wooldridge
Editorial Manager: Jodi Jensen
Senior Project Editor: Sara Shlaer
Editorial Assistant: Annie Sullivan
Marketing
Marketing Manager: Lorna Mein
Marketing Assistant: Polly Thomas
About the Author
JACOB SEIDELIN is a freelance web developer with 15 years of experience working with back-end programming, graphics design, and front-end technology. When not working with clients he enjoys JavaScript and HTML5, web game development, and generally pushing the limit of what is possible in the browser. Thee results of his adventures in web development can be witnessed at his website at http://www.nihilogic.dk/.
Acknowledgments
I’d like to acknowledge a few people who helped in the making of this book. I want to thank my editors Sydney Argenta and Melba Hopper and the rest of the Wiley team. A big thanks to Andrew Wooldridge, my technical editor, whose keen eye for technical details kept me on my toes. It has been a pleasure working with all of you. Thanks also to the people who helped in the making of the first edition, Linda Morris, Brian Herrmann, and Charles Hutchinson.
I’d also like to extend my gratitude to the web development community in general for the never-ending inspiration and motivation. The same goes for the hard-working people at W3C, Khronos, and other organizations trying to make the Web a better place through open standards. Keep fighting the good fight.
Finally, thanks to my beautiful Ulla for the endless support and patience. Thank you for believing.
HTML5 Games
Table of Contents
Introduction
Who this book is for
What this book is about
Part I: Getting Started with HTML5 Games
Chapter 1: Gaming on the Web
Tracing the History of HTML5
Using HTML5 for Games
Canvas
Audio
WebSockets
Web Storage
WebGL
HTML5 and Flash
Creating Backward Compatibility
Using feature detection
Filling the gaps with polyfills
Building a Game
Summary
Chapter 2: Taking the First Steps
Understanding the Game
Swapping jewels
Matching three
Level progression
Identifying Game Stages
Splash screen
Main menu
Playing the game
High score
Creating the Application Skeleton
Setting up the HTML
Adding a bit of style
Loading the scripts
Creating a DOM helper module
Creating the Splash Screen
Working with web fonts
Styling the splash screen
Summary
Chapter 3: Going Mobile
Developing Mobile Web Applications
Write once, read many
The challenges of mobile platforms
Handling User Input on Mobile Devices
Keyboard input
Mouse versus touch
Adapting to Small Screen Resolutions
Creating scalable layouts
Controlling the viewport
Disabling user scaling
Creating Different Views
Creating the main menu
Adding screen modules
Using CSS media queries
Detecting device orientation
Adding a landscape style sheet
Developing for iOS and Android Devices
Placing web applications on the home screen
Getting the browser out of the way
Debugging Mobile Web Applications
Enabling the Safari debugger
Debugging on Android
Building Native Web Applications
PhoneGap
Future Mobile Platforms
Summary
Part II: Creating the Basic Game
Chapter 4: Building the Game
Creating the Game Board Module
Initializing the game state
Filling the initial board
Implementing the Rules
Validating swaps
Detecting chains
Refilling the grid
Swapping jewels
Summary
Chapter 5: Delegating Tasks to Web Workers
Working with Web Workers
Limitations in workers
What workers can do
Using Workers
Sending messages
Receiving messages
Catching errors
Shared workers
A prime example
Using Web Workers in Games
Creating the worker module
Keeping the same interface
Summary
Chapter 6: Creating Graphics with Canvas
Ways to Display Graphics on the Web
Bitmap images
SVG graphics
The canvas element
When to choose canvas
Drawing with canvas
Drawing shapes and paths
Using advanced strokes and fill styles
Using transformations
Adding text, images, and shadows
Managing the state stack
Drawing the HTML5 logo
Compositing
Accessing Image Data
Retrieving pixel values
Updating pixel values
Exporting image file data
Understanding security restrictions
Creating pixel-based effects
Summary
Chapter 7: Creating the Game Display
Tracking Load Progress
Adding a progress bar
Building the Game Screen
Drawing the board with canvas
Exiting the game
Pausing the game
Summary
Chapter 8: Interacting with the Game
Capturing User Input
Mouse events on touch devices
The virtual keyboard
Touch events
Input events and canvas
Using gamepads and controllers
Building the Input Module
Handling input events
Implementing game actions
Binding inputs to game functions
Summary
Chapter 9: Animating Game Graphics
Making the Game React
Animation timing
Animating the cursor
Animating game actions
Adding Points and Time
Creating the UI elements
Creating the game timer
Pausing the game
Awarding points
Game over
Summary
Part III: Adding 3D and Sound
Chapter 10: Creating Audio for Games
HTML5 Audio
Detecting audio support
Understanding the audio format wars
Finding sound effects
Using the audio Element
Controlling playback
Using audio on mobile devices
Working with Audio Data
Using the Web Audio API
Building the Audio Module
Preparing for audio playback
Playing sound effects
Stopping sounds
Cleaning up
Adding Sound Effects to the Game
Playing audio from the game screen
Summary
Chapter 11: Creating 3D Graphics with WebGL
3D for the Web
Where you can use WebGL
Getting started with WebGL
Debugging WebGL
Creating a helper module
Using Shaders
Variables and data types
Using shaders with WebGL
Uniform variables
Varying variables
Rendering 3D Objects
Using vertex buffers
Using index buffers
Using models, views, and projections
Rendering
Loading Collada models
Using Textures and Lighting
Adding light
Adding per-pixel lighting
Creating textures
Creating the WebGL display
Loading the WebGL files
Creating the jewel objects
Setting up WebGL
Rendering jewels
Animating the jewels
Using Third-Party WebGL Engines
Summary
Part IV: Local Storage and Multiplayer Games
Chapter 12: Local Storage and Caching
Storing Data with Web Storage
Using the storage interface
Building a storage module
Making the Game State Persistent
Saving the game data
Creating a High Score List
Building the high score screen
Storing the high score data
Displaying the high score data
Application Cache
The cache manifest
Summary
Chapter 13: Going Online with WebSockets
Using WebSockets
Connecting to servers
Communicating with WebSockets
Using Node on the Server
Installing Node
Creating an HTTP server with Node
Creating a WebSocket chat room
Summary
Guide
Table of Contents
Begin Reading
Pages
1
2
3
5
7
8
9
10
11
12
13
14
15
16
17
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
83
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
279
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
401
402
403
404
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
Introduction
“ALL THIS IS done in HTML5, by the way!” exclaimed Steve Jobs, the mind and face of the Apple success story, as he walked the audience through the new HTML5-powered ad system at the iPhone OS 4.0 Keynote, receiving cheers, laughs, and applause in return. The recent developments in open, standards-based web technologies are moving the web forward at an increasing pace, and Apple’s embrace of HTML5, including the blocking of Flash on all iOS devices, is just another symbol of the power of this movement. Although Apple’s love for HTML5 might in part be fueled by business motives, it is clear that the open web is on the move and exciting things are happening on an almost daily basis, making it an exciting time for web and game developers alike.
The world of web and game development wasn’t always this exciting, however. Building games for the browser could be a frustrating experience and has traditionally meant having to choose between using feature-rich plugin-based technologies or settling for a more low-tech approach, trying to fit the square peg of HTML and JavaScript into the round hole of game development. Disagreeing or downright broken implementations of various standards have only made the consistent and predictable environment of, for instance, Flash more appealing.
By opting for plugins like Flash, developers and game designers gain access to frameworks that are suitable for advanced game development, featuring dynamic graphics, sounds, and even 3D, but doing so also disconnects the game from the technologies surrounding it. Although technologies such as Flash, Java, and Silverlight all have means to communicate with the rest of the page, they remain isolated objects with limited capabilities for mixing with the surrounding content.
In contrast, using HTML, JavaScript, and CSS — the native building blocks of the web — means your game will fit naturally within the context of a web page, but with them comes other compromises, not the least of which is a lack of suitable elements and APIs. When the first editions of the HTML standard were published in the mid-1990s, it is doubtful that anyone had rich Internet applications in mind, and HTML’s document-centric nature meant that it was much more suitable for marking up pages of text and images than for application and game development. Even as these pages slowly became more and more interactive as JavaScript and the Document Object Model (DOM) evolved, graphics were still limited to static images and styled HTML elements, and audio was pretty much nonexistent. Only recently have the specifications for HTML5, CSS3, and other related standards evolved in the direction of actual applications, allowing developers to build experiences more akin to desktop applications than the traditional page-based web site. Naturally, these developments also apply to web games, and many of the recent advancements are a perfect fit for games and other interactive entertainment applications.
Who this book is for
HTML, JavaScript, and CSS are no longer limited to building web sites; web apps can be deployed on the web, as desktop widgets, and on mobile devices and many other places. If you are in any way interested in developing games for these targets and want to leverage your existing web development skills to do so, this is the book for you.
You probably already know a good deal about web development and have worked with HTML, CSS, and JavaScript previously. HTML5 Games is not a general guide to HTML5, and it does not teach you how to build web sites, so it is generally assumed throughout the book that you have some basic experience with traditional HTML and have at least heard of the new elements and APIs. Not all aspects of HTML5 are covered either, simply because they are not very relevant to games. You do not need to be an expert programmer, but you should have some experience with JavaScript. The new JavaScript APIs introduced with HTML5 are, of course, covered and explained, but it is otherwise expected that you have a good grasp of the language itself.
HTML5 Games is also not a book about game design. Many excellent books are available that deal with all conceivable aspects of game development more in depth than what this book can offer you. Trying to cover topics as diverse as artificial intelligence, physics simulation, and advanced graphics programming with enough detail to do them justice would leave little room to talk about HTML5 and web development. That being said, you don’t need any prior experience with game development, nor do you need to be a mathematician or a great artist to use this book. HTML5 Games stays in the shallow end in terms of game development theory, and any nontrivial math and programming concepts that are used are explained as they are introduced. An interest in games and web development, a bit of high school math, and the ability to create very basic graphics should get you through the book just fine.
What this book is about
HTML5 Games is about taking your skills in web development and applying them to game development. It doesn’t matter if you are a web developer looking to move into the game development field, a Flash game developer interested in the new open web technologies, or if you possess an entirely different goal, HTML5 Games shows you how to use the tools you already know to bridge the divide between traditional web sites and fun game experiences.
During the course of the book, you go through the development of a complete web game from the initial white page to the final product, ready to play in both the browser as well as on your iPhone or Android device. You see how to utilize new elements such as canvas and audio to make games that fit naturally in the context of the web without relying on plugins or ugly hacks. You learn how to add multiplayer functionality using Web Sockets and Node. js, how to store game data on the client with Web Storage, and how to manipulate graphics down to the pixel level using canvas. You also see how the game can easily be moved to mobile devices, taking advantage of touch input. In addition, you see how your applications can be made available offline with the new application cache. Finally, HTML5 Games examines the options available for deploying and distributing the finished game. When you finish the book, you will be able to take these lessons and apply them to your own projects, creating smashing web games that fully exploit today’s open web technologies.
Most of the code you will encounter throughout the book is available from the book’s companion web site, which you will find at www.wiley.com/go/html5games.com. From there, you can download an archive containing all the code for the example game as well as many smaller, independent examples. Inside the archive, you will find a folder for each chapter of the book. These folders contain the example web game as it exists at the end of each chapter. If the given chapter has any examples not related to the game, you will find those in a sub-folder called examples.
As you work your way through the book, I encourage you to try building the game from the ground up but if you prefer to just examine the sample code, that’s perfectly fine as well. In any case, I hope you will have fun.
Now, let’s get started. Game on.
Part I
