Skip to main content

Über dieses Buch

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'



Chapter 1. The Basics

In this chapter, you learned how to compose HTML documents with text, images, and hyperlinks. This included
  • the basic tags, including html, head, title, style, script, body.
  • the img element for displaying images.
  • the a element for hyperlinks.
  • simple formatting using a style element written following Cascading Style Sheet (CSS) rules.
  • a single line of JavaScript code to provide date and time information.
This chapter was just the beginning, though it’s possible to produce beautiful and informative web pages using basic HTML, with or without Cascading Style Sheets. In the next chapter, you will learn how to include randomness and interactivity in an application, and how to use the canvas element, the critical feature of HTML5.
Jeannie Meyer

Chapter 2. Dice Game

In this chapter, you learned how to
  • declare variables and use global variables to represent application state
  • write code to perform arithmetic operations
  • define and use programmer-defined functions
  • use several built-in features of JavaScript, including the Math.random and Math.floor methods
  • use if and switch statements
  • create a canvas using an HTML element
  • draw rectangles and circles
This chapter introduced a key feature of HTML5, the canvas, as well as the notions of randomness and interactivity. It also presented many programming features you’ll use in the examples in the rest of the book. In particular, the technique of building an application in stages is useful. The next chapter will feature the animation of a ball bouncing in a box—preparation for the real games in Chapter 4: the ballistics simulations called cannon ball and sling shot.
Jeannie Meyer

Chapter 3. Bouncing Ball

In this chapter, you learned how to create an application with animation that changes based on input from the user. We covered a number of programming and HTML5 features, including
  • setInterval to set up a timing event for the animation
  • validation of form input
  • programmer-defined functions to reposition a circle or an image horizontally and vertically to simulate a bouncing ball
  • tests to check for virtual collisions
  • drawing rectangles, images and circles, including gradients for the coloring
The next chapter describes the cannonball and slingshot games in which the player attempts to hit targets. These applications use the same programming and HTML5 features we used to produce the animation, but take them a step further. You will also see an example of animation in the rock-paper-scissors implementation in Chapter 8.
Jeannie Meyer

Chapter 4. Cannonball and Slingshot

In this chapter, you learned how to create two ballistics applications. It is important to understand how they are the same and how they are different. The programming techniques and HTML5 features include
  • programmer-defined objects
  • setInterval to set up a timing event for the animation, as done for the bouncing ball
  • building an array using the push method and using the array as a list of what to display
  • modifying arrays using the splice method
  • the use of trig functions with calculations to rotate the cannon and to resolve the horizontal and vertical velocities so as to simulate gravity
  • using a form for player input
  • handling mouse events (mousedown, mousemove, mouseup), with addEventListener to obtain player input
  • move drawing arcs, rectangles, lines and images on a canvas
The technique of programmer-defined objects and the use of an array of objects to display will come up again in later chapters. The next chapter focuses on a familiar game known as either memory or concentration. It will use a different timing event as well as the Date function, introduced in Chapter 1.
Jeannie Meyer

Chapter 5. The Memory (aka Concentration) Game

In this example, you learned how to implement two versions of the game known as memory or concentration) using programming techniques and HTML5 features. These included
  • examples of programmer-defined functions and programmer-defined objects
  • how to draw polygons on the canvas using moveTo and lineTo along with Math trig methods
  • guidance on how to use a form to show information to players
  • a method for drawing text with a specified font on the canvas
  • instructions about how to draw images on the canvas
  • using setTimeout to force a pause
  • employing Date objects to compute elapsed time
The applications demonstrated ways to represent information to implement two versions of a familiar game. The next chapter will temporarily depart from the use of canvas to demonstrate dynamic creation and positioning of HTML elements. It also will feature the use of HTML5’s video element.
Jeannie Meyer

Chapter 6. Quiz

In this chapter, we implemented a simple quiz that asked a player to match the names of countries and capitals. The application used the following programming techniques and HTML5 features:
  • creating HTML during runtime using document.createElement, document.getElementById, and document.body.appendChild
  • setting up event handling for the mouse click event using addEventListener
  • changing color of objects on the screen using code to change CSS settings
  • an array of arrays to hold the quiz content
  • for loops for iterating over the array
  • do-while loops to make a random choice of an unused question set
  • substring for determining a correct match
  • video and source elements for displaying video encoded in formats acceptable by different browsers
