Keywords

HTML Document; HTML Structure; Hypertext Markup Language (HTML); HTML File; Cascading Style Sheets (CSS).

Introduction

Hypertext Markup Language (HTML) is the language for delivering content on the Web. HTML is not owned by anyone but is the result of people working in many countries and many organizations to define the features of the language. An HTML document is a text document that you can produce using any text editor. HTML documents contain elements surrounded by tags—text that starts with a < symbol and ends with a > symbol. An example of a tag is <img src="home.gif"/>. This particular tag will display the image held in the file home.gif. These tags are the markup. It is through the use of tags that hyperlinks, images, and other media are included in web pages.

Basic HTML can include directives for formatting in a language called Cascading Style Sheets (CSS) and programs for interaction in a language called JavaScript . Browsers , such as Firefox and Chrome, interpret the HTML along with any CSS and JavaScript to produce what we experience when we visit a website. HTML holds the content of the website, with tags providing information on the nature and structure of the content as well as references to images and other media. CSS specifies the formatting. The same content can be formatted in different ways. JavaScript is a programming language that’s used to make the website dynamic and interactive. In all but the smallest working groups, different people may be responsible for the HTML, CSS, and JavaScript, but it’s always a good idea to have a basic understanding of how these different tools work together. If you are already familiar with the basics of HTML and how CSS and JavaScript can be added together, you may want to skip ahead to the next chapter. Still, it may be worth casting your eye over the content in this chapter to make sure you are up to speed on everything before we start on the first core examples.

The latest version of HTML (and its associated CSS and JavaScript) is HTML5 . It has generated considerable excitement because of features such as the canvas for displaying pictures and animation; support for video and audio; and tags for defining common document elements such as header, section, and footer. You can create a sophisticated, highly interactive website with HTML5. As of this writing, not all browsers accept all the features, but you can get started learning HTML5, CSS, and JavaScript now. Learning JavaScript will introduce you to general programming concepts that will be beneficial if you try to learn any other programming language or if you work with programmers as part of a team.

The approach I’ll use in this book is to explain HTML5, CSS, and JavaScript concepts in the context of specific examples, most of which will be familiar games. Along the way, I’ll use small examples to demonstrate specific features. Ideally, this will help you both understand what you want to do and appreciate how to do it. You will know where we are headed as I explain the concepts and details.

The task for this chapter is to build a web page of links to other websites. In this way, you’ll get a basic understanding of the structure of an HTML document, with a small amount of CSS code and JavaScript code. For this and other examples, please think of how to make the project meaningful to you. The page could be a list of your own projects, favorite sites, or sites on a particular topic. For each site, you’ll see text and a hyperlink. The second example includes some extra formatting in the form of boxes around the text, pictures, and the day’s date and time. Figure 1-1 and Figure 1-2 show examples I’ve created.

The data set depicts a snippet of my games, such as Dice game, Cannonball, Slingshot, Quiz games, and Maze.

The screenshot depicts the favorite site for purchasing college/state university of new york, as well as Apress publishers and Aviva Meyer photographs.

When you reload the Favorite Sites page, the date and time will change to the current date and time according to your computer.

Critical Requirements

The requirements for the list of links application are the very fundamental requirements for building a web page containing text, links, and images. For the example shown in Figure 1-1, each entry appears as a paragraph. In the example shown in Figure 1-2, in contrast, each entry has a box around it. The second example also includes images and a way to obtain the current day, date, and time. Later applications will require more discussion, but for this one we’ll go straight to how to implement it using HTML, CSS, and JavaScript.

HTML5, CSS, and JavaScript Features

As I noted, HTML documents are text, so how do we specify links, pictures, formatting, and coding? The answer is in the markup, that is, the tags. Along with the HTML that defines the content, you’ll typically find CSS styles, which can be specified either inside the HTML document or in an external document. You also might include JavaScript for interactivity, again specified in the HTML document or in an external document. We’ll start with a look at how you can build simple HTML tags and how you can add inline CSS and JavaScript all within the same document.

Basic HTML Structure and Tags

Note that I’ve indented the nested tags here to make them more obvious, but HTML itself ignores this indentation (or whitespace, as it’s known), and you don’t need to add it to your own files. In fact, for most of the examples throughout this book, I don’t indent my code.

This document consists of the html element, indicated by the starting tag <html> and ending with the closing tag: </html>.

HTML documents typically have a head and a body element, as this one has. This head element contains one element, title. The HTML title shows up different places in different browsers. Figure 1-3 shows the title, “Very Simple Example,” on a tab in Chrome.

The screenshot includes a URL that states Hypertext Markup Language

In most cases, you will create something within the body of the web page that you’ll think of as a title, but it won’t be the HTML title! Figure 1-3 also shows the body of the web page: the short piece of text. Notice that the words html, head, title, and body do not appear. The tags “told” the browser how to display the HTML document.

This specifies that the image should be displayed with a width of 200 pixels. The height will be whatever is necessary to keep the image at its original aspect ratio. If you want specific widths and heights, even if that may distort the image, specify both width and height attributes .

As you can see, this element has a starting and ending tag. The content of the element, whatever is between the two tags—in this case, Purchase College website —is what shows up in blue and is underlined. The starting tag begins with a. One way to remember this is to think of it as the most important element in HTML so it uses the first letter of the alphabet. You can also think of an anchor, which is what the a actually stands for, but that isn’t as meaningful for me. The href attribute (think hypertext reference) specifies the website where the browser goes when the hyperlink is clicked. Notice that this is a full web address (called a Universal Resource Locator, or URL, for short).

at the start of the reference. In the favorite sites example, the avivasmugmug.png file and the apressshot.png file are located in the same folder as the HTML file. They are there because I put them there! For large projects, many people put all the images in a subfolder called images and write addresses as images/postcard.gif. File management is a big part of creating web pages.

I created the HTML file, saved it as second.html, and then opened it in the Chrome browser. Figure 1-4 shows what is displayed.

The screenshot contains a URL and an image of a green board with someone writing on it.

This produces the text; the image in its original width and height; the image with the width fixed at 200 pixels and height proportional; a hyperlink that will take you to the Purchase College website ; and another link that uses an image that will take you to the web page on the Purchase College website for the Mathematics/Computer Science department. However, this isn’t quite what I had in mind. I wanted these elements spaced down the page.

Figure 1-5 shows what this code produces. Notice that I changed the title. I also decided to leave the origami frog images together, and I put two <br/> tags after the link to Purchase College/SUNY.

The screenshot includes a URL and purchases college/suny, with one image depicting a green board and someone writing on it.

