The Essential Guide to HTML5 : Using Games to Learn HTML5 and JavaScript

Gain a deep, practical knowledge of HTML and JavaScript that will provide an introduction to programming and enable you to build interactive websites. This completely updated second edition explains HTML, JavaScript and CSS in the context of working examples and contains full-color screen shots of the programs in action. You'll begin at an introductory level, learning the essentials of HTML5 and JavaScript and programming techniques. Each chapter features either a familiar game such as Hangman, Rock-Paper-Scissors, Craps, Memory, and Blackjack, or a simple type of game, such as a quiz, a maze, or animated simulations. You’ll develop solid programming skills that will help when learning other programming languages. Each chapter contains tables revealing the structure of the program with comments for each line of code. These examples demonstrate the features introduced with HTML5. You’ll see how to use canvas elements for line drawing. You can include your own audio and video clips, directly controlled by your JavaScript code. For example, the reward for correct completion of a quiz can be the playing of an audio clip and a video clip. You’ll also learn how to use localStorage to store high scores or game preferences on a user's computer for retrieval next time they play. __T__he Essential Guide to HTML5\*\* explores all of this and more. **What You'll Learn** * Understand HTML 5 concepts with the help of easy-to-grasp, appealing examples * Use HTML5 to explore new avenues for application and game development on the web * Review important new elements of HTML 5 * Build, test, and upload simple games to a web site. **Who This Book Is For** Both absolute beginners and users with some knowledge of HTML who want to learn the new HTML5 features Table of Contents 5 About the Author 10 About the Technical Reviewer 11 Acknowledgments 12 Introduction 13 Chapter 1: The Basics 16 Introduction 16 Critical Requirements 19 HTML5, CSS, and JavaScript Features 19 Basic HTML Structure and Tags 19 Using Cascading Style Sheets 25 JavaScript Programming 28 Using a Text Editor 30 Building the Applications 33 Testing and Uploading the Application 40 Summary 41 Chapter 2: Dice Game 42 Introduction 42 Critical Requirements 45 HTML5, CSS, and JavaScript Features 46 Pseudo-Random Processing and Mathematical Expressions 46 Variables and Assignment Statements 47 Programmer-Defined Functions 49 Conditional Statements: if and switch 51 Drawing on the Canvas 54 Displaying Text Output Using a Form 65 Building the Application and Making It Your Own 66 Throwing a Single Die 68 Throwing Two Dice 75 The Complete Game of Craps 82 Making the Application Your Own 91 Testing and Uploading the Application 93 Summary 94 Chapter 3: Bouncing Ball 95 Introduction 95 Critical Requirements 99 HTML5, CSS, JavaScript Features 100 Drawing a Ball or an Image or Images 100 Gradients with a Side Trip to Explain Arrays 104 Setting Up a Timing Event 109 Calculating a New Position and Collision Detection 111 Validation 113 Stopping and Resuming Animation Triggered by Buttons 115 HTML Page Reload 116 Preloading Images 116 Building the Application and Making It Your Own 117 Testing and Uploading the Application 135 Summary 136 Chapter 4: Cannonball and Slingshot 137 Introduction 137 Critical Requirements 141 HTML5, CSS, and JavaScript Features 143 Arrays and Programmer-Defined Objects 143 Rotations and Translations for Drawing 146 Drawing Line Segments 151 Mouse Events for Pulling on the Slingshot 153 Changing the List of Items Displayed Using Array Splice 155 Distance Between Points 156 Building the Application and Making It Your Own 157 Cannonball: With Cannon, Angle, and Speed 164 Slingshot: Using a Mouse to Set Parameters of Flight 174 Testing and Uploading the Application 186 Summary 186 Chapter 5: The Memory (aka Concentration) Game 188 Introduction 188 Critical Requirements 194 HTML5, CSS, JavaScript Features 195 Representing Cards 196 Using Date for Timing 197 Providing a Pause 198 Drawing Text 199 Drawing Polygons 202 Shuffling Cards 203 Implementing Clicking on a Card 204 Preventing Certain Types of Cheating 205 Building the Application and Making It Your Own 206 Testing and Uploading the Application 228 Summary 228 Chapter 6: Quiz 230 Introduction 230 Critical Requirements for a Quiz Game 234 HTML5, CSS, and JavaScript Features 235 Storing and Retrieving Information in Arrays 235 Creating HTML During Program Execution 238 Using CSS in the Style Element 240 Responding to Player Moves 241 Presenting Audio and Video 243 Checking the Player's Answer 244 Building the Application and Making It Your Own 245 Testing and Uploading the Application 256 Summary 256 Chapter 7: Mazes 258 Introduction 258 Critical Requirements 266 HTML5, CSS, and JavaScript Features 267 Representation of Walls and the Token 267 Mouse Events to Build and Position a Wall 268 Detecting the Arrow Keys 269 Collision Detection: Token and Any Wall 271 Using Local Storage 275 Encoding Data for Local Storage 283 Radio Buttons 285 Building the Application and Making It Your Own 286 Creating the Second Maze Application 298 Testing and Uploading Application 309 Summary 310 Chapter 8: Rock, Paper, Scissors 312 Introduction 312 Critical Requirements 316 HTML5, CSS, and JavaScript Features 317 Providing Graphical Buttons for the Player 317 Generating the Computer Move 323 Displaying Results Using Animation 328 Audio and DOM Processing 331 Starting Off 334 Building the Application and Making It Your Own 335 Testing and Uploading the Application 346 Summary 347 Chapter 9: Hangman 348 Introduction 348 Critical Requirements 356 HTML5, CSS, JavaScript Features 357 Storing a Word List as an Array Defined in an External Script File 358 Generating and Positioning HTML Markup, then Changing the Markup to Buttons, and then Disabling the Buttons 359 Creating Progressive Drawings on a Canvas 362 Maintaining the Game State and Determining a Win or Loss 365 Checking a Guess and Revealing Letters in the Secret Word by Setting textContent 366 Building the Application and Making It Your Own 367 Testing and Uploading the Application 381 Summary 382 Chapter 10: Blackjack 383 Introduction 383 Critical Requirements 390 HTML5, CSS, and JavaScript Features 391 Source for Images for Card Faces and Setting Up the Image Objects 391 Creating the Programmer-Defined Object for the Cards 392 Starting a Game 393 Dealing the Cards 394 Shuffling the Deck 399 Capturing Key Presses 400 Using Header and Footer Element Types 402 Building the Application and Making It Your Own 403 Testing and Uploading the Application 419 Summary 420 Index 421 Gain a deep, practical knowledge of HTML and JavaScript that will provide an introduction to programming and enable you to build interactive websites. This completely updated second edition explains HTML, JavaScript and CSS in the context of working examples and contains full-color screen shots of the programs in action. You'll begin at an introductory level, learning the essentials of HTML5 and JavaScript and programming techniques. Each chapter features either a familiar game such as Hangman, Rock-Paper-Scissors, Craps, Memory, and Blackjack, or a simple type of game, such as a quiz, a maze, or animated simulations. You'll develop solid programming skills that will help when learning other programming languages. Each chapter contains tables revealing the structure of the program with comments for each line of code. These examples demonstrate the features introduced with HTML5. You'll see how to use canvas elements for line drawing. You can include your own audio and video clips, directly controlled by your JavaScript code. For example, the reward for correct completion of a quiz can be the playing of an audio clip and a video clip. You'll also learn how to use localStorage to store high scores or game preferences on a user's computer for retrieval next time they play. T he Essential Guide to HTML5 explores all of this and more. What You'll Learn Understand HTML 5 concepts with the help of easy-to-grasp, appealing examples Use HTML5 to explore new avenues for application and game development on the web Review important new elements of HTML 5 Build, test, and upload simple games to a web site. Who This Book Is For Both absolute beginners and users with some knowledge of HTML who want to learn the new HTML5 features 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 WebSockets API facilitates 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 for retrieval next time they play. 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' Gain a deep, practical knowledge of HTML and JavaScript that will provide an introduction to programming and enable you to build interactive websites. This completely updated second edition explains HTML, JavaScript and CSS in the context of working examples and contains full-color screen shots of the programs in action. You'll begin at an introductory level, learning the essentials of HTML5 and JavaScript and programming techniques. Each chapter features either a familiar game such as Hangman, Rock-Paper-Scissors, Craps, Memory, and Blackjack, or a simple type of game, such as a quiz, a maze, or animated simulations. You l develop solid programming skills that will help when learning other programming languages. Each chapter contains tables revealing the structure of the program with comments for each line of code. These examples demonstrate the features introduced with HTML5. You l see how to use canvas elements for line drawing. You can include your own audio and video clips, directly controlled by your JavaScript code. For example, the reward for correct completion of a quiz can be the playing of an audio clip and a video clip. You l also learn how to use localStorage to store high scores or game preferences on a user's computer for retrieval next time they play. The Essential Guide to HTML5 explores all of this and more. -- Provided by publisher Front Matter ....Pages i-xix The Basics (Jeanine Meyer)....Pages 1-26 Dice Game (Jeanine Meyer)....Pages 27-79 Bouncing Ball (Jeanine Meyer)....Pages 81-122 Cannonball and Slingshot (Jeanine Meyer)....Pages 123-173 The Memory (aka Concentration) Game (Jeanine Meyer)....Pages 175-216 Quiz (Jeanine Meyer)....Pages 217-244 Mazes (Jeanine Meyer)....Pages 245-298 Rock, Paper, Scissors (Jeanine Meyer)....Pages 299-334 Hangman (Jeanine Meyer)....Pages 335-369 Blackjack (Jeanine Meyer)....Pages 371-408 Back Matter ....Pages 409-417 The Essential Guide to HTML5 focuses on teaching the core HTML5 techniques through game development, and covers a different game in each chapter. The game development side gives readers more motivation to learn, and makes it more engaging and effective