HTML5 opens up a plethora of new avenues for application and game development on the web. Games can now be created and interacted with directly within HTML with no need for users to download extra plugins, or for developers to learn new languages. Important new features such as the Canvas tag enable drawing directly onto the web page, the Audio tag allows sounds to be triggered and played from within your HTML code, the web sockets API brings the facility for real-time communication, and the local storage API enables data such as high scores or game preferences to be kept on a user's computer to be retrieved next time they play your game. All of these features and many more are covered within The Essential Guide to HTML5. The book begins at an introductory level, teaching the essentials of HTML5 and JavaScript through game development. Each chapter features a familiar game type as its core example, such as hangman, rock-paper-scissors, or dice games, and uses these simple constructs to build a solid skillset of the key HTML5 concepts and features. By working through these hands on examples, you will gain a deep, practical knowledge of HTML5 that will enable you to build your own, more advanced games and applications. Concepts are introduced and motivated with easy-to-grasp, appealing examples. Code is explained in detail after general explanations. Reader is guided into how to make the examples 'their own'. What you’ll learn Use HTML5 and JavaScript to create interactive web sites Program in JavaScript with the new HTML5 features Draw on canvas and place text on the canvas Create animated scenes using timing events Handle mouse events for interaction with the user/player Important concepts useful in any programming language/environment HTML tags, canvas, Math.random, setInterval, setTimerout, addEventListener, Date, localStorage and other features Who this book is for Anyone who wants to make interactive websites. This book is suited for: Total beginners Those who have done some HTML but are afraid to do any programming Those with some experience with HTML, JavaScript, or Flash ActionScript but who are unfamiliar with the new features in HTML5 Table of Contents The Basics Dice Game Bouncing Ball Cannonball and Slingshot The Memory (aka Concentration) Game Quiz Mazes Rock, Paper, Scissors Hangman Blackjack
Author(s): Jeanine Meyer
Edition: 1
Year: 2010
Language: English
Pages: 375
Prelim......Page 1
Contents at a Glance......Page 6
Contents......Page 7
About the Author......Page 12
About the Technical Reviewer......Page 13
Acknowledgments......Page 14
Introduction......Page 15
Introduction......Page 17
Critical requirements......Page 19
Basic HTML structure and tags......Page 20
JavaScript programming......Page 26
Building the application and making it your own......Page 27
Summary......Page 35
Introduction......Page 37
Pseudo-random processing and mathematical expressions......Page 40
Variables and assignment statements......Page 41
Programmer-defined functions......Page 42
Conditional statements: if and switch......Page 43
Drawing on the canvas......Page 45
Building the application and making it your own......Page 54
Throwing a single die......Page 56
Throwing two dice......Page 63
The complete game of craps......Page 71
Summary......Page 81
Introduction......Page 83
Drawing a ball, image, and gradient......Page 86
Building the application and making it your own......Page 96
Summary......Page 112
Introduction......Page 113
Critical requirements......Page 116
Arrays and programmer-defined objects......Page 117
Rotations and translations for drawing......Page 119
Drawing line segments......Page 123
Mouse events for pulling on the slingshot......Page 124
Distance between points......Page 126
Building the application and making it your own......Page 127
Cannonball: with cannon, angle, and speed......Page 134
Slingshot: using a mouse to set parameters of flight......Page 144
Summary......Page 156
Introduction......Page 157
Representing cards......Page 162
Using Date for timing......Page 163
Providing a pause......Page 164
Drawing text......Page 165
Drawing polygons......Page 167
Implementing clicking on a card......Page 168
Preventing certain types of cheating......Page 169
Building the application and making it your own......Page 170
Testing and uploading the application......Page 192
Summary......Page 193
Introduction......Page 195
Critical requirements......Page 199
Storing and retrieving information in arrays......Page 200
Creating HTML during program execution......Page 202
Changing elements by modifying CSS using JavaScript code......Page 205
Text feedback using form and input elements......Page 206
Presenting video......Page 207
Building the application and making it your own......Page 209
Summary......Page 226
Introduction......Page 229
Critical requirements......Page 234
Mouse events to build and position a wall......Page 235
Detecting the arrow keys......Page 236
Collision detection: token and any wall......Page 238
Using local storage......Page 240
Encoding data for local storage......Page 246
Radio buttons......Page 247
Building the application and making it your own......Page 248
Creating the second maze application......Page 262
Summary......Page 273
Introduction......Page 275
Critical requirements......Page 278
Providing graphical buttons for the player......Page 279
Generating the computer move......Page 283
Starting off......Page 290
Building the application and making it your own......Page 291
Testing and uploading the application......Page 300
Summary......Page 301
Introduction......Page 303
Storing a word list as an array defined in an external script file......Page 311
Generating and positioning HTML markup, then making the markup be buttons, and then disabling the buttons......Page 312
Creating progressive drawings on a canvas......Page 314
Maintaining the game state and determining a win or loss......Page 316
Checking a guess and revealing letters in the secret word by setting textContent......Page 317
Building the application and making it your own......Page 318
Summary......Page 331
Introduction......Page 333
Critical requirements......Page 338
HTML5, CSS, and JavaScript features......Page 339
Building the application and making it your own......Page 346
Summary......Page 362
Numbers......Page 363
B......Page 364
C......Page 365
D......Page 366
F......Page 367
H......Page 368
I......Page 369
K......Page 370
O......Page 371
R......Page 372
S......Page 373
T......Page 374
Z......Page 375
