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

✍ Scribed by Jeanine Meyer

• Publisher: Apress
• Year: 2022
• Tongue: English
• Leaves: 500
• Edition: 3
• Category: Library

✦ Synopsis

Gain a deep, practical knowledge of the basic tools used for webpages: hypertext markup language (HTML5), cascading style sheets (CSS), and JavaScript. This updated version includes new and improved games and exercises, and will serve total beginners as well as people with some programming language experience, but not familiar with the combination of HTML, CSS, and JavaScript.

You'll begin at an introductory level with the focus on technical features as well as programming techniques.  Each chapter features a familiar game such as Rock-Paper-Scissors, Craps, Memory, and Blackjack or generic examples such as working with Mazes. Other projects include constructing and saving a maze; a basic word guessing game; ballistic games (Cannonball and Slingshot); a quiz requiring items to be put in order; and an animation demonstration featuring a ball, photo or video clip bouncing within a rectangle. 

The Appendix contains examples of advanced techniques such as Scalar Vector Graphics programs displaying the HTML5 Logo and a cartoon figure, each of which can be changed dynamically, and mathematical techniques for calculating if a move crosses a line and re-adjusting an arrangement of circles and arrows. The exposition on each example in the chapters and the Appendix includes screen shots and tables revealing the structure of the program and statement by statement explanation of code.

The book also contains suggestions for using the concepts and techniques to build your own programs. If you follow through with your own ideas, you will develop solid programming skills for building websites and for learning other programming languages, including the next version of HTML and current and future JavaScript frameworks, libraries and tools.

What You'll Learn

• Understand HTML 5 concepts with the help of easy-to-grasp, appealing examples
• Use HTML5 to explore new avenues for web application and game development
• 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

Table of Contents
About the Author
About the Technical Reviewer
Acknowledgments
Introduction
Chapter 1: The Basics
Keywords
Introduction
Critical Requirements
HTML5, CSS, and JavaScript Features
Basic HTML Structure and Tags
Using Cascading Style Sheets
JavaScript Programming
Using a Text Editor
Building the Applications
Testing and Uploading the Application
Summary
Chapter 2: Dice Game
Introduction
Critical Requirements
HTML5, CSS, and JavaScript Features
Pseudorandom Processing and Mathematical Expressions
Variables and Assignment Statements
Programmer-Defined Functions
Conditional Statements: if and switch
Drawing on the Canvas
Displaying Text Output Using a Form
Building the Application and Making It Your Own
Throwing a Single Die
Throwing Two Dice
The Complete Game of Craps
Making the Application Your Own
Testing and Uploading the Application
Summary
Chapter 3: Bouncing Ball
Introduction
Critical Requirements
HTML5, CSS, and JavaScript Features
Drawing a Ball or an Image or Images
Gradients with a Side Trip to Explain Arrays
Setting Up a Timing Event
Calculating a New Position and Collision Detection
Starting, Positioning and Restarting the video with use of an anonymous function
Validation
Stopping and Resuming Animation Triggered by Buttons
HTML Page Reload
Preloading Images
Building the Application and Making It Your Own
Testing and Uploading the Application
Summary
Chapter 4: Cannonball and Slingshot
Introduction
Critical Requirements
HTML5, CSS, and JavaScript Features
Arrays and Programmer-Defined Objects
Rotations and Translations for Drawing
Drawing Line Segments
Mouse Events for Pulling on the Slingshot
Changing the List of Items Displayed Using Array Splice
Distance Between Points
Building the Application and Making It Your Own
Cannonball: With Cannon, Angle, and Speed
Slingshot: Using a Mouse to Set Parameters of Flight
Testing and Uploading the Application
Summary
Chapter 5: The Memory (aka Concentration) Game
Introduction
Critical Requirements
HTML5, CSS, JavaScript Features
Representing Cards
Using Date for Timing
Providing a Pause
Drawing Text
Drawing Polygons
Shuffling Cards
Implementing Clicking on a Card
Preventing Certain Types of Cheating
Building the Application and Making It Your Own
Testing and Uploading the Application
Summary
Chapter 6: Quiz
Introduction
Critical Requirements for a Quiz Game
HTML5, CSS, and JavaScript Features
Storing and Retrieving Information in Arrays
Creating HTML During Program Execution
Using CSS in the Style Element
Responding to Player Moves
Presenting Audio and Video
Checking the Player’s Answer
Building the Application and Making It Your Own
Testing and Uploading the Application
Summary
Chapter 7: Mazes
Keywords
Introduction
Critical Requirements
HTML5, CSS, and JavaScript Features
Representation of Walls and the Token
Mouse Events to Build and Position a Wall
Detecting the Arrow Keys
Collision Detection: Token and Any Wall
Using Local Storage
Encoding Data for Local Storage
Radio Buttons
Building the Application and Making It Your Own
Creating the Travel Maze Application
Testing and Uploading Application
Summary
Chapter 8: Rock, Paper, Scissors
Introduction
Critical Requirements
HTML5, CSS, and JavaScript Features
Providing Graphical Buttons for the Player
Generating the Computer Move
Displaying Results Using Animation
Audio and DOM Processing
Starting Off
Building the Application and Making It Your Own
Testing and Uploading the Application
Summary
Chapter 9: Guess a Word
Introduction
Critical Requirements
HTML5, CSS, and JavaScript Features
Storing a Word List as an Array Defined in an External Script File
Generating and Positioning HTML Markup, Then Changing the Markup to Buttons, and Then Disabling the Buttons
Creating the Feedback About Remaining Wrong Letters
Maintaining the Game State and Determining a Win or Loss
Checking a Guess and Revealing Letters in the Secret Word by Setting textContent
Building the Application and Making It Your Own
Testing and Uploading the Application
Summary
Chapter 10: Blackjack
Introduction
Critical Requirements
HTML5, CSS, and JavaScript Features
Source for Images for Card Faces and Setting Up the Image Objects
Creating the Programmer-Defined Object for the Cards
Starting a Game
Dealing the Cards
Shuffling the Deck
Capturing Key Presses
Using Header and Footer Element Types
Building the Application and Making It Your Own
Testing and Uploading the Application
Summary
Appendix
Circles and Arrows
Overview
Details of Implementation
What You Learned
Crossing a Line (Jumping a Fence)
Overview
Mathematics Refresher
Preparing Data
Feedback to User/Player
Details of Implementation
What You Learned
Using Scalar Vector Graphics
Using SVG to Draw the HTML5 Logo
Overview
Details of Implementation
Using SVG to Draw and Modify a Cartoon
Overview
Details of Implementation
What You Learned
Index