A function would be much more useful to us if it was flexible – if it could generate a list of combinations for any size set of numbers. We can’t do this with the hard coded loop solution, so we need to come up with a better method.

The Function Concept

Logically, the best way to do this is to create a function that takes a set of numbers (one combination), the size of the set being chosen from (x in [xCy]), and the size of the set being chosen (y in [xCy]). The function would then use a sequential pattern to calculate the next possible combination and return it.

With this type of function, we could create a while loop that iterates through the whole set of possible combinations. We initialize it with the first possible combination, continue to execute while the function returns a combination, and finish when the function returns 0 – in which case there are no more combinations.

If we’re finding the possible combinations for (11 Choose 4), the main loop would look something like this.

$combo = array();
$total = 11;
$choose = 4;
 
while ( $combo = getNextCombo($combo, $total, $choose) ) {
  //  Process the combo here
  //  Store it in a file, an array, or something
  //  Or just out put it
  foreach ($combo as $number) {
    echo $number . ' ';
  }
  echo '<br />';
}

This initializes an empty array – $combo. Our function takes the array and populates it with the next possible combination.

If the array is empty, it’ll create the first combination – {1, 2, 3, 4}. Otherwise, it will increment that set by one to get the next possible combination set – {1, 2, 3, 5}. When the function receives a combination set it can’t possibly increment – {8, 9, 10, 11} – it returns false and the loop ends.

Ok… How Do We Build the Function?

Let’s start by creating the function, checking for an empty array, and returning the initial set. Then we can dive into how we go about incrementing one combination set to get the next one.

function getNextCombo($combo, $total, $choose) {
  if ( empty($combo) ) {
    //  Return the first set, i.e. {1, 2, 3, 4}
    for ($x = 1; $x <= $choose; $x++) {
      $combo[$x] = $x;
    }
 
    return $combo;    
  } else {
    //  Here we'll calculate the next combination
  }
 
  //  If we didn't return before, no combination was found
  return false;
}

That should be pretty self-explanatory. Now we can look at our pattern and develop a method of calculating the next possible combination.

The Pattern

In the last article on getting combinations, we identified the basic pattern to follow.

• Find the “deepest” number that can be incremented
• Increment it by one
• Set any “deeper” numbers to one plus the previous number

The “depeest” number would be the last digit. In the set {1, 2, 3, 4}, the fourth position would be considered deepest. Here’s the first step – and the most basic increment to do.

1 2 3 4
1 2 3 5

The fourth position, ’4′, is the deepest. It can be incremented. We increment it by one. There are no deeper numbers, so we’re done.

Let’s say the fourth position is maxed out. What happens?

1 2 3 11
1 2 4 5

We move back on position to the third position. This one, ’3′, is the deepest number that can be incremented. We increment it by one to 4. Then we go down the line and set each number after it to one more than the previous. In this case we only have to set the fourth digit to one more than the third, which is 5.

Let’s take a look at one more example.

1 2 10 11
1 3 4 5

Same thing here. We move back to the second digit to find one we can increment. We increment it. We then drag the others back to be one greater than it.

Writing This in Code

The following code should go in the else { } area of the function above.

The first thing we need to do is find the deepest number that can be incremented. The deepest digit can’t be incremented when it equals $total. The second deepest digit can’t be incremented when it equals ($total – 1). The next one at ($total – 2), then ($total – 3), etc.

This loop puts that pattern into practice.

$moveBack = 0;
  while ( ($combo[$choose - $moveBack] == $total - $moveBack) 
             && ($moveBack < $choose)) {
    $moveBack++;
  }

At the end, $moveBack will hold the number of spaces from the end of the deepest digit. If $moveBack == 0, then the deepest digit can be incremented. If $moveBack == 1, we have to move up one digit to increment. So on and so forth.

If $moveBack == $choose, we can stop counting. That means that no more digits can be incremented – we’ve counted all the way back to digit #0.

Incrementing to the Next Set

Now that we know which digit can be incremented, we can increment the whole set and return the array.

