HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL

Overview

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 ...

See more details below
Paperback
$28.71
BN.com price
(Save 28%)$39.99 List Price

Pick Up In Store

Reserve and pick up in 60 minutes at your local store

Other sellers (Paperback)
  • All (11) from $21.22   
  • New (8) from $21.50   
  • Used (3) from $21.22   
HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL

Available on NOOK devices and apps  
  • NOOK Devices
  • Samsung Galaxy Tab 4 NOOK 7.0
  • Samsung Galaxy Tab 4 NOOK 10.1
  • NOOK HD Tablet
  • NOOK HD+ Tablet
  • NOOK eReaders
  • NOOK Color
  • NOOK Tablet
  • Tablet/Phone
  • NOOK for Windows 8 Tablet
  • NOOK for iOS
  • NOOK for Android
  • NOOK Kids for iPad
  • PC/Mac
  • NOOK for Windows 8
  • NOOK for PC
  • NOOK for Mac
  • NOOK for Web

Want a NOOK? Explore Now

NOOK Book (eBook)
$22.99
BN.com price
(Save 42%)$39.99 List Price

Overview

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ā€¦

Read More Show Less

Product Details

  • ISBN-13: 9781118855386
  • Publisher: Wiley
  • Publication date: 3/10/2014
  • Edition number: 2
  • Pages: 456
  • Sales rank: 626,304
  • Product dimensions: 7.40 (w) x 9.20 (h) x 1.00 (d)

Table of Contents

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 data 170

Understanding security restrictions 171

Creating pixel-based eff ects 171

Summary 174

CHAPTER 7 Creating the Game Display 175

Tracking Load Progress 176

Adding a progress bar 177

Building the Game Screen 180

Drawing the board with canvas 181

Exiting the game 188

Pausing the game 191

Summary 194

CHAPTER 8 Interacting with the Game 195

Capturing User Input 196

Mouse events on touch devices 196

The virtual keyboard 196

Touch events 198

Input events and canvas 204

Using gamepads and controllers 206

Building the Input Module 211

Handling input events 214

Implementing game actions 220

Binding inputs to game functions 226

Summary 233

CHAPTER 9 Animating Game Graphics 235

Making the Game React 236

Animation timing 236

Animating the cursor 241

Animating game actions 243

Adding Points and Time 253

Creating the UI elements 254

Creating the game timer 259

Pausing the game 261

Awarding points 263

Game over 272

Summary 277

Part III Adding 3D and Sound 279

CHAPTER 10 Creating Audio for Games 281

HTML5 Audio 282

Detecting audio support 282

Understanding the audio format wars 283

Finding sound effects 285

Using the audio Element 286

Controlling playback 289

Using audio on mobile devices 293

Working with Audio Data 294

Using the Web Audio API 295

Building the Audio Module 300

Preparing for audio playback 300

Playing sound effects 301

Stopping sounds 303

Cleaning up 304

Adding Sound Effects to the Game 305

Playing audio from the game screen 305

Summary 306

CHAPTER 11 Creating 3D Graphics with WebGL 309

3D for the Web 310

Where you can use WebGL 310

Getting started with WebGL 310

Debugging WebGL 311

Creating a helper module 312

Using Shaders 313

Variables and data types 313

Using shaders with WebGL 319

Uniform variables 325

Varying variables 326

Rendering 3D Objects 327

Using vertex buffers 328

Using index buffers 329

Using models, views, and projections 331

Rendering 336

Loading Collada models 341

Using Textures and Lighting 343

Adding light 344

Adding per-pixel lighting 348

Creating textures 351

Creating the WebGL display 358

Loading the WebGL files 359

Creating the jewel objects 360

Setting up WebGL 362

Rendering jewels 364

Animating the jewels 371

Using Th ird-Party WebGL Engines 375

Summary 376

Part IV Local Storage and Multiplayer Games 377

CHAPTER 12 Local Storage and Caching 379

Storing Data with Web Storage 379

Using the storage interface 380

Building a storage module 384

Making the Game State Persistent 385