There are many HTML element types : the h1 through h6 heading elements produce text of different sizes; there are various elements for lists and tables, and others for forms. CSS, as we’ll see in a moment, is also used for formatting. You can select different fonts, background colors, and colors for the text, and control the layout of the document. It’s considered good practice to put formatting in CSS, create interactivity in JavaScript, and keep the HTML for the content. HTML5 provides new structural elements—such as article, section, footer, and header—putting formatting into the style element and making use of the new elements, called semantic tags , to facilitate working with other people. However, even when you’re working just with yourself, separating content, formatting, and behavior lets you easily change the formatting and the interactions. Formatting, including document layout, is a large topic. In this book, I stick to the basics.

Using Cascading Style Sheets

CSS is a special language just for formatting. A style is essentially a rule that specifies how a particular element will be formatted. This means you can put style information in a variety of places: a separate file, a style element located in the head element, or a style within the HTML document, perhaps within the one element you want to format in a particular way. The styling information cascades, or trickles down, unless a different style is specified. To put it another way, the style closest to the element is the one that’s used. For example, you might use your official company fonts as given in the style section in the head element to flow through most of the text but include a specification within the local element to style one particular piece of text. Because that style is closest to the element, it is the one that is used.

The basic format includes an indicator of what is to be formatted followed by one or more directives. In the examples for this chapter, I’ll specify the formatting for elements of type section, namely, a border or box around each item, margins, padding, alignment, and a background of white. The complete HTML document in Listing 1-1 is a mixture (some would say a mess!) of features. The elements body and p (paragraph) are part of the original version of HTML. The section element is one of the new element types added in HTML5. The section element does need formatting, unlike body and p, which have default formatting that the body and each p element will start on a new line. CSS can modify the formatting of old and new element types. Notice that the background color for the text in the section is different from the background color for the text outside the section.

In the code in Listing 1-1, I specify styles for the body element (there is just one) and the section element. If I had more than one section element, the styling would apply to each of them. The style for the body specifies a background color and a color for the text. In the beginning, browsers accepted a set of only 16 colors by name, including black, white, red, blue, green, cyan, and pink. However, now the up-to-date browsers accept 140 colors by name.

See https://www.w3schools.com/colors/colors_names.asp.

You can also specify color using RGB (red, green, blue) hexadecimal codes, but you’ll need to use a graphics program—such as Adobe Photoshop, Corel Paint Shop Pro, or Adobe Flash Professional—to figure out the RGB values, or you can experiment. I used Paint Shop Pro to determine the RGB values for the green in the frog head picture and used that for the border as well.

This produces the screen shown in Figure 1-6.

The two sets of images display a frog face model that can move its jaw. The other image depicts an origami flying bird.

There are many things you can do with CSS . You can use it to specify formatting for types of elements, as shown here; you can specify that elements are part of a class; and you can identify individual elements using the id attribute. In Chapter 6, where we create a quiz, I use CSS to position specific elements in the window and then JavaScript to move them around.

JavaScript Programming

JavaScript is a programming language with built-in features for accessing parts of an HTML document, including styles in the CSS element. It is termed a scripting language to distinguish it from compiled languages, such as C++. Compiled languages are translated all at once, prior to use, while scripting languages are interpreted line by line by browsers. This text assumes no prior programming experience or knowledge of JavaScript, but it may help to consult other books, such as Getting Started with JavaScript, by Terry McNavage (friends of ED, 2010), or online sources such as http://en.wikipedia.org/wiki/JavaScript.

Each browser owns its version of JavaScript.

is a JavaScript statement that invokes the write method of the document object with the argument "hello". An argument is additional information passed to a function or method. Statements are terminated by semicolons. This piece of code will write out the literal string of characters h, e, l, l, o as part of the HTML document.

To use the formal language of programming: this code calls (invokes) the write method of the document object, a built-in piece of code. The period (.) indicates that the write to be invoked is a method associated with the document produced by the HTML file. So, something is written out as part of the HTML document. What is written out? Whatever is between the opening parenthesis and the closing parenthesis. And what is that? It is the result of the call to the built-in function Date. The Date function gets information maintained by the local computer and hands it off to the write method. Date also requires the use of parentheses, which is why you see so many. The write method displays the date and time information as part of the HTML document, as shown in Figure 1-2. The way these constructs are combined is typical of programming languages. The statement ends with a semicolon. Why not a period? A period has other uses in JavaScript, such as indicating methods and serving as a decimal point for numbers.

Natural languages , such as English, and programming languages have much in common—different types of statements; punctuation using certain symbols; and grammar for the correct positioning of elements. In programming, we use the term notation instead of punctuation, and syntax instead of grammar. Both programming languages and natural languages also let you build up very complex statements out of separate parts. However, there is a fundamental difference: as I tell my students, chances are good that much of what I say in class is not grammatically correct, but they’ll still understand me. But when you’re “talking” to a computer via a programming language, your code must be perfect in terms of the grammatical rules of the language to get what you want. The good news is that unlike a human audience, computers do not exhibit impatience or any other human emotion, so you can take the time you need to get things right. There’s also some bad news that may take you a while to appreciate. If you make a mistake in grammar—termed a syntactic error—in HTML, CSS, or JavaScript, the browser still tries to display something. It’s up to you to figure out what and where the problem is when you don’t get the results you wanted in your work.

Using a Text Editor

You build an HTML document using a text editor and you view/test/play the document using a browser. Though you can use any text editor program to write the HTML, I suggest TextPad for PCs and Sublime for Macs. These are shareware, which makes them relatively inexpensive. You should consider making donations! Don’t use a word processing program, which may insert nontext characters. Notepad also works, although the other tools have benefits such as color-coding that I’ll demonstrate. To use the editor, you open it and type in the code. Figure 1-7 shows what the Sublime screen looks like.

The screenshot depicts an interface of a text editor that only displays a numeric 1.

You will want to save your work frequently and, most important, save it as the file type.html. Do this at the start, and then you will gain the benefits of the color-coding. In Sublime, select File ➤ Save As and then enter the name with the file extension .html, as shown in Figure 1-8.

The snippet depicts the process to save documents on HTML that include Save as optional and tags.

Notice that I gave the file a name and a file extension and that I also specified the folder where I want the file to reside. After saving the file, the window appears as shown in Figure 1-9, with color coding.

The snippet depicts the file after saving a document on HTML that includes various codes.

The color coding, which you’ll see only after the file is saved as HTML, indicates tags and quoted strings. This can be valuable for catching many errors. Sublime and the other editors do provide options for changing the color scheme. Assuming that you are using the one shown here, if you see long sections of yellow, the color for quoted strings, it probably means a missing closing quotation marks. By the way, you can use single or double quotation marks, but you can’t mix them up. Also, if you copy and paste from Word or PowerPoint and copy so-called “smart” quotation marks, ones that curve, this will cause problems.