First, we should check if $moveBack == $choose (to see if we’re done). If it doesn’t, we start incrementing.

We start by incrementing $combo[$choose - $moveBack]. Then we loop through, decrementing $moveBack until it is 0 – and we update the deepest digit.

if ($moveBack != $choose) {
  //  Increment the deepest digit that can be incremented
  $combo[$choose - $moveBack]++;
 
  //  Loop through and set all other numbers based on this
  while ($moveBack > 0) {
    $moveBack--;
    $combo[$choose - $moveBack] = $combo[$choose - ($moveBack + 1)] + 1;			
  }
 
  //  $combo now holds the next combination
  return $combo;
} else {
  //  We couldn't increment.  The set passed
  //    to the function was the last possible set.
  return false;	
}

And… We’re Done

If you put all the pieces together correctly, you should now have a function that iterates through all of the possible combinations given a binomial coefficient.

If you were handling large sets (millions of possible combinations), you’d probably want to re-write this in a compiled language. However, the logic is simple and based simply on arrays – so it should be easily portable to any language.

A word of warning about storing the information. Don’t try to store all of the possible combinations in a giant array. It’ll choke up all your RAM and eventually kill the script. I forget how many combinations I tried to calculate that way, but PHP maxed out at 130mb of RAM and died.

Your best bet would be to write the combinations to a data file or a database as you go. This dumps the storage requirements into a more capable format.

So what do you do with this? I’m not really sure. I wrote the script for a guy who was working on a statistical program he was using for his doctoral thesis. I’m sure there are other specialized purposes for the script – statistics and probability.

If nothing else, it’s an interesting look at how to write a computer program to tackle a complex math problem.

Here’s the full source of the script, if you had trouble putting the pieces together.

function getNextCombo($combo, $total, $choose) {
  if ( empty($combo) ) {
    //  Return the first set, i.e. {1, 2, 3, 4}
    for ($x = 1; $x <= $choose; $x++) {
      $combo[$x] = $x;
    }
 
    return $combo;    
  } else {
    $moveBack = 0;
    while ( ($combo[$choose - $moveBack] == $total - $moveBack) 
             && ($moveBack < $choose)) {
      $moveBack++;
    }
  }
  if ($moveBack != $choose) {
    //  Increment the deepest digit that can be incremented
    $combo[$choose - $moveBack]++;
 
    //  Loop through and set all other numbers based on this
    while ($moveBack > 0) {
      $moveBack--;
      $combo[$choose - $moveBack] = $combo[$choose - ($moveBack + 1)] + 1;			
    }
    //  $combo now holds the next combination
    return $combo;
  } else {
    //  We couldn't increment.  The set passed
    //    to the function was the last possible set.
    return false;	
  }
  //  If we didn't return before, no combination was found
  return false;
}
 
$combo = array();
$total = 11;
$choose = 4;
 
while ( $combo = getNextCombo($combo, $total, $choose) ) {
  //  Process the combo here
  //  Store it in a file, an array, or something
  //  Or just out put it
  foreach ($combo as $number) {
    echo $number . ' ';
  }
  echo '<br />';
}

Today, we’ll tackle the first part. We’ll start with a quick primer on math – what is a binomial coefficient? Then, we’ll look into the most efficient way to calculate that and get the total number of possible combinations.

What Is a Binomial Coefficient?

If it’s been a while since you took statistics or calculus, you might be scratching your head thinking about what a binomial coefficient is and what it has to do with combinations.

If you’re looking at a set of random items – let’s say 52 playing cards – and you want to pick out a number of them – let’s say a 7 card poker hand – the binomial coefficient tells you how many possible combinations you can make.

The general formula for that is usually written:

(x Choose y) = (x!) / (y! * (x-y)!)

In our example above, the total number of combinations you can get in a 7-card poker game is (52! / (7! * 45!)) or somewhere around 130,000,000.

How Do We Calculate That (in PHP)?

These methods of calculation will work for any language, really. We’ll just use PHP as an example.

