HTML and CSS Reference
In-Depth Information
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 make use of the middle bits (1s and 0s) of a very long string
of bits representing the time in milliseconds. The exact method isnt important to us. We will assume that
the JavaScript furnished by the browser does an okay job with this, which is called pseudo-random
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 youll 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 well 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
(GU I)
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 Ill explain shortly.
HTML5, CSS, and JavaScript features
Lets now take a look at the specific features of HTML5, CSS, and JavaScript that provide what we need to
implement the craps game.
Pseudo-random processing and mathematical expressions
Pseudo-random processing in JavaScript is performed using a built-in method called
Math.random
.
Formally,
random
is a
method
of the
Math
class
. The
Math.random
method 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 its 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. Thats 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 make use of
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, so the result is the whole number 1. In general, when we multiply our
random number by 6 and floor it, well 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.