Saving the game data 385

Creating a High Score List 389

Building the high score screen 389

Storing the high score data 392

Displaying the high score data 394

Application Cache 395

The cache manifest 396

Summary 399

CHAPTER 13 Going Online with WebSockets 401

Using WebSockets 401

Connecting to servers 402

Communicating with WebSockets 405

Using Node on the Server 407

Installing Node 408

Creating an HTTP server with Node 410

Creating a WebSocket chat room 412

Summary 420

BONUS CHAPTER: APPENDIX A

Canvas Reference BC1

The Canvas Element BC1

The 2D Context API BC2

State management BC2

Transformations BC3

Shapes and Paths BC4

Path Objects BC9

Fills and Strokes BC11

Shadows BC13

Images BC14

Text BC15

Compositing BC16

Pixel manipulation BC17

BONUS CHAPTER: APPENDIX B

WebGL Reference BC19

WebGL API Reference BC19

Data types BC20

Typed arrays BC21

Context properties BC21

Buffers BC22

Shaders BC23

Program objects BC24

Uniform variables BC25

Vertex attributes BC27

Drawing BC28

Textures BC29

Blending BC33

Stencil buffer BC34

Depth buffer BC35

Render buffers BC35

Frame buffers BC37

Other methods BC39

Parameters BC40

BONUS CHAPTER: APPENDIX C

OpenGL ES Shading Language BC47

GLSL ES Language Reference BC47

Data types BC47

Built-in functions BC49

Built-in variables and constants BC57

Index 421

Read More Show Less

Customer Reviews

Be the first to write a review
( 0 )
Rating Distribution

5 Star

(0)

4 Star

(0)

3 Star

(0)

2 Star

(0)

1 Star

(0)

Your Rating:

Your Name: Create a Pen Name or

Barnes & Noble.com Review Rules

Our reader reviews allow you to share your comments on titles you liked, or didn't, with others. By submitting an online review, you are representing to Barnes & Noble.com that all information contained in your review is original and accurate in all respects, and that the submission of such content by you and the posting of such content by Barnes & Noble.com does not and will not violate the rights of any third party. Please follow the rules below to help ensure that your review can be posted.

Reviews by Our Customers Under the Age of 13

We highly value and respect everyone's opinion concerning the titles we offer. However, we cannot allow persons under the age of 13 to have accounts at BN.com or to post customer reviews. Please see our Terms of Use for more details.

What to exclude from your review:

Please do not write about reviews, commentary, or information posted on the product page. If you see any errors in the information on the product page, please send us an email.

Reviews should not contain any of the following:

  • - HTML tags, profanity, obscenities, vulgarities, or comments that defame anyone
  • - Time-sensitive information such as tour dates, signings, lectures, etc.
  • - Single-word reviews. Other people will read your review to discover why you liked or didn't like the title. Be descriptive.
  • - Comments focusing on the author or that may ruin the ending for others
  • - Phone numbers, addresses, URLs
  • - Pricing and availability information or alternative ordering information
  • - Advertisements or commercial solicitation

Reminder:

  • - By submitting a review, you grant to Barnes & Noble.com and its sublicensees the royalty-free, perpetual, irrevocable right and license to use the review in accordance with the Barnes & Noble.com Terms of Use.
  • - Barnes & Noble.com reserves the right not to post any review -- particularly those that do not follow the terms and conditions of these Rules. Barnes & Noble.com also reserves the right to remove any review at any time without notice.
  • - See Terms of Use for other conditions and disclaimers.
Search for Products You'd Like to Recommend

Recommend other products that relate to your review. Just search for them below and share!

Create a Pen Name

Your Pen Name is your unique identity on BN.com. It will appear on the reviews you write and other website activities. Your Pen Name cannot be edited, changed or deleted once submitted.

 
Your Pen Name can be any combination of alphanumeric characters (plus - and _), and must be at least two characters long.

Continue Anonymously

    If you find inappropriate content, please report it to Barnes & Noble
    Why is this product inappropriate?
    Comments (optional)