How to Create Random Numbers in Your HTML5 Game
Random numbers are a key part of HTML5 game programming. Often you want some kind of random behavior. This is used to mimic the complexity and unpredictability of the universe. Most languages have a random number generator built in. This special function produces some sort of semi-random number. Often you’ll have to do some manipulation to make the number fit the pattern you want.
The page seems a little complex, but it describes a powerful and flexible system, once you know how to use it. Here’s what’s happening:
Multiply the raw value by 100.
In this example, you want a number between 1 and 100. If you multiply a 0-to-1 by 100, you’ll get 0 to 99.9999 (with a lot of nines) value. That’s getting closer. The times 100 box shows the raw value after it has been multiplied by 100.
Convert the large number into an integer.
Here’s the code in its entirety:
Use math for your game code
To make this program work, you need to call in the ultimate weapon of geekiness: Math.
First, of course, is the function that generates random numbers. It’s called Math.random().
The Math.random() function produces a semi-random number. (It isn’t really random but is produced through a complex formula from another number.) The random number will be a floating-point value between 0 and 1. This doesn’t seem helpful, but with a little math, you can convert the 0 to 1 value to any other range you wish.
Math.round(): Converts a number using the standard rounding algorithm. If the decimal part is .5 or less, the smaller integer is chosen; if the decimal part is greater than .5, the larger integer is chosen. This means that 3.1 rounds to 3 and 3.8 rounds to 4.
Math.floor(): This function always rounds down, so 3.1 and 3.8 both become 3. The parseInt() function is identical to Math.floor().
Math.ceil(): This function (get it — the ceiling function) always rounds up, so 3.1 and 3.8 both end up as 4.
The function you need depends on the specific circumstances.
How to make the HTML game form
A span to hold the raw data: There’s really nothing for the user to type, so use a span for the various output elements. Spans are a generic inline tag. They’re super for situations like this where you need some simple output element that can be inline with the main flow of the page. The raw data span is called (here you go . . .) spnRaw.
Another span for the times100 data: As the program does the calculations, it will display the output.
A third span for the final output: After all the calculations are finished, you need some way to display your brilliant work. spnFinal will serve this purpose.
Labels to make everything clear: Without labels explaining what’s happening, there will just be a bunch of numbers on the screen. Don’t forget to add labels even to simple examples so the user can figure out what’s going on.
A button to start all the action: Nothing will happen until the user asks for it, so add a button to the form. When the button is clicked, have it call the roll() function to roll a number.
CSS to make it all look good: HTML without CSS is ugly, so add enough CSS to make the HTML form look decent.