In this chapter, we will cover
• creating HTML by code
• positioning and repositioning HTML elements
• responding to clicks of the mouse
• arrays of arrays
• playing video
Introduction
This chapter demonstrates how HTML elements can be created dynamically and then positioned and repositioned on the screen. This is in contrast not only to drawing on a canvas element but also to the old way of creating static web pages. Our goal is to produce a quiz in which the player must match the names of countries and capital cities. We will use an array of arrays to hold the necessary information and build on the game to give more feedback to the player, including playing a video clip as a reward for getting the correct answers. The ability to display video directly (or natively) using HTML5 is a big improvement over the old system, which required using the <object> element and third-party plug-ins on the players computer. In our game, the video serves only a minor role, but the fact that developers and designers can use HTML5 and JavaScript to produce a specific video at a specific point in the running of an application is very important.
The basic information for the quiz consists of country and capital city name pairs for the G20 countries.
(Note: the European Union is one of the entries.) The program chooses at random four country/capital pairs and presents them in boxes on the screen. Figure 6-1 shows an opening screen.
180
Figure 6-1. An opening screen for the quiz
Players attempt to match a country and its capital by clicking first on one and then the other, and the blocks change color to indicate success. Figure 6-2 shows the correct matching of Canada and Ottawa, and Figure 6-3 shows a second match. Notice that the blocks have been colored in and the Score goes to 1 and then to 2.
Figure 6-2. One pair correctly matched
181 Figure 6-3. A second successful match
Now the player makes a mistake by pairing Riyadh with Australia. Figure 6-4 shows the result: the program moves the Riyadh block, but the Action field indicates WRONG. The Score is still 2, and the blocks remain white.
Figure 6-4. After two correct and one incorrect plays
This quiz program allows the player to try again, as shown in Figure 6-5.
182
Figure 6-5. Choosing the correct match for Riyadh
The second version of the quiz provides more feedback to the player. Clicking on a country or capital turns its color to tan, as in Figure 6-6. If the attempted match is correct, the blocks become gold as in the first game. If not, the color changes back to white.
Figure 6-6. A first selection changes color.
Matching all four correctly results in a short video clip. Figure 6-7 shows the start of the video.
183 Figure 6-7. After success, a video clip
A game or, indeed, any application, must communicate effectively with the user. Sometimes, you may want to be subtle, but a good rule is to provide feedback for every user action, or at least think carefully and make a conscious decision to not provide direct feedback. The color changes are feedback. The video is feedback: the player who completes the game gets a visual reward.
This program should be considered a starting point. As designer, you will need to make decisions on retries, game completion, hints, and so forth. I decided to make this game a random selection of 4 questions from a set of 20. You could consider these sets of 4 questions rounds in a longer game. You could present one country along with several alternatives for its capital. And you could use images (img elements with the src values set by code) in place of names. See the “Building the Application and Making It Your Own” section for more ideas.
Our quiz program creates HTML elements that change and move around the screen as a result of player action. It also uses arrays of arrays to hold information, and it includes video that plays at a specific point in the game. Its hard to imagine a sophisticated game nowadays that wouldnt include such elements.
Moreover, this program suggests the potential of games for education, certainly an area worth exploring.
Critical requirements
A quiz requires a way to store information or, to use a fancier term, a knowledge base. We need a way to choose specific questions to ask, hopefully randomly, so the player sees a different set of challenges each time. Since what were storing is simply pairs of names, we can use a simple technique.
184
Next we need to present questions to the player and provide feedback, something different each time. In this example, the player sees the country and capital names in blocks on the screen, and then clicks on the appropriate blocks to indicate a possible match. This means we need a way to generate JavaScript to detect mouse clicks on specific blocks and then reposition the first block clicked on to be next to the second block. We want a correct pairing to be indicated by a change in color as well as text, and an increase in the score.
Notice that we are not using the <canvas> element. We could have, and you can read the Comment below for a comparison of dynamically created HTML markup and the canvas. The Hangman application in Chapter 9 includes dynamically generated HTML elements and drawing on a canvas element.
Since video is such an important advance for HTML5, I wanted to demonstrate it in an example. A critical aspect of using video as a “reward” for a successful game is the need to hide the video until that point in the game and then start playing it. What makes this more challenging is that currently not all browsers accept the same video encodings. Still, as mentioned earlier, the new capability in HTML5 means that developers can make very precise use of video without relying on third-party plug-ins.
HTML5, CSS, and JavaScript features
Now lets delve into the specific features of HTML5, CSS, and JavaScript that provide what we need to implement the quiz. I again build on what has been explained before, with some redundancy just in case you skipped around in your reading.