The simplest way to calculate the binomial coefficient would be to loop through, calculate each factorial, and then evaluate the equation. Notice I said simple, not efficient.

$x = 52;
$y = 7;
 
$num = 1;  //  This is the numerator, 52!
for ($a = 1; $a <= $x; $a++) {
  $num *= $a;
}
 
$denOne = 1;  //  This is the first part of the denominator, 7!
for ($b = 1; $b <= $y; $b++) {
  $denOne *= $b;
}
 
$denTwo = 1;  //  This is the second part of the denominator, 45!
for ($c = 1; $c <= ($x - $y); $c++) {
  $denTwo *= $c;
}
 
$combinations = ($num) / ($denOne * $denTwo);

PHP will evaluate this properly because it’s nice and flexible with data types. Do you know how large 52! is? Try 8.06581751709E+67 large.

This is clearly too big to be an integer value, but PHP quietly converts the values to floats and keeps running. There should be a better way – one where we don’t have to calculate all of the factorials.

Method Two – Using array_diff

This method is a bit more along the lines of human logic. However, it’s still not going to be efficient. Although it’ll work with smaller numbers than the first method, it’ll take more time and memory to compute.

Basically, we’ll create three arrays. One for each set – {1, 2, 3, … 52}, {1, 2, 3, … 7}, {1, 2, 3, … 45}.

Since we know that the third set (45!) will be in the denominator and the first set (52!) will be in the numerator, we can use a nifty function called array_diff to cancel out all of the common values and shrink the numerator for us.

$newNumerator = array_diff($oldNumerator, $oldDenominator);

Then we can calculate the factorials by multiplying all of the values in the array. We can also make use of another PHP function here – array_product. It does more or less what it sounds like – it finds the product of all the values in an array.

$num = array();
for ($a = 1; $a <= $x; $a++) {
  $num[] = $a;  // the numerator array, 52!
}
 
$denOne = array();
for ($b = 1; $b <= $y; $b++) {
  $denOne[] = $b;  //  The first denominator array, 7!
}
 
$denTwo = array();
for ($c = 1; $c <= ($x - $y); $c++) {
  $denTwo[] = $c;  // The second denominator array, 45!
}
 
//  Use array_diff to cancel out the common values in 52! and 45!
$num = array_diff($num, $denTwo);
$combinations = array_product($num) / array_product($denOne);

This keeps the numbers much smaller. Therefore we can work with bigger combinations before PHP putts out. However, the arrays can eat up a lot of memory and processing power… so there still should be a better way.

Combine the Two Concepts

The more efficient way is to combine the two concepts. We’ll use the first method of multiplying through a loop to generate the factorials. This is far more efficient than iterating an array.

However, we’ll still cancel out the common values between 52! and 45!. To do this, we modify the first loop so that it counts down from $x (52) to $x – $y (45). Then we simply ignore the third loop – since it’s values were essentially counted when we calculated the first loop.

$num = 1;
for ($a = $x; $a > $x - $y; $a--) {
  $num *= $a;
}
 
$den = 1;
for ($b = 1; $b <= $y; $b++) {
  $den *= $b;
}
 
$combinations = $num / $den;

At this point, our script is pretty efficient. It doesn’t use up a lot of memory, it executes quickly, and it’s not calculating very many redundant values.

However, there’s still a limit to what we can do. The biggest number PHP seems to be able to calculate is 170!. After PHP sees the value 7.25741561531E+306 it just seems to give up. Geez, like 300 zeroes is a lot.

You could improve this a bit more, and increase the number of combinations it could compute. Rather than calculating the $numerator and $denominator separate, as we did here, you’d want to calculate the $denominator first and then cancel out values as you multiply the numerator.

In other words, calculate the $denominator as normal. Then, while you’re looping through to calculate the numerator, you factor out any common values in the $denominator and the number about to be multiplied into the numerator.

Who Cares About How Many Combinations… I Want to See Them

This is really the boring part. Who cares how many combinations there are? We can easily find that with a calculator.

The interesting part – where we definitely need a computer to help us – is to iterate through the set and find all of the possible combinations. We’ll come back to this later in the week.

