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

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

Released October 2010
Publisher(s): friends of ED
ISBN: 9781430233831

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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.

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

Table of contents

  1. Copyright
  2. Credits
  3. About the Author
  4. About the Technical Reviewer
  5. Acknowledgments
  6. Introduction
    1. Who is this book for?
    2. How is this book structured?
    3. Conventions used in this book
    4. Layout conventions
  7. 1. The Basics
    1. 1.1. Introduction
    2. 1.2. Critical requirements
    3. 1.3. HTML5, CSS, and JavaScript features
      1. 1.3.1. Basic HTML structure and tags
        1. 1.3.1.1. Using cascading style sheets
      2. 1.3.2. JavaScript programming
    4. 1.4. Building the application and making it your own
    5. 1.5. Testing and uploading the application
    6. 1.6. Summary
  8. 2. Dice Game
    1. 2.1. Introduction
    2. 2.2. Critical requirements
    3. 2.3. HTML5, CSS, and JavaScript features
      1. 2.3.1. Pseudo-random processing and mathematical expressions
      2. 2.3.2. Variables and assignment statements
      3. 2.3.3. Programmer-defined functions
      4. 2.3.4. Conditional statements: if and switch
      5. 2.3.5. Drawing on the canvas
        1. 2.3.5.1. Displaying text output using a form
    4. 2.4. Building the application and making it your own
      1. 2.4.1. Throwing a single die
      2. 2.4.2. Throwing two dice
      3. 2.4.3. The complete game of craps
        1. 2.4.3.1. Making the application your own
    5. 2.5. Testing and uploading the application
    6. 2.6. Summary
  9. 3. Bouncing Ball
    1. 3.1. Introduction
    2. 3.2. Critical requirements
    3. 3.3. HTML5, CSS, JavaScript features
      1. 3.3.1. Drawing a ball, image, and gradient
        1. 3.3.1.1. Setting up a timing event
        2. 3.3.1.2. Calculating a new position and collision detection
        3. 3.3.1.3. Validation
        4. 3.3.1.4. HTML page reload
    4. 3.4. Building the application and making it your own
    5. 3.5. Testing and uploading the application
    6. 3.6. Summary
  10. 4. Cannonball and Slingshot
    1. 4.1. Introduction
    2. 4.2. Critical requirements
    3. 4.3. HTML5, CSS, and JavaScript features
      1. 4.3.1. Arrays and programmer-defined objects
      2. 4.3.2. Rotations and translations for drawing
      3. 4.3.3. Drawing line segments
      4. 4.3.4. Mouse events for pulling on the slingshot
      5. 4.3.5. Changing the list of items displayed using array splice
      6. 4.3.6. Distance between points
    4. 4.4. Building the application and making it your own
      1. 4.4.1. Cannonball: with cannon, angle, and speed
      2. 4.4.2. Slingshot: using a mouse to set parameters of flight
    5. 4.5. Testing and uploading the application
    6. 4.6. Summary
  11. 5. The Memory (aka Concentration) Game
    1. 5.1. Introduction
    2. 5.2. Critical requirements
    3. 5.3. HTML5, CSS, JavaScript features
      1. 5.3.1. Representing cards
      2. 5.3.2. Using Date for timing
      3. 5.3.3. Providing a pause
      4. 5.3.4. Drawing text
      5. 5.3.5. Drawing polygons
      6. 5.3.6. Shuffling cards
      7. 5.3.7. Implementing clicking on a card
      8. 5.3.8. Preventing certain types of cheating
    4. 5.4. Building the application and making it your own
    5. 5.5. Testing and uploading the application
    6. 5.6. Summary
  12. 6. Quiz
    1. 6.1. Introduction
    2. 6.2. Critical requirements
    3. 6.3. HTML5, CSS, and JavaScript features
      1. 6.3.1. Storing and retrieving information in arrays
      2. 6.3.2. Creating HTML during program execution
      3. 6.3.3. Changing elements by modifying CSS using JavaScript code
      4. 6.3.4. Text feedback using form and input elements
      5. 6.3.5. Presenting video
    4. 6.4. Building the application and making it your own
    5. 6.5. Testing and uploading the application
    6. 6.6. Summary
  13. 7. Mazes
    1. 7.1. Introduction
    2. 7.2. Critical requirements
    3. 7.3. HTML5, CSS, and JavaScript features
      1. 7.3.1. Representation of walls and the token
      2. 7.3.2. Mouse events to build and position a wall
      3. 7.3.3. Detecting the arrow keys
      4. 7.3.4. Collision detection: token and any wall
      5. 7.3.5. Using local storage
      6. 7.3.6. Encoding data for local storage
      7. 7.3.7. Radio buttons
    4. 7.4. Building the application and making it your own
      1. 7.4.1. Creating the second maze application
    5. 7.5. Testing and uploading application
    6. 7.6. Summary
  14. 8. Rock, Paper, Scissors
    1. 8.1. Introduction
    2. 8.2. Critical requirements
    3. 8.3. HTML5, CSS, and JavaScript features
      1. 8.3.1. Providing graphical buttons for the player
      2. 8.3.2. Generating the computer move
        1. 8.3.2.1. Displaying results using animation
        2. 8.3.2.2. Audio and DOM processing
      3. 8.3.3. Starting off
    4. 8.4. Building the application and making it your own
    5. 8.5. Testing and uploading the application
    6. 8.6. Summary
  15. 9. Hangman
    1. 9.1. Introduction
    2. 9.2. Critical requirements
    3. 9.3. HTML5, CSS, JavaScript features
      1. 9.3.1. Storing a word list as an array defined in an external script file
      2. 9.3.2. Generating and positioning HTML markup, then making the markup be buttons, and then disabling the buttons
      3. 9.3.3. Creating progressive drawings on a canvas
      4. 9.3.4. Maintaining the game state and determining a win or loss
      5. 9.3.5. Checking a guess and revealing letters in the secret word by setting textContent
    4. 9.4. Building the application and making it your own
    5. 9.5. Testing and uploading the application
    6. 9.6. Summary
  16. 10. Blackjack
    1. 10.1. Introduction
    2. 10.2. Critical requirements
    3. 10.3. HTML5, CSS, and JavaScript features
      1. 10.3.1.
        1. 10.3.1.1. Source for images for card faces and setting up the Image objects
        2. 10.3.1.2. Creating the programmer-defined object for the cards
        3. 10.3.1.3. Dealing the cards
        4. 10.3.1.4. Shuffling the deck
        5. 10.3.1.5. Capturing key presses
        6. 10.3.1.6. Using header and footer element types
    4. 10.4. Building the application and making it your own
    5. 10.5. Testing and uploading the application
    6. 10.6. Summary

Product information

  • Title: The Essential Guide to HTML5: Using Games to Learn HTML5 and JavaScript
  • Author(s):
  • Release date: October 2010
  • Publisher(s): friends of ED
  • ISBN: 9781430233831