Building the Applications

Keeping track of files is a critical part of building HTML applications.

Once you have created several of your own HTML applications, you may build a document such as this one to serve as your own annotated list. If you use folders, the href links will need to reflect the location in terms of the HTML document.

It is pretty straightforward how to make this application your own: use your own favorite sites! In most browsers, you can download and save image files if you want to use a site logo for the hyperlink, or you can include other pictures. It is my understanding that making a list of sites with comments and including images such as logos is within the practice called “fair use ,” but I am not a lawyer. For the most part, people like links to their sites. It doesn’t affect the legal question, but you can also choose to set the src in the img tag to the web address of the site where the image lives if you’d rather not download a particular image file to your computer and then upload it to your website.

You also can make this application your own by changing the formatting. Styles can be used to specify fonts, including specific font, font family, and size. This lets you pick a favorite font and specify what font to use if the preferred font is not available on the user’s computer. You can specify the margin and padding or vary independently the margin-top, margin-left, padding-top, and so forth.

Testing and Uploading the Application

You need to have all the files , in this case the single HTML file plus all image files, in the same folder unless you are using full web addresses. For the links to work, you need to have the correct addresses for all href attributes. My examples show how to do this for HTML files in the same folder or for HTML files somewhere else on the Web.

You can start testing your work even if it is not completely done. For example, you can put in a single img element or a single a element. Open a browser, such as Firefox, Chrome, or Safari. In Firefox, click File and then “Open file” and browse to your HTML file. In Chrome, press Ctrl on the PC (Cmd on the Mac) and then browse to the file and click OK to open it. You should see something like my examples.

Summary

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 learn how to include randomness and interactivity in an application and how to use the canvas element, the critical feature of HTML5.

Introduction

Among the most important new features in HTML5 is the canvas element. 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 of the dice game called craps: how to define a function, how to invoke pseudorandom behavior, how to implement the logic of this particular game, and how to display information to a player. Before we go any further, though, you need to understand the basics of the game.

The game of craps has the following rules :

The player throws a pair of dice. The sum of the two top faces is what matters, so a 1 and a 3 is the same as 2 and 2. The sum of two 6-sided dice can be any number from 2 to 12. If the player throws a 7 or 11 on the first throw, the player wins. If the player throws a 2, 3, or 12, the player loses. For any other result (4, 5, 6, 8, 9, 10), this result is recorded as what is called the player’s point, and a follow-up throw is required. On follow-up throws, a throw of 7 loses and a throw of the player’s point wins. For anything else, the game continues with the follow-up throw rules.

Let’s see what our game play might look like. Figure 2-1 shows the result of a throw of two ones at the start of the game.

An image of a snippet of the game of two rolling dice. It depicts the first throw, where the sum of dice values is 2, and the outcome is a loss for the player.

It is not apparent here, but our dice game application draws the die faces each time using the canvas tag. This means it’s not necessary to download images of individual die faces.

A throw of two 1s means a loss for the player since the rules define 2, 3, or 12 on a first throw as a loss. The next example shows a win for the player, a 7 on a first throw, as shown in Figure 2-2.

An image of a snippet of the game of two rolling dice. It depicts the first throw, where the sum of dice values is 7, and the outcome is a win for the player.

Figure 2-3 shows the next throw—an 8. This is neither a win nor a loss, but it means there must be a follow-up throw.

An image of a snippet of the game of two rolling dice. It depicts the follow-up throw, where the sum of dice values is 8 with 4 and 4.

Let’s assume that the player eventually throws an 8 again, as indicated in Figure 2-4.

An image of a snippet of the game of two rolling dice. It depicts back to the first throw, where the sum of dice values is 8 with 6 and 2, and the outcome as a win for the player.

As the previous sequence shows, the only thing that counts is the sum of the values on the faces of the dice. The point value was set with two 4s, but the game was won with a 2 and a 6.

The rules indicate that a game will not always take the same number of throws of the dice. The player can win or lose on the first throw, or there may be any number of follow-up throws. It is the game builder’s job to build a game that works—and working means following the rules, even if that means play goes on and on. My students sometimes act as if their games work only if they win. In a correct implementation of the game, players will win and lose.

Critical Requirements

The requirements for building the dice game begin with simulating the random throwing of dice. At first, this seems impossible since programming means specifying exactly what the computer will do. Luckily, JavaScript, like most other programming languages, has a built-in facility that produces results that appear to be random. Sometimes languages use the middle bits (1s and 0s) of a very long string of bits representing the time in milliseconds. The exact method isn’t important to us. We will assume that the JavaScript furnished by the browser does an OK job with this, which is called pseudorandom processing .

Assuming now that we can randomly get any number from 1 to 6 and do it twice for the two die faces, we need to implement the rules of the game. This means we need a way to keep track of whether we are at a first throw or a follow-up throw. The formal name for this is the application state, which means the way things are right now, and is important in both games and other types of applications. Then we need to use constructs that make decisions based on conditions. Conditional constructs such as if and switch are a standard part of programming languages, and you’ll soon understand why computer science teachers like me—who have never been in a casino or a back alley—really like the game of craps.

We need to give the player a way to throw the dice, so we’ll implement a button on the screen to click for that. Then we need to provide information back to the player on what happened. For this application, I produced graphical feedback by drawing dice faces on the screen and also displayed information as text to indicate the stage of the game, the point value, and the result. The older term for interactions with users was input-output (I/O), back when that interaction mainly involved text. The term graphical user interface (GUI) is now commonly used to indicate the vast variety of ways that users interact with computer systems. These include using the mouse to click on a specific point on the screen or combining clicks with dragging to simulate the effect of moving an object (see the slingshot game in Chapter 4). Drawing on the screen requires the use of a coordinate system to specify points. Coordinate systems for the computer screen are implemented in similar ways in most programming languages, as I’ll explain shortly.

HTML5, CSS, and JavaScript Features

Let’s now take a look at the specific features of HTML5 , CSS , and JavaScript that provide what we need to implement the craps game.

Pseudorandom Processing and Mathematical Expressions

Pseudorandom processing in JavaScript is performed using a built-in method called Math.random. Formally, random is a method of the Math class. The call Math.random() generates a number from 0 up to but not including 1, resulting in a decimal number, for example, 0.253012. This may not seem immediately useful for us, but it’s actually a very simple process to convert that number into one we can use. We multiply that number, whatever it is, by 6, which produces a number from 0 up to but not including 6. For example, if we multiply the .253012 by 6, we get 1.518072. That’s almost what we need, but not quite. The next step is to strip away the fraction and keep the whole number. To do that, we use another Math method, Math.floor. This method produces a whole number after removing any fractional part. As the name suggests, the floor method rounds down. In our particular case, we started with .253012, then arrived at 1.518072, and, therefore, made the call Math.floor(1.58072) with the result the whole number 1. In general, when we multiply our random number by 6 and floor it, we’ll get a number from 0 to 5. The final step is to add a 1, because our goal is to get a number from 1 to 6, over and over again, with no particular pattern.