At the suggestion of a reader (thanks Justin), I decided to go ahead and turn the general formula for this into a short helper function to generate a random number.

Random Numbers: General Formula

First, let’s take a minute and recap the general formula for finding a random number.

Javascript’s Math.random() method returns a random number between 0 and 1. By multiplying this decimal value by a whole number, we can generate a desired range of values. For example, by multiplying Math.random()’s result by 10, we get a range of 0 to 10.

Next, we take the Math.floor value of that random number. This gives us just the integer portion – and it effectively cuts our range to 0 through 9. Finally, we can modify this by adding an offset number. So if we wanted a random number between 51 and 60, we’d add 51 to that result.

Creating a Random Number Function

The basic formula we end up with is…

(Math.floor( Math.rand() * setSize)) + setOffset;

Our code would be much more readable if we had a helper function that could be called like this…

randomNumber = rand(min, max);

Our function is going to take two parameters – min and max. From these two parameters, we can calculate the offset and the set size and generate the proper random number.

function rand(min, max) {
  var offset = min;
  var range = (max - min) + 1;
 
  var randomNumber = Math.floor( Math.random() * range) + offset;
  return randomNumber;
}

All done.

Add that function to a utility file, and you’ve got a handy random number generator at your disposal. It even uses the same format as PHP’s rand() function, to help increase consistency and readability in your code.

While I was working on various game-related scripts this weekend, I was left wondering how to create a random number in Javascript. It’s not quite as simple as the rand() function – we’ll have to go back to the old C-style random number generation.

The Math Object and Random Numbers

Javascript comes with a built-in random number generator as part of the Math object. This Math object does a number of calculations – trig functions (sine, cosine, and tangent), rounding, logarithms, exponents, etc.

To use the Math class to generate a random number, you begin with the random method.

Math.random();

This method returns a random value – between 0 and 1.

How Can I Make a Useful Random Number?

If you’ve ever programmed in C/C++, you’ll know what to do. If you’re used to working with something like PHP – which comes with an intelligent built-in random number generator – you may be left in the dark.

How can you take a random decimal – between 0 and 1 – and turn it into a random number between, say, 1 and 100?

The answer is simple – math. You need to multiply the random() result to get a certain sized range and then use addition to start the range at the right number.

Let’s say you multiply the result of Math.random() by 10.

Math.random() * 10

Since the results of Math.random() are between 0 and 1, the results of this statement will be 0 to 10. The minimum result is (0 * 10 = 0) and the highest result is (1 * 10 = 10).

If you were to only look at the whole number part of the result, you would get a range of 0 to 9. In actuality, the result of Math.random() is never 0 or 1, so the above statement won’t give you a result of 10.

Therefore we can use the whole number portion of the result to get a random integer – 0 to 9.

How Do We Get a Whole Number?

Simple. Use the floor method of the Math class. Math.floor returns the whole number portion of a float/decimal.

Math.floor(1.45); //  Result is 1

Simply pass a float/decimal to the Math.floor method, and it will return the integer portion of that number. If you’re working with negative numbers, it will always round down. Keep that in mind. For positive numbers, it’s simply a truncation function.

To get a random integer, we simply pass the result of Math.rand() to Math.floor().

Math.floor( Math.rand() );

What If My Random Set Doesn’t Start at 0?

Here’s the last piece of the random puzzle.

You can determine the size of your random number set with multiplication. The coefficient you use (like we used 10 before) determines the range your random number can be in.

Math.floor( Math.rand() * 10); // 10 Numbers, 0-9
Math.floor( Math.rand() * 5); // 5 Numbers, 0-4
Math.floor( Math.rand() * 100); // 100 Numbers, 0-99

If the set you want to create a random number from doesn’t start with 0, you simply use addition to get what you want.

Let’s say you want a random number from 101-150. Your set contains 50 numbers, and it starts with 101.

(Math.floor( Math.rand() * 50)) + 101; // 101 - 150

