Making the application your own

In document Using Games to Learn HTML5 and JavaScript (Page 79-83)

63

<br/>

<button onClick="throwdice();">Throw dice </button>

<form name="f"> Start a form named f

Stage: <input name="stage" value="First Throw"/> With the text Stage: right before it, set up an input field named stage

Point: <input name="pv" value=" "/> With the text Point: right before it, set up an input field named pv

Outcome: <input name="outcome" value=" "/> With the text Outcome: right before it, set up an input field named outcome

</form> Close the form

</body> Close body

</html> Close html

64

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 data type 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.

In the throwdice function, before the if(firstturn) statement, add the code in Table 2-6 (or something like it).

Table 2-6. Adding a Bank for the Player

Code Explanation var bank = Number(document.f.bank.value); Sets a new variable bank to be the number

represented by the value in the bank input field.

if (bank<10) { Compare bank to 10.

alert("You ran out of money! Add some more and try again.");

If bank is less than 10, put out an alert.

Return; Exit the function without doing anything.

} Close the if true clause.

bank = bank – 10; Decrease bank by 10. This line is reached only when bank was greater than 10.

document.f.bank.value = String(bank); Put the string representation of that value in the bank field.

Then in each place where the player wins (in the switch statement for a first turn after the 7 and 11 cases, or in the switch statement for a follow-up turn, after the point case, add the code in Table 2-7.

Table 2-7. Increasing the Value of the Bank

Code Explanation bank = Number(document.f.bank.value); Set bank to be the number represented by the value in

the bank input field. Setting bank again allows for the possibility of the player re-setting the bank amount in the middle of a game.

65 bank +=20; Use the += operator to increase the value of bank by

20

document.f.bank.value = String(bank); Put the string representation of the bank amount in the bank field

When the player loses, or when it is a follow-up turn, you dont 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 up 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.

I repeat what I wrote earlier. To test this program, you do need to check the many cases. You are not done when you, acting as the player, win. Typical problems include

• missing or mismatched opening and closing tags

• mismatched opening and closing brackets, the { and the } surrounding functions, switch statements, and if clauses

• missing quotation marks. The color coding, as available when using TextPad and some other editors, can help here, as it will highlight keywords it recognizes.

• inconsistency in naming and use of variables and functions. These names can be anything you choose, but you need to be consistent. The function draw2mid will not be invoked by drawmid2().

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 shouldnt 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

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

66

• 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 youll 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.

67

In document Using Games to Learn HTML5 and JavaScript (Page 79-83)