You can use a similar approach to get whole numbers in any range. For example, if you want the numbers 1 to 13, you’d multiply the random number by 13 and then add 1. This could be useful for a card game. You’ll see similar examples throughout this book.

We can combine all of these steps together into what is called an expression. Expressions are combinations of constants, methods, function calls, and some things we’ll explore later. We put these items together using operators, such as + for addition and * for multiplication.

You’ll see a statement with this expression in our final code, but we need to cover a few other things first.

Variables and Assignment Statements

Like other programming languages , JavaScript has a construct called a variable, which is essentially a place to put a value, such as a number. It is a way of associating a name with a value. You can use the value later by referencing the name. One analogy is to office holders. In the United States, we speak of “the president.” In 2010, when I worked on the first edition of this book, the president was Barack Obama. Now, in July 2022, the president is Joseph Biden. The value held by the term “the president” changes. In programming, the value of the variable can vary as well, which is where it gets its name.

The term var is used to declare a variable.

The names of variables and functions, described in the next section, are up to the programmer. There are rules, including no internal blanks, no use of a period, and the name must start with an alphabetic character. There is a limit on the length of a name, but our inclination is to make names short to avoid typing. However, I advise you to not make them so short that you forget what they are. You do need to be consistent, but you don’t need to obey the rules of English spelling. For example, if you want to set up a variable to hold the sum of values and you believe that sum is spelled som, that’s fine. Just make sure you use som all the time. But if you want to refer to something that’s a part of JavaScript, such as function or document or random, you need to use the spelling that JavaScript expects.

You should avoid using the names of built-in constructs in JavaScript (such as random or floor) for your variables. Try to make the names unique but still easily understandable. One common method of writing variable names is to use what’s called camelCasing. This involves starting your variable name in lowercase and then using a capital letter to denote when a new word starts, for example, numberOfTurns or userFirstThrow. You can see why it’s called camel case—the capitals form “humps” in the word. You don’t have to use this naming method, but it’s a convention many programmers follow.

sets the variable named ch to the value that is the result of the expression on the right side of the equal sign. When used in a var statement, it also would be termed an initialization statement. The = symbol is used for setting initial values for variables as in this situation and in the assignment statements to be described next. I chose to use the name ch as shorthand for choice. This is meaningful for me. In general, though, if you need to choose between a short name and a longer one that you will remember, pick the longer one! Notice that the statement ends with a semicolon. You may ask, why not a period? The answer is that a period is used in two other situations: as a decimal point and for accessing methods and properties of objects, as in document.write.

The use of the equal sign may be confusing. Think of it as making it true that the left side equals what’s produced by the right side. You’ll encounter many other variables and other uses of operators and assignment statements in this book.

For the game of craps, we need variables that define the state of the game, namely, whether it is a first throw or a follow-up throw, and what the player’s point is (remember that the point is the value of the previous throw). In our implementation, these values will be held by so-called global variables, variables defined with var statements outside of any function definition so as to retain their value (the values of variables declared inside of functions disappear when the function stops executing).

You don’t always need to use variables. For example, the first application we create here sets up variables to hold the horizontal and vertical positions of the dice. I could have put literal numbers in the code because I don’t change these numbers, but since I refer to these values in several different places, storing the values in variables mean that if I want to change one or both, I need to make the change in only one place.

Programmer-Defined Functions

would be used to set the variable score with whole numbers, based on values in rawScore, which may have fractional parts. I am showing off a use of camel casing. Do keep in mind that it is my coding and only my coding that makes the connection.

Arguments are values that may be passed to the function. Think of them as extra information.

This would assign a value of 50 (5 × 10) to our rect1 variable. The function definition would be written as code within the script element. It might or might not make sense to define this function in real life because it is pretty easy to write multiplication in the code, but it does serve as a useful example of a programmer-defined function. Once this definition is executed, which probably would be when the HTML file is loaded, other code can use the function just by calling its name, as in areaOfRectangle(100,200) or areaOfRectangle(x2-x1,y2-y1).

The second expression assumes that x1, x2, y1, y2 refer to coordinate values that are defined elsewhere.

This creates a button holding the text Throw dice. When the player clicks it, JavaScript invokes the throwdice function I defined in the script element.

The form element, described later, could invoke a function in a similar way.

Conditional Statements: if and switch

The craps game has a set of rules. One way to summarize the rules is to say, if it is a first-throw situation, we check for certain values of the dice throw. If it’s not the first throw, we check for other values of the dice throw. JavaScript provides the if and switch statements for such purposes.

Read the first expression as: is the current value of the variable temp greater than 85?

And the second one as: is the current value of the variable course the same as the string "Programming Games"?

The comparison example is easy to understand; we use > to check if one value is greater than another and < to check the opposite. The value of the expression will be one of the two logical values, true or false.

The second expression is probably a little more confusing. You may be wondering about the two equal signs and maybe also the quotation marks. The comparison operator in JavaScript (and several other programming languages) that checks for equality is this combination of two equal signs. We need two equal signs because the single equal sign is used in assignment statements and it can’t do double duty. If we had written course = "Programming Games", we would have been assigning the value "Programming Games" to our course variable rather than comparing the two items. The quotation marks define a string of characters, starting with P, including the space, and ending with s.

Note that I used italics here because this is what is called pseudocode, not real JavaScript that we would include in our HTML document.

JavaScript evaluates the value of x in the first line of the switch statement and compares it to the values indicated in the cases. Once there is a hit, that is, x is determined to be equal to a or b, the code following the case label is executed. If there is no match, the code after default is executed. It’s not necessary to have a default possibility. Left to its own devices, the computer would continue running through the switch statement even if it found a matching case statement. If you want it to stop when you find a match, you need to include a break statement to break out of the switch.

If the value of the variable mon is equal to "Sep", "Apr", "Jun", or "Nov", control flows to the first alert statement and then exits the switch statement because of the break. If the value of the variable mon is equal to "Feb", the alert statement mentioning 28 or 29 days executes, and then the control flow exits the switch. If the value of mon is anything else, including, by the way, an invalid three-letter abbreviation, the alert mentioning 31 days is executed.

Just as HTML ignores line breaks and other whitespace, JavaScript does not require a specific layout for these statements. You could put everything on one line if you wanted. However, make things easy on yourself and use multiple lines and indenting.