The basic statement – Math.floor( Math.rand() * 50) – returns a value between 0 and 49. We want to offset that by 101 places and we’ll have our desired random set – 101 to 150.

At this point, you should have a general equation you can use for generating random numbers from any given set. Take Math.rand(), apply a coefficient to determine the size of the random number set, and then use addition to offset that number to your desired starting point.

(Math.floor( Math.rand() * setSize)) + setOffset;

Now go find something useful to use these random numbers for.

One of the Frihost users and his friend made a 3d Worm game. Although the directions are in Spanish (as is the source code), the game is pretty cool. It’s a good example of what you can accomplish with some Javascript/DOM trickery.

Playing the game is simple enough. You use the four arrow keys and the Q/A key to pick one of six directions to go in.

At first, it can be very difficult to gauge the “3d” position of the apple. Once you learn to use the shadows to your advantage, the game becomes pretty easy. It’s still fun, though, and a great example of how Javascript can be used to make an interface for a game.

You see a few cool things here.

For one, the script captures keyboard input to drive the action. Rather than clicking on buttons/boxes on the screen, the user can hit the appropriate keys and the game responds. This is important for making a game feel “real” and not a kind of mash-up.

A lot of the positioning is done with “position: absolute” and the “top”/”left” styles. This let’s you use the screen as a kind of canvas – drawing the images where-ever you need them. It frees you from the constraints of normal HTML positioning, where you need to float/margin/padding stuff to get it to line up where you want.

It’s possible to read source code written in another language. I just find this interesting. The source is written in Spanish – so most of the variable/function names don’t mean a lot to me. However, the code is pretty straightforward so it’s still easy enough to follow what’s going on.

Well go play some Worm. This has inspired me to go do some coding.

In this post, we’ll explore the code used to set up this board. Once that’s done, the next step will be to create a php script to evaluate some of the game’s logic.

Recap: The Game Board Concept

First, let’s take a step back and recap our Javascript game board concept.

The basic building block of our game board is a div element. This div element is styled with a CSS stylesheet – 50px by 50px. By using floats and clearss strategically, we can stack 9 of these div elements into a 3×3 box.

Javascript is added to make these boxes functional. An “onClick” handler is used to call a Javascript function that changes the background image of the div. This effectively marks the square as either a “Circle” or “Cross” for Tic Tac Toe.

To alter the div – and also to add textual output – we’ll be using Javascript’s powerful DOM functions. These allow us to grab a specific element by it’s ID and change it.

Creating Graphics

I created two images in Inkscape to use for this board. Each is a 50×50 png file – with a gray background and a black border. The actual token (the circle or cross) is red and laid on top of the gray background.

I’m no great artist, but these should work for a functional demo. We can worry about making nice circle and cross tokens later. I think getting the game working is more important than making it pretty from the get-go.

Turning Our .js Script into a Class

In making this a functional board, I also converted the script into an actual class. The script may end up being somewhat large and unwieldy – and an object oriented approach may help us keep it tidy and clean. Or it may add a lot of overhead… but I like objects.

In our HTML file, we’ll create the object like this.

<script type="text/javascript">
var tictactoe = new game();
</script>

In the attached .js file, we actually define the game object. Here’s part of the object definition.

