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

Who doesn`t play games on his? Ever thought about programming your own? It`s not as difficult as you might think. If you choose to decide to program browser-based games (which also are cross-platform compatible) you should keep on reading this review. Also if you are a webdesigner who would like to know more about HTML5`s functions and/or JavaScript.

As the title suggests, this book teaches you HTML5, JavaScript and CSS by creating games.  HTML5 and JavaScript are todays and tomorrows technologies for creating interactive websites.

I have been offered the chance to review this book by FriendsOfEd.

I`m Ramon van Belzen, a 22 year old webdesigner from Vlissingen, the Netherlands. I’m surfing the web since 1997 and I` been programming HTML since 1998. Today I use web technologies like HTML 4, HTML 5, XHTML 1.1, CSS2 / 3, JavaScript, AJAX, jQuery, PHP/MySQL, XML. I currently run over 10 websites, most of them as webmaster and webdesigner.

This books teaches you how to program HTML5 &  JavaScript with a bit of CSS to create browser based games like a dice game, bouncing ball, slingshot, quiz, memory, mazes, rock/paper/scissors, hangman and blackjack.
This book is written for beginners into the world of HTML, CSS and JavaScript but also for people with experience with these programming languages.
No experience with programming languages is needed to get started with this book.

The book promises to teach you the canvas element, audio and video implementation, event handling, form input validation and the usage of information storing. These are all new functions in HTML5.

The book starts with the basics of HTML and CSS. It explains how a simple page is made  using HTML. The second step is adding CSS, follow by JavaScript.

Chapter two starts with the basics of the game you’re going to program – a simple dice rolling game. It explains the rules and how to write these in a programmers way. Next step is programming these functions followed by drawing the dice using the canvas element. Next is adding a second dice and programming this into the already existing code.

Creating a game with a bouncing ball and collision is the main target in chapter three. This chapter explains how to draw a ball and walls using the canvas element, create the game logics (including the collision engine) and using form input validation.

The fourth chapter contains two rather similar games; cannon ball and slingshot. The first game is a simple game where a cannonball is fired from a cannon. It gives the player the possibility to change the angle of the cannon and the velocity of the cannonball. It also includes some basic artificial gravity. This game also uses JavaScript, CSS and the canvas element.
The second game is slingshot. The difference compared to cannonball is that this uses mouse moments to aim, and the target is an image.

Chapter five is the classic game memory- where you have to match 2 pictures. Like previous games, this game uses HTML5, CSS and JavaScript including the canvas tag.

Game number five, chapter six, is a quiz. In this chapter you will learn the basics of JavaScript arrays  (to store questions and answers), CSS and the video element.

The seventh chapter teaches how to create a game where you can draw walls and create mazes. This game uses HTML5`s local storage API. In the first part of the game the walls are drawn, in the second part you have to move a ball through this maze.

Rock, paper, scissors is a game you possibly know. This game uses the canvas and audio elements as well as JavaScript.

Chapter nine explains how to create your own browser-based hangman game. The game uses the same codes as in previous chapters to create a game, and includes some new CSS  styles and functions.

The last game of this book is blackjack – another card game. The chapter starts with explaining the footer  and header tags and includes new game logics and  more canvas features.

As mentioned several times in previous paragraphs, the book promises to teach you HTML5, JavaScript , CSS, the canvas element, audio and video implementation, event handling, form input validation, header/footer elements and the usage of information storing. The book has overlap with the following book Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development I reviewed some months ago and the book The Definitive Guide to HTML5 Video I will be reviewing shortly.
The book indeed teaches you the basics of HTML5 page formatting, CSS and a lot of JavaScript. With a lot I mean the basics and more, including event handling and the storage engine. Of course it also explains how to use the canvas element to draw lines, circles and images.

After reading the book, everything explained in the book was clear to me, and I had no questions.

What I really liked about the book is that every single line of code is explained. Every? Yes every line, but only once or twice. This makes sure that you fully understand the thing your programming.
What I disliked about the book is that doesn’t cover the full possibilities of HTML5 like the book Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development. But I have to admit, that’s not what the book promises! The book aims to teach you HTML5 and JavaScript.
If you want  to learn HTML5 and CSS3 from the scratch I recommend that you take a look at Beginning HTML5 and CSS3: Next Generation Web Standards.

After reading the book I am able to program my own JavaScript/HTML5 based game.

Why would you buy this book? If you are familiar with HTML 4 and/or JavaScript and want to get to know what’s possible with HTML5 and JavaScript. This book is ideal for people who want to learn how to program their own simple games. For your information: its currently not possible to make a FPS shooter with HTML.

More information about this book can be found at the publishers site.

Paperback: 376 pages

Publisher: Apress; 1 edition (November 2, 2010)

Language: English

ISBN-10: 1430233834

ISBN-13: 978-1430233831

Product Dimensions: 9.2 x 7.4 x 1.1 inches

3 thoughts on “The Essential Guide to HTML5: Using Games to learn HTML5 and JavaScript

  1. Thank you for the review.
    You may want to look at my latest book, HTML5 and JavaScript Projects: http://www.apress.com/9781430240327

    It is more advanced, though in the same style: it isn’t encyclopedic, but focuses on specific projects.
    The projects including combining canvas and video, use of the Google Maps API, geolocation, and a database example (php and MySQL).

Leave a Reply

Your email address will not be published. Required fields are marked *