Drawing on the Canvas

If an HTML file with this coding is opened by a browser that does not recognize canvas, the message Your browser doesn't support the HTML5 element canvas. appears on the screen. If you were preparing web pages for all common browsers, you could choose to direct visitors to your site to somewhere else or try another strategy. In this book, I just focus on HTML5.

The HTML canvas tag defines this element to have an id of canvas. This could have been anything, but there’s no harm in using canvas. You can have more than one canvas, however, and in that case, you would need to use distinct values for each ID. That’s not what we do for this application, though, so we don’t have to worry about it. The attributes of width and height are set to specify the dimensions of this canvas element.

This makes it a global variable that can be accessed or set from any function. The ctx variable is something that’s needed for all drawing. I chose to name my variable ctx, short for “context,” copying many of the examples I’ve seen online. I could have chosen any name.

Placing the statement in the init function means that the statement is invoked after everything in the body is downloaded and before any other function is invoked.

What the assignment statement setting ctx does is first get the element in the document with the ID canvas and then extract what is called the 2d context . We can all anticipate that the future may bring other contexts! For now, we use the 2d one.

In the JavaScript coding, you can draw rectangles , create paths including line segments and arcs, and position image files on the canvas. You can also fill in the rectangles and the paths. Before we do this, however, we need to tackle coordinate systems and radian measures.

Just as a global positioning system uses latitude and longitude to define your location on the map, we need a way to specify points on the screen. These points are called pixels , and we used them in the previous chapter to specify the width of images and the thickness of borders. The pixel is a pretty small unit of measurement, as you can see if you do any experiments. However, it’s not enough for everyone to agree on the linear unit. We also need to agree on the point from which we are measuring, just as GPS systems use the Greenwich meridian and the equator. For the two-dimensional rectangle that is the canvas, this goes by the name origin or registration point. The origin is the upper-left corner of the canvas element. Note that in Chapter 6, when we describe the quiz show by creating and positioning elements in the HTML document and not in a canvas element, the coordinate system is similar. The origin is still the upper-left corner of the window.

This is different from what you may recall from analytical geometry or from making graphs . The horizontal numbers increase in value moving from left to right. The vertical numbers increase in value moving down the screen. The standard way to write coordinates is to put the horizontal value first, followed by the vertical value. In some situations, the horizontal value is referred to as the x value and the vertical as the y value. In other situations, the horizontal value is the left (think of it as from the left), and the vertical value is the top (think of it as from the top).

Figure 2-5 shows the layout of a browser window 900 pixels wide by 600 high. The numbers indicate the coordinate values of the corners and the middle.

An image of a rectangle with various ordinate points of vertices. The central ordinate 450, 300 is also visible.

Now we’ll look at several statements for drawing and then put them together to draw simple shapes (see Figures 2-6 through 2-10). After that, we’ll see how to draw the dots and rectangles to represent die faces.

This draws a hollow rectangle, with its top-left corner 100 pixels from the left side and 50 pixels down from the top. The rectangle has width 200 and height 300. This statement would use whatever the current settings are for line width and for color.

HTML5 lets you draw so-called paths consisting of arcs and line segments. Line segments are drawn using a combination of ctx.moveTo and ctx.lineTo. I’ll cover them in a number of chapters: for the slingshot game in Chapter 4, the memory game using polygons in Chapter 5, and word guessing game in Chapter 9. In the cannon ball game in Chapter 4, I’ll also show you how to tilt a rectangle, and the word guessing game in Chapter 9 demonstrates how to draw ovals. In this chapter, I’ll focus on the arcs .

There also are situations when you can omit the call to closePath.

where cx, cy, and radius are the center horizontal and vertical coordinates and the radius of the circle. Explaining the next two parameters requires discussing ways to measure angles. You’re familiar with the degree unit for angles: we speak of making a 180-degree turn, meaning a U-turn, and a 90-degree angle is produced by two perpendicular lines. But most computer programming languages use another system, called radians . Here’s one way to visualize radians—think of taking the radius of a circle and laying it on the circle itself. You can dig into your memory and realize that it won’t be a neat fit, because there are 2* PI radians around the circle, somewhat more than 6. So if we want to draw an arc that is a whole circle, we specify a starting angle of 0 and an end angle of 2*PI. Luckily, the Math class furnishes a constant Math.PI that is the value of PI (to as much accuracy, as many decimal places, as necessary), so in the code, we write 2*Math.PI. If we want to specify an arc that is half a circle, we use Math.PI, while a right angle (90 degrees) will be .5*Math.PI.

The arc method requires one more argument, direction. How are we drawing these arcs? Think of the movement of the hands on a clock face. In HTML 5, clockwise is the false direction, and counterclockwise is the true direction. (Don’t ask why. That’s just the way it’s specified in HTML5.) I use the built-in JavaScript values true and false. This will be important when we need to draw arcs that are not whole circles. The nature of the particular problem dictates how you define the angles if you need to draw arcs that are not full circles.

Figure 2-6 shows a portion of the screen with the arc produced by this code.

An image of an arc of a circle, which depicts a smiling emotion.

You can look ahead to Figures 2-11, 2-12, and 2-13, in which I captured more of the screen to see the positioning of the drawing. Please vary the numbers in your own example so you can gain an understanding of how the coordinate system works and how big a pixel actually is.

Change 200,200 to reset the center of the circle, and change 50 to change the radius.

Notice that I also changed the title. The title appears on a tab in the browser. Your users/audience do notice the titles. I find that I use titles in debugging to keep track of different versions. This code produces the screen shown in Figure 2-7.

An image of an arc of a circle, which depicts a frowning emotion.

This produces the screen shown in Figure 2-8.

An image of a semicircle with a flat surface at the bottom and a curved surface at the top.

Black is the default color.

An image of a semicircle with a flat surface at the top and a curved surface at the bottom. It depicts a dark half circle.

This code produces a half-circle filled in with purple (a combination of red and blue), with a stroke, that is, an outline of pure red, as shown in Figure 2-10. The coding specifies a path, then draws the path as a fill, and then draws the path as a stroke.

An image of a semicircle with a flat surface at the top and a curved surface at the bottom. It depicts a shaded circle with an outline.

You may as well stick with the first one—it’s as good as any other. Note that I still use the closePath command . A circle may be a closed figure in geometric terms, but that doesn’t matter in terms of JavaScript.

Later examples show how to draw a slingshot (Chapter 4), polygons for the memory/concentration game (Chapter 5), walls for a maze (Chapter 7), and the stick figure in hangman (Chapter 9). Now let’s get back to what we need for the dice game.

Displaying Text Output Using a Form

It is possible to write text on the canvas (see Chapter 5), but for the craps application, I chose to use a form, an element in both the older and current versions of HTML. I don’t use the form for input from the player. I do use it for outputting information on the results of the throw of the dice. The HTML5 specification indicates new ways to set up forms, including checking or validating the type and range of input. The application in the next chapter demonstrates validation.

The form starts with a name attribute. The text Stage:, Point:, and Outcome: appear next to the input fields. The input tags—notice these are singleton tags—have both name and value fields. These names will be used by the JavaScript code. You can put any HTML within a form and a form within any HTML.

The input element of type submit produces a button on the screen. These are all the concepts we need to build the craps application. We can now go ahead and code it.

Building the Application and Making It Your Own

Figure 2-11 shows a possible opening screen for the first application. I say possible because it won’t always be a 4. I deliberately captured this screenshot to show practically all of the window so you can see where the drawing is located on the screen.

An image depicts a dice with 4 dots.

Figure 2-12 shows the opening screen of the application for throwing a pair of dice. All that appears is the button.

An image of a snippet of an application. It depicts the throw dice option on the opening screen of a pair of dice applications.

Lastly, Figure 2-13 shows the screen after the player clicks the button.

An image of a snippet of an application. When the throw dice button is pressed, two dice with the numbers 2 and 4 are depicted on the opening screen.

It is good technique to build your application in incremental steps. These applications are built using a text editor, such as TextPad or TextWrangler. Remember to save the file as type .html—and do this early and often. You don’t have to finish before saving. When you complete the first application and have saved and tested it, you can save it once more using a new name and then make the modifications to this new copy to be the second application. Do the same for the third application.

Throwing a Single Die

The purpose of this first application is to display a random die face on the canvas, with circles laid out in the standard way.

This is a case of do as I say, not as I do. Since I’m using tables to put explanations on every line and you can consider the whole chapter a comment, I haven’t included many comments in the code. I repeat: you should!

