book

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

Name: The Essential Guide to HTML5: Using Games to Learn HTML5 and JavaScript
Author: Jeanine Meyer
ISBN: 9781430233831

by Jeanine Meyer

October 2010

Beginner

373 pages

7h 28m

English

friends of ED

Read now

Unlock full access

Copyright
Credits
About the Author
About the Technical Reviewer
Acknowledgments
Introduction
Who is this book for?How is this book structured?Conventions used in this bookLayout conventions
1. The Basics
1.1. Introduction1.2. Critical requirements1.3. HTML5, CSS, and JavaScript features1.3.1. Basic HTML structure and tags1.3.1.1. Using cascading style sheets1.3.2. JavaScript programming1.4. Building the application and making it your own1.5. Testing and uploading the application1.6. Summary
2. Dice Game
2.1. Introduction2.2. Critical requirements2.3. HTML5, CSS, and JavaScript features2.3.1. Pseudo-random processing and mathematical expressions2.3.2. Variables and assignment statements2.3.3. Programmer-defined functions2.3.4. Conditional statements: if and switch2.3.5. Drawing on the canvas2.3.5.1. Displaying text output using a form2.4. Building the application and making it your own2.4.1. Throwing a single die2.4.2. Throwing two dice2.4.3. The complete game of craps2.4.3.1. Making the application your own2.5. Testing and uploading the application2.6. Summary
3. Bouncing Ball
3.1. Introduction3.2. Critical requirements3.3. HTML5, CSS, JavaScript features3.3.1. Drawing a ball, image, and gradient3.3.1.1. Setting up a timing event3.3.1.2. Calculating a new position and collision detection3.3.1.3. Validation3.3.1.4. HTML page reload3.4. Building the application and making it your own3.5. Testing and uploading the application3.6. Summary
4. Cannonball and Slingshot
4.1. Introduction4.2. Critical requirements4.3. HTML5, CSS, and JavaScript features4.3.1. Arrays and programmer-defined objects4.3.2. Rotations and translations for drawing4.3.3. Drawing line segments4.3.4. Mouse events for pulling on the slingshot4.3.5. Changing the list of items displayed using array splice4.3.6. Distance between points4.4. Building the application and making it your own4.4.1. Cannonball: with cannon, angle, and speed4.4.2. Slingshot: using a mouse to set parameters of flight4.5. Testing and uploading the application4.6. Summary

5. The Memory (aka Concentration) Game
5.1. Introduction5.2. Critical requirements5.3. HTML5, CSS, JavaScript features5.3.1. Representing cards5.3.2. Using Date for timing5.3.3. Providing a pause5.3.4. Drawing text5.3.5. Drawing polygons5.3.6. Shuffling cards5.3.7. Implementing clicking on a card5.3.8. Preventing certain types of cheating5.4. Building the application and making it your own5.5. Testing and uploading the application5.6. Summary
6. Quiz
6.1. Introduction6.2. Critical requirements6.3. HTML5, CSS, and JavaScript features6.3.1. Storing and retrieving information in arrays6.3.2. Creating HTML during program execution6.3.3. Changing elements by modifying CSS using JavaScript code6.3.4. Text feedback using form and input elements6.3.5. Presenting video6.4. Building the application and making it your own6.5. Testing and uploading the application6.6. Summary
7. Mazes
7.1. Introduction7.2. Critical requirements7.3. HTML5, CSS, and JavaScript features7.3.1. Representation of walls and the token7.3.2. Mouse events to build and position a wall7.3.3. Detecting the arrow keys7.3.4. Collision detection: token and any wall7.3.5. Using local storage7.3.6. Encoding data for local storage7.3.7. Radio buttons7.4. Building the application and making it your own7.4.1. Creating the second maze application7.5. Testing and uploading application7.6. Summary
8. Rock, Paper, Scissors
8.1. Introduction8.2. Critical requirements8.3. HTML5, CSS, and JavaScript features8.3.1. Providing graphical buttons for the player8.3.2. Generating the computer move8.3.2.1. Displaying results using animation8.3.2.2. Audio and DOM processing8.3.3. Starting off8.4. Building the application and making it your own8.5. Testing and uploading the application8.6. Summary
9. Hangman
9.1. Introduction9.2. Critical requirements9.3. HTML5, CSS, JavaScript features9.3.1. Storing a word list as an array defined in an external script file9.3.2. Generating and positioning HTML markup, then making the markup be buttons, and then disabling the buttons9.3.3. Creating progressive drawings on a canvas9.3.4. Maintaining the game state and determining a win or loss9.3.5. Checking a guess and revealing letters in the secret word by setting textContent9.4. Building the application and making it your own9.5. Testing and uploading the application9.6. Summary
10. Blackjack
10.1. Introduction10.2. Critical requirements10.3. HTML5, CSS, and JavaScript features10.3.1.10.3.1.1. Source for images for card faces and setting up the Image objects10.3.1.2. Creating the programmer-defined object for the cards10.3.1.3. Dealing the cards10.3.1.4. Shuffling the deck10.3.1.5. Capturing key presses10.3.1.6. Using header and footer element types10.4. Building the application and making it your own10.5. Testing and uploading the application10.6. Summary

Content preview from The Essential Guide to HTML5: Using Games to Learn HTML5 and JavaScript

Chapter 2. Dice Game

drawing on canvas
random processing
game logic
form output

Introduction

Among the most important new features in HTML5 is the canvas. This element provides a way for developers to make line drawings, include images, and position text in a totally free-form fashion, a significant improvement over the older HTML. Although you could do some fancy formatting in the earlier versions, layouts tended to be boxy and pages less dynamic. How do you draw on the canvas? You use a scripting language, usually JavaScript. I will show you how to draw on canvas and I'll explain the important features of JavaScript that we'll need to build an implementation ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

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

Publisher Resources

ISBN: 9781430233831Purchase book

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

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

by Jeanine Meyer

Chapter 2. Dice Game

Introduction

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.