How to Create Random Numbers in Your HTML5 Game - dummies

How to Create Random Numbers in Your HTML5 Game

By Andy Harris

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:

  1. JavaScript generates a random number.

    Different languages do this in different ways, but JavaScript has a function that creates a random floating point value between 0 and 1. That value is shown in the raw box.

  2. 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.

  3. Convert the large number into an integer.

    The user is never going to guess a number with 17 places after the decimal, so you need an integer. JavaScript has a number of ways to convert a float to an integer. To get the 1 to 100 behavior you’re looking for, you use a method called Math.ceil. The final result is shown in the final box.

Here’s the code in its entirety:

<html lang="en-US">
 <meta charset="UTF-8">
 <style type = "text/css">
 fieldset {
  width: 600px;
  margin-right: auto;
  margin-left: auto;
 label {
  float: left;
  width: 250px;
  text-align: right;
  margin-right: 1em;
  clear: left;
 span {
  float: left;
 button {
  display: block;
  clear: both;
  margin: auto;
 <script type = "text/javascript">
 function roll(){
  //create variables for form elements
  var spnRaw = document.getElementById("spnRaw");
  var spn100 = document.getElementById("spn100");
  var spnFinal = document.getElementById("spnFinal");
  //get random number
  var raw = Math.random();
  spnRaw.innerHTML = raw;
  //multiply by 100
  var times100 = raw * 100;
  spn100.innerHTML = times100;
  //get the ceiling
  var final = Math.ceil(times100);
  spnFinal.innerHTML = final;
 } // end roll
 <h1>Make random numbers 1 - 100</h1>
   <span id = "spnRaw">0</span>
   <label>times 100</label>
   <span id = "spn100">0</span>
   <span id = "spnFinal">0</span>
   <button type = "button"
     onclick = "roll()">
    roll the dice

Use math for your game code

To make this program work, you need to call in the ultimate weapon of geekiness: Math.

JavaScript has a wonderful library called Math. The Math library has some really geeky goodness buried in it, like a number of commonly used math functions as well as constants (like pi) and a few other utility functions for working with numbers.

First, of course, is the function that generates random numbers. It’s called Math.random().

You really need to say Math.random(). If you call random() all by itself, JavaScript won’t know what you’re talking about.

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.

In addition to the random() function, the Math object has a number of functions that allow you to convert a floating point value (that is, a number with a decimal point) to an integer (you got it — a number without a decimal point). The standard parseInt() method is built into JavaScript, but sometimes you want to do a fancier conversion. The Math library has a number of these tools:

  • 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

As always, HTML forms the foundation of any JavaScript program. The main thing here is the form that provides the user interface. This form has some predictable features:

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