function game() {
  //  Array to hold the bgImgs
  this.bgImgs = new Array();
    this.bgImgs[0] = 'tttcircle.png';
    this.bgImgs[1] = 'tttcross.png';
 
  //  Player information			
  this.currentPlayer = 0;
  this.players = new Array();
    this.players[0] = "Player One";
    this.players[1] = "Player Two";
 
   return true;

This class constructor does some of the initialization for us.

First, it creates an array with background images. At the moment we’re only using two images. However, this technique would be useful if you had a more complex map – with 10-15 images you could lay over a div.

Second, we create some player information variables. The ‘currentPlayer’ property is going to track whether the ‘cross’ or ‘circle’ player is currently taking a turn. The ‘players’ array will just hold the names of those players for now.

The Background Image Changing Function

One of the major methods of this class will be changeBackground(). Just like in the previous example, this method will change the background style of a given div tag. This way we can change it from an open square to a circle or cross token.

  this.changeBackground = function (boxId) {
    var box = document.getElementById('box-' + boxId);
    box.style.background = 'transparent url(' + 
      this.bgImgs[this.currentPlayer] + ') top left no-repeat';
 
    box.removeAttribute('onClick');
 
    this.changePlayer();
  }

This should be pretty straightforward. We’re storing the ‘div’ element in the ‘box’ variable. We’re then setting the ‘background’ style as we would in a css style. Remember that we stored the background images in an array (this.bgImgs) and this.currentPlayer corresponds to a key in the this.bgImgs array (either 0 or 1).

The ‘box.removeAttribute()’ method is removing ‘onClick’ from that div. We can’t use a square a second time, so we might as well eliminate the onClick handler altogether.

Finally, this.changePlayer() is calling a new method. This is going to help us switch from Player One’s turn to Player Two’s turn.

One Turn to Another – this.changePlayer()

The last method we need to declare for this class at the moment is changePlayer.

This will toggle the active player – which in turn affects whether a circle or cross is placed on the board. For some added effect, we’ll also create a new html element to display a message that says who’s turn it is.

  this.changePlayer = function () {
    //  Switch the active player
    if (this.currentPlayer == 0) {
      this.currentPlayer = 1;
    } else {
      this.currentPlayer = 0;
    }
 
    //  Get a reference to our 'message' element and create the message
    var box = document.getElementById('message');
    var msg = "It is " + this.players[this.currentPlayer] + "'s turn.";
    var txt = document.createTextNode(msg);
 
    //  Erase any existing text
    while (box.hasChildNodes()) {
      box.removeChild(box.lastChild);
    }
 
    //  Add the text node (our message) to our element
    box.appendChild(txt);
  }

Again, this is pretty straightforward. The DOM functions are amazingly simple – once you see how they work.

‘box’ is a reference to our element (id = message). The msg variable is a temp variable I created to hold the string. The ‘createTextNode’ method creates a new block of text (with our msg) that we can then insert into an HTML element.

The while() loop is simply there to erase any old text. As long as our ‘box’ element has any child nodes inside of it (text or other HTML tags), the loop will execute and delete one of those child nodes each time. This way we have a clean slate on which to write down who’s turn it is.

Seeing It In Action

Well, that’s really all there is to it. Have a look at this functioning demo. If you had trouble piecing together the example code, you can download the source files (.js, .css, and two .png) from the list below.

Good luck, and be sure to check back soon. Our next task is going to be a real challenge. We need to add some logic to this game – evaluating victoary conditions and creating AI!

Source code files:

• Basic Tic-Tac-Toe JS File
• Tic-Tac-Toe CSS File (#2)
• Tic Tac Toe Cross Image
• Tic Tac Toe Circle Image

This tutorial will focus on the first part of making a basic board game – creating a board. The end result will be a three by three game board suitable for use in developing a tic-tac-toe game.

Game Development with JS, AJAX, and PHP

How can we use JS and PHP – connected through AJAX – to develop an online game?

Javascript’s main use for us is to create an interface for the game. Through Javascript we can capture user input – i.e. mouse clicks and text. We can also alter the game’s output – changing the HTML of the page, adding images, and moving things around. Javascript will provide a lot of the front end work.

PHP, on the other hand, is a more robust language for dealing with the logic of the game. PHP could be useful for developing an AI and evaluating winning conditions. It also offers a great way to store information for later use through flat files or database integration.

If we’re going to use both Javascript and PHP, we’ll need to use AJAX. This is the glue that holds the whole thing together. It will send input from the main Javascript to the PHP processing scripts. The PHP script will then send info back to the Javascript and it will alter the page’s layout accordingly.

Step One: Building a Game Board

The first step in creating a graphical online game is to build a game board. The most basic board I could think of – and therefore a good starting point – is a tic-tac-toe board.

First, we should define and create our basic building block. A square.

In terms of HTML/CSS, our square will be a div tag. We’ll be able to position and style it to our liking, and we can add javascript triggers like “onClick” to help run our Javascript.

Our first box is going to be a simple 50px x 50px square. When you click it, it will change background colors to black.

Here’s the CSS we’ll use for the square.

.box {
  width: 50px;
  height: 50px;
  border: thin solid black;
}

Inside the html body we can create our box like this.

<div class="box" id="box" onClick="makeBlack();"></div>

Finally, we need to define our Javascript function makeBlack(). We’ll access the div element through it’s ID (‘box’) and change it’s background style to be black.

function makeBlack() {
  var box = document.getElementById('box');
  box.style.background = 'black';
}

Now we’ve got a building block! We just successfully used Javascript and DOM to create a click-able box. With some tweaking, we can turn this into a nifty 3×3 grid for Tic Tac Toe.

Step Two: Build a Grid

For Tic Tac Toe, we’re going to need a 3×3 grid. We can modify our CSS a bit and create 9 separate divs to accomplish this. Add the following lines to the CSS for .box, and create a new class .break.

.box {
  float: left;
}
 
.break {
  clear: bloth;
}

This way our boxes line up in a row. If we include a “break” class in our div, we can start a new line. Therefore we should update the html like this.

<div class="box break" id="one" onClick="makeBlack('one');">1</div>
<div class="box" id="two" onClick="makeBlack('two');">2</div>
<div class="box" id="three" onClick="makeBlack('three');">3</div>
<div class="box break" id="four" onClick="makeBlack('four');">4</div>
<div class="box" id="five" onClick="makeBlack('five');">5</div>
<div class="box" id="six" onClick="makeBlack('six');">6</div>
<div class="box break" id="seven" onClick="makeBlack('seven');">7</div>
<div class="box" id="eight" onClick="makeBlack('eight');">8</div>
<div class="box" id="nine" onClick="makeBlack('nine');">9</div>

Notice that each box has it’s own unique ID – one to nine. I also changed the makeBlack() function to include a parameter – an ID. Let’s update the makeBlack() function to utilize this to change the specific box that we click on.

function makeBlack (boxId) {
  var box = document.getElementById(boxId);
  box.style.background = 'black';
}

Step Three: Use a Background Image Instead of a Background Color

Turning a box to a black background color isn’t that impressive. But it’s easy to use as a demonstration.

For a game, it would be much more useful to make an image appear in our div. We can do that by editing the “background” style of the div in the makeBlack() function. Note: You might also want to change the name of the function to something more descriptive, like changeBackground().

Here’s how to do it.

function changeBackground (boxId) {
  var box = document.getElementById(boxId);
  box.style.background = 'transparent url(image.png) top left no-repeat';
}

The property “box.style.background” accesses the “background” css style for the “box” id. Give it a value just like you would in a css stylesheet. In this case, we’re giving it a background of “image.png.” You might want to change this to a “circle.png” or a “cross.png” that you create for your game.

Step Four: Changing the onClick Event

The last thing we want to look at in this introduction is how to change the onClick event for our div. You might want to get rid of it altogether – or maybe change it to a new function. For example, after turning the box black, you might want to make the onClick call a new function – makeWhite().

We can do this through another DOM method, similar to the way we accessed the styles before. Assuming we have the same variable box that refers to our div, here’s what we need to do in our function.

//  Get rid of onClick altogether
box.removeAttribute('onClick');
 
//  Change onClick to a new function
box.setAttribute('onClick', 'makeWhite();');

Where To Go From Here?

Now that you’ve got a basic 3×3 grid and you know how to make it respond to user input, you can get started on making a game.

Here are a few of the things you’ll want to think about next.

• I need some images to place in my boxes.
• How Can I Alternate Players (and images)?
• How Can I Determine Who Wins?
• How Can I Make the Computer Play (AI!)?

You can go ahead and get started on your own – but I’ll certainly return to this topic within the next week or two with some more examples. After the next tutorial, we’ll have a working Tic-Tac-Toe board driven solely by Javascript.