You can make use of dynamically created and repositioned HTML along with the drawing on canvas that you learned in the previous chapters. The implementation of Hangman, described in Chapter 9, does just that. You can use video as a small part of an application, as was done here, or as the major part of a web site. In the next chapter we return to drawing on canvas as we build a maze and then travel through it.
Jeannie Meyer

Chapter 7. Mazes

In this chapter, you learned how to implement a program to support the building of a maze of walls and to store it on the local computer. You also learned how to create a maze travel game. We used the following programming techniques and HTML5 features:
  • programmer-defined objects
  • capturing key strokes; that is, setting up event handling for key presses, and deciphering which key was pressed
  • localStorage for saving the layout of the walls of the maze on the player’s computer
  • try and catch to check if certain coding is acceptable
  • the join method for arrays and the split method for strings
  • mouse events
  • mathematical calculations for determining collisions between the token and the walls of the maze
  • radio buttons to present a choice to the player.
The use of local storage was fairly intricate for this application, requiring the encoding and decoding of the maze information. A simpler use might be for storing the highest score or the current score on any game. You can go back to previous chapters and see if you can incorporate this feature. Remember that localStorage is tied to the browser. In the next chapter, you will learn how to implement the rock-paper-scissors game, and how to incorporate audio in your application.
Jeannie Meyer

Chapter 8. Rock, Paper, Scissors

In this chapter, you learned how to implement a familiar game using features of HTML5, JavaScript, and CSS, along with general programming techniques. These included
  • styles, in particular the font-family property
  • form and input fields for displaying the score
  • event handling using addEventListener for the mouse click event
  • animation using setInterval and clearInterval
  • audio elements for sound and source elements for working with different browsers
  • getElementByTagname and play for specific control of audio clips
  • programmer-defined objects for drawing programmer-created buttons on the screen, with logic for determining if the mouse cursor was clicked on a specific button
  • arrays of arrays for game rules
The next chapter describes another familiar, childhood game: Hangman. It combines techniques of drawing on canvas and creating HTML elements using code that you have learned in previous chapters along with some new CSS and JavaScript features.
Jeannie Meyer

Chapter 9. Hangman

In this chapter, you learned how to implement a familiar game using features of HTML5, JavaScript, and CSS along with general programming techniques, which included the following:
  • using the scale method to change the coordinate system to draw an oval, as opposed to a circle, by saving and restoring before and after
  • creating HTML markup dynamically
  • setting up and removing event handling using addEventListener and removeEventListener for individual elements
  • using styles to remove elements from display
  • using arrays of function names to set up a progression of drawings
  • manipulating variables to maintain the state of the game, with calculations to determine if there is a win or a loss
  • creating an external script file to hold the word list for increased flexibility
  • using CSS, including font-family for the selection of fonts, color, and display
The next and final chapter of this book will describe the implementation of the card game, blackjack, also called 21. It will build on what you have learned already and describe some new techniques in programming, elements added to HTML5, and more CSS.
Jeannie Meyer

Chapter 10. Blackjack

In this chapter, you learned how to implement a card game using features of HTML5, JavaScript, and CSS along with general programming techniques. These included
  • Generating a set of Image objects based on names of external files
  • Designing a programmer-defined object for cards, incorporating the Images
  • Drawing images and text on the screen
  • Making use of for, while, and if to implement the logic of blackjack
  • Using calculations and logic to generate the computer’s moves
  • Establishing event handling for the keydown event so that the player could indicate a request to deal a new card, hold, or start a new game and using switch to distinguish between the keys
  • Using the header and footer elements, new to HTML5, for directions and giving credit to sources
This is the last chapter of this book. I hope you take what you have learned and produce enhanced versions of these games and games of your own invention. Enjoy!
Jeannie Meyer


Weitere Informationen

Premium Partner

BranchenIndex Online

Die B2B-Firmensuche für Industrie und Wirtschaft: Kostenfrei in Firmenprofilen nach Lieferanten, Herstellern, Dienstleistern und Händlern recherchieren.



Best Practices für die Mitarbeiter-Partizipation in der Produktentwicklung

Unternehmen haben das Innovationspotenzial der eigenen Mitarbeiter auch außerhalb der F&E-Abteilung erkannt. Viele Initiativen zur Partizipation scheitern in der Praxis jedoch häufig. Lesen Sie hier  - basierend auf einer qualitativ-explorativen Expertenstudie - mehr über die wesentlichen Problemfelder der mitarbeiterzentrierten Produktentwicklung und profitieren Sie von konkreten Handlungsempfehlungen aus der Praxis.
Jetzt gratis downloaden!