and so on. I removed this line (or commented it out using // ) when I was done with this phase of testing. This falls under the general advice: try to avoid having to play a game, in all its complexity, while developing it.

Throwing Two Dice

The next application uses a button to give the player something to do, rather than just reloading the web page, and it also simulates the throwing of a pair of dice. Before looking at the code, think about what you can carry over from the first application. The general answer is: most of it. The “carrying over” is a savings in writing code and in testing the code.

The Complete Game of Craps

The third application is the complete game of craps. Again, much can be carried over from the previous application. However, now we need to add in the rules of the game. Among other things, this will mean using the conditional statements if and switch, as well as global variables (that is, variables defined outside of any function definition), to keep track of whether it is a first turn (firstTurn) and what is the player’s point (point). These two variables hold the application state for the game of craps. It is the presence of this relatively simple application state, and the use of global and local variables, the conditional statements, and random processing that makes craps a favorite topic of programming teachers.

Making the Application Your Own

Making this application your own is not as straightforward as with the favorite sites application, because the rules of craps are the rules of craps. If you don’t want to change them, there still are many things you can do. Change the size and color of the dice faces, using fillRect and setting fillStyle to different colors. Change the color and size of the whole canvas. Change the text for the outcomes to something more colorful. You also can implement other games using standard or specially made dice.

You can look ahead to the next chapter and learn about drawing images on the canvas instead of drawing each die face using arcs and rectangles. HTML5 provides a way to bring in external image files. The drawback to this approach is that you do have to keep track of these separate files.

JavaScript (and other programming languages) distinguish between numbers and strings of characters representing numbers. That is, the value "100" is a string of characters, 1, 0, and 0. The value 100 is a number. In either case, however, the value of a variable is stored as a sequence of 1s and 0s. For numbers, this will be the number represented as a binary number. For strings of characters, each character will be represented using a standard coding system, such as ASCII or Unicode. In some situations, JavaScript will make the conversion from one datatype to the other, but don’t depend on it. The coding I suggest uses the built-in functions String and Number to do these conversions.

When the player loses or when it is a follow-up turn, you don’t add any code. The bank value goes down before each new game.

Testing and Uploading the Application

These applications are complete in the HTML file. No other files, such as image files, are used. Instead, the dice faces are drawn on the canvas. (For your information, my versions of dice games written in the older HTML used one or two img elements. To make these fixed img elements display different images, I wrote code that changed the src attribute to be a different external image file. When I uploaded the application, I had to upload all the image files.)

Open the HTML file in the browser. The first application needs to be reloaded to get a new (single) die. The second and third applications (the third one being the craps game) use a button to roll the dice.

These are all, except arguably the last, mistakes in syntax, analogous to mistakes in grammar and punctuation. A mistake of semantics, that is, meaning, can be more difficult to detect. If you write the second switch statement to win on a 7 and lose on the point value, you may have written correct JavaScript code, but it won’t be the game of craps.

It shouldn’t happen here because you can copy my code, but a common mistake is to get confused about the coordinate system and think that vertical values increase going up the screen instead of down.

Summary

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 features the animation of a ball bouncing in a box—preparation for the real games in Chapter 4—the ballistics simulations called cannon ball and slingshot.

Introduction

You’ll have to imagine the animation represented by these static pictures. In Figure 3-1, notice the form with fields for setting the horizontal and vertical velocity.

A bouncing ball with a horizontal velocity of 4 and a vertical velocity of 8 is depicted in the snapshot. The bouncing ball is displayed in red.

In Figure 3-2, the ball has been replaced by an image , and the walls are filled in using a gradient.

The screenshot depicts a ball have an image of an external file with a horizontal velocity of 4 and a vertical velocity of 8. The bouncing ball is displayed in red shade.

HTML5 lets you specify what the input should be. In this example, I’ve specified the input should be a number and indicated minimum and maximum values. I used CSS to specify that if a user makes an invalid entry, the color of the field turns red . This is shown in Figure 3-3.

In an illustration, a ball has an ab horizontal velocity and an 8 vertical velocity. The colour red is used to represent the bouncing ball.

This set of applications demonstrates substantial programming, but it’s not really a game, though people enjoy seeing heads or other images bouncing in a box. Inspired by a recent family picture, I decided to produce a program with a bouncing picture with the additional features to stop and resume the animation. I also include the feature of displaying a background picture. Figure 3-4 shows one screenshot. The game objective is to get the moving object, a photo of cotton candy , to stop close to the child, Annika, wearing face paint to represent a panda. See Figure 3-4. This provides me with an example to demonstrate the advantages of so-called event-driven programming .

The image depicts a bouncing cotton candy game has an image of an external file with a horizontal velocity of 4 and a vertical velocity of 8.

The newest example features a video. My daughter, Aviva, is manipulating an origami model, the Kissy Fish designed by Junior Fritz Jacquet. The background is a photo I took at the Atlanta Botanical Garden of Aviva sitting on a bench, next to a statue of a frog, as shown in Figure 3-5. For this, you will need to imagine the rectangle holding the video moving and the movement within the rectangle of the fish’s jaws closing and opening.

The image depicts a box containing a bouncing video of a girl sitting with a frog.

The bouncing video program is simpler than the other examples, and you may want to add ways for player interaction. However, the “Click to start” button served an important purpose. To prevent website creators from forcing viewers to see videos that they did not request, some user interaction is required. The button is for this purpose.

Critical Requirements

It is important for this application and, indeed, for all programming to define the requirements before you begin writing any code. The application requires things I demonstrated in previous chapters: drawing shapes on a canvas element and using a form canvas element. For this example, we will actually use the form fields for input. In the dice game described in Chapter 2, they were used strictly for output.

In Chapter 1, the HTML document made use of external image files. In Chapter 2, we drew the faces of the dice entirely with coding. In this chapter, I’ll demonstrate both: a bouncing circle drawn with code and a bouncing image from an image file.

To accomplish this, we need some code that will be able to do something—right now, it doesn’t matter what—at fixed intervals of time. The intervals need to be short enough that the result looks like motion.

In this case, the something-to-be-done is to reposition the ball, or what is standing in for a ball. In addition, the code needs to determine if the ball would hit any wall. Now, there isn’t a ball, and there aren’t any walls. It is all virtual, so it is all coding. We’ll write code to perform a calculation on the virtual position of the ball versus the virtual position of each of the walls. If there is a virtual hit, the code adjusts the horizontal or vertical displacement values so the ball bounces off the wall. To be more accurate at the risk of being pedantic, the code sets certain values so that it in the next iteration, the ball object proceeds in a different direction.

To calculate the repositioning, we use either the initial values or any new values typed into the input fields of the form. However, the goal is to produce a robust system that will not act on bad input from the player. Bad input would be an entry that wasn’t a number or a number outside of the specified range. We could just not act on the bad input. However, we want to give feedback to the player that the input was bad, so we’ll make the input boxes change color, as Figure 3-3 shows.

Wanting to provide a way for the user, now to be called the player, a way to interact with an application, I added coding to present a stop button and a resume button to what the player sees. A function that responds to clicking on the Stop button stops the time interval event. A function that responds to clicking on the Resume button starts the time interval event.

To make the video in the bouncing video loop, I added code to restart after the “ended” event. This is because I read that the loop attribute in a video element may not work in all browsers. The program, with my restart code, works in Chrome and Safari.

HTML5, CSS, and JavaScript Features

Let’s take a look at the specific features of HTML5 , CSS , and JavaScript we need to implement the bouncing ball applications. We’ll build on material covered in previous chapters, specifically the general structure of an HTML document, using a canvas element, programmer-defined and built-in functions, and a form element.

Drawing a Ball or an Image or Images

You can experiment with the line width. Keep in mind that if you make the width small and set the ball to travel fast, the ball can bounce past the wall in one step.

I put the code for the ball before the code for the rectangle so the rectangle would be on top. I thought this looked better for the bouncing.

The second version of the program displays an image for the ball. This requires code to set up an img object using the new operator with a call to Image() , assigning that to a variable, and giving the src property a value. In the application, we do all this in a single statement, but let’s take a look at the individual parts.

You read about var statements in Chapter 2. Such statements define, or declare, a variable. It is okay to use the name img for our var here; there’s no conflict with the HTML img element. The new operator is well-named: it creates a new object, in this case of the built-in type Image. The Image function is called a constructor : it constructs an object of type Image. The Image function does not take any arguments, so there are just opening and closing parentheses.

For your application, use the name of an image file you’ve chosen. It can be of type JPG, PNG, or GIF, and be sure to either put it in the same folder as your HTML document or include the appropriate path. Be careful about matching the case both in the name and the extension.

That is, change the 10, 20 to reposition the image and change the 100,100 to change the width and the height. Make the changes and see if the program responds as you intended. Remember that as you specify the width and height, you could be changing the shape—the aspect ratio—of the picture.

It might be possible to erase (clear) just parts of the canvas, but I chose to erase and then redraw everything. In each situation, you need to decide what makes sense.

Think about drawing two images on the canvas. You’ll need to have two different variables in place of img. For this task , give the variables distinctive names. If you are emulating Dr. Seuss, you can use thing1 and thing2; otherwise, choose something meaningful to you!

You may ask why the background needs to be redrawn. The answer is that once something is drawn on the canvas, it is just the equivalent of dots of paint—the term is pixels , picture elements—set to a specific color. Something changes at each iteration (wait for the next section on timing intervals), and while most of the canvas remains the same, the best way to produce the new picture is to clear the canvas, draw the background, and draw the ball.

Gradients with a Side Trip to Explain Arrays

Let’s see how to use a gradient, a rainbow-like combination of colors, for the bouncing program. You can use gradients to set the fillStyle property . I didn’t want to have the ball on top of a filled-in rectangle, so I needed to figure out how to draw the four walls separately.

The gradient stretches out over a rectangle shape.

Gradients involve sets of colors. A typical practice is to write code to set what are called the color stops , such as to make the gradient be a rainbow. For this, I set up an array of arrays in a variable named hue.

The variable family is an array. Its datatype is array. It consists of a list of people in my family. To access or to set the first element of this array, you’d use family[0]. The values to specify specific members of an array are called index values or indices. Array indexing starts with zero. The expression family[0] would produce "Daniel". The expression family[1] would produce "Aviva". The expression family[2] would produce "Annika". If the value of a variable relative was 1, then family[relative] would produce Aviva. To determine the number of elements in the array, you’d use family.length. In this case, the length is 3. Note that the length is 3; the indices go from 0 to 2.

The formatting, with the line breaks and indents, is not required, but it’s good practice. It is not interpreted by JavaScript. We have to get the brackets and the commas correct!

The code would check the length of the array, and if it was 2 instead of 1, the second item would be the profession of the individual. If the length of the inner array was 1, it would be assumed that the individual does not have a profession.

This store has four items, with the cheapest being the dish, represented in the position at index 2, and the most expensive the rug at index 3.

Now, let’s see how we can use these concepts for defining a gradient. We’ll use an array whose individual elements are also arrays.

These values represent colors ranging from red (RGB 255,0,0) to magenta (RGB 255,0,255), with four colors specified in between. The gradient feature in JavaScript fills in the colors to produce the rainbow pattern shown in Figure 3-2. Gradients are defined by specifying points along an interval from 0 to 1. You can specify a gradient other than a rainbow. For example, you can use a graphics program to select a set of RGB values to be the so-called stop points, and JavaScript will fill in values to blend from one to the next.

The array numeric values are not quite what we need, so we will have to manipulate them to produce what JavaScript demands.

This for loop uses a variable named n, with n initialized to 0. If the value of n is less than 10, the statements inside the loop are executed. After each iteration, the value of n is increased by 1. In this case, the loop code will be executed 10 times, with n holding values 0, 1, 2, all the way up to 9.

The assignment statement setting color may seem strange to you: there’s a lot going on—and what are those plus signs doing? Remember, our task is to generate the character strings indicating certain RGB values. The plus signs do not indicate addition of numbers here but concatenation of strings of characters. This means that the values are stuck together rather than mathematically added, so while 5+5 yields 10, '5'+'5' would give 55. Because the 5s in the second example are enclosed by quote marks, they are strings rather than numbers. The square brackets are pulling out members of the array. JavaScript converts the numbers to the character string equivalent and then combines them. Remember that it’s looking at arrays within arrays, so the first number within square brackets (in this case, provided by our variable h) gives us the first array, and the second number within square brackets gives us our number within that array. Let’s look at a quick example. The first time our loop runs, the value of h will be 0, which gives us the first entry within the hue array. We then look up the separate parts of that entry to build our final color.

Setting Up a Timing Event

Setting up timing events in HTML5 is actually similar to the way it’s done in the older versions of HTML. There are two built-in functions: setInterval and setTimeout. We’ll look at setInterval here and at setTimeout in the memory game in Chapter 5. Each of these functions takes two arguments. Remember that arguments are extra pieces of information included in function or method calls. In Chapter 1, we saw that document.write took as its single argument what was to be written out on the screen.

I’ll describe the second argument first. The second argument specifies an amount of time, in milliseconds. There are 1,000 milliseconds to a second. This may seem like a very short unit to work with, but it turns out to be just what we want for games. A second (1,000 milliseconds) is quite long for a computer game.

This tells the JavaScript engine to invoke the function moveBall every 100 milliseconds (10 times per second). moveBall is the name of a function that will be defined in this HTML document; it is the event handler for the timing interval event. Don’t be concerned if you write this line of code before writing the code to define the function. What counts is what exists when the application is run.

I note that the reason that moveball does not need parameters is because of the use of global variables for the position and the displacements.

and see what happens. This is a lesson in the difference between numbers and character strings. Please play around with this little example. If you want to make the numbers go up in smaller increments, change the 1000 to 250 and the 1 to .25. This makes the script show quarter-second changes.

By the way, if my code invoked the statement with the setInterval function again without issuing a clearInterval, it would be the equivalent of setting up an additional alarm clock. The effect would be to increase the speed. When I describe the cotton candy game, you will notice that my code includes multiple clearInterval statements.

To reiterate, the setInterval function sets up a timing event that keeps occurring until it is cleared. If you know you want an event to happen just once, the setTimeout method sets up exactly one event. You can use either method to produce the same results, but JavaScript furnishes both to make things easier.

For the bouncing ball application , the moveBall function calculates a new position for the ball, does the calculations to check for collisions, and when they occur, redirects the ball and draws a new display. This is done over and over—the calls to moveBall keep happening because we used setInterval.

Calculating a New Position and Collision Detection

Now that we know how to draw , and how to clear and redraw, and we know how to do something at fixed intervals, the challenge is how to calculate the new positions and how to do collision detection. We’ll do this by declaring variables ballx and bally to hold the x and y coordinates of the ball’s center; ballvx and ballvy to hold the amount by which the ball position is to be changed; and boxBoundx, inboxBoundx, boxBoundy, and inboxBoundy to indicate a box slightly smaller than the actual box for the collision calculation. The amounts by which the ball position is to be changed are initialized to 4 and 8 (totally arbitrarily) and are changed if and when a player makes a valid change (see the next section) and clicks the change button. These amounts are termed displacements or deltas and, less formally, velocities or speeds.

You might say that not much actually happens here, and you’d be correct. The variables ballx and bally are modified to be used later when things get drawn to the canvas.

It is not obvious from this code, but do keep in mind that vertical values (y values) increase going down the screen and horizontal values (x values) increase going from left to right.

The video moves slightly past the bottom and right edges. It is not easy to make the bounce be exact. The object does not move continuously in space!

Validation

The input is still text, that is, a string of characters, but the values are to be text that can be interpreted as a number in the indicated range.

Other types of input include "email" and "URL", and it is handy to have HTML5 check these. Of course, you can check any character string to see if it’s a number using isNumber and more complicated coding, including regular expressions (patterns of characters that can be matched against), to check for valid email addresses and URLs. One common tactic for checking an email address is to make the user type it in twice so you can compare the two and make sure the user hasn’t made any mistakes.

HTML5 validation is operational in the latest version of browsers, at least on computers, but you need to decide what you want to do for older browsers and for devices. If you’re using a compliant browser, such as Chrome, you can test the example given in the next section. Notice that the ball keeps bouncing even if an invalid value, say abc, is entered where a number was specified, because the program continues to use the current settings.

Stopping and Resuming Animation Triggered by Buttons

When I decided to add stopping and resuming , I decided that an important lesson was how much this could be just an addition, with no change to the rest of the program. A term for what is going on here is event-driven programming. We, the builders, think about the different events more or less distinctly. I also decided to use button elements, a feature introduced as part of HTML5. A button element provides a way to specify the event, in this case, onClick, and the function that will handle the event. The text between the <button> tag and the </button> tag is what appears in the lozenge-shaped button. The old way was to use forms, which, for my example, would have meant multiple forms.

I now owe you the definition of the stopcc function and the resume function.

HTML Page Reload

Before continuing , I want to mention some issues that may cause unexpected problems. Browsers come with reload/refresh buttons. The document is reloaded when the button is clicked. We used this in the simple die throw application in Chapter 2. However, at times you may want to prevent a reload, and in such cases, you can put a return (false); in functions that don’t have anything to return to keep the page from reloading.

When a document has a form, reloading does not always reinitialize the form input. You may need to leave the page and then reload it using the full URL.

Lastly, browsers attempt to use files previously downloaded to the client (user) computer rather than requesting files from a server based on inspection of the date and time. The files on the client computer are stored in what is called the cache. If you think you made a change but the browser isn’t displaying the latest version, you may need to take steps such as clearing the cache.

Preloading Images

The CSS directive stops any img file from being displayed. In my example, the img elements are never displayed. What are displayed are the Image elements created and manipulated by code.

Building the Application and Making It Your Own