You can easily delay the release of your posts into the main indexes (front page, archives, “Recent Posts” list, etc). With a little bit of code, you can also restrict people from viewing the page before its appointed “Published” date.

Delaying Publication: Setting a Date

If all you want to do is delay the date and time that an article is “released” on your page’s index, you don’t have to do a whole lot of work.

Every article you post is “stamped” with a time by WordPress. When you hit the “Publish” button, it checks the current time on the server and attaches that to your post.

You may not have noticed, but there’s an option for you to edit this time while you are working on the article. For example, you could set the date back a week and backdate one of your posts. For our purposes, we’ll set the date ahead – and WordPress won’t display your post in any indexes until that date arrives.

In the “Write” section of your Dashboard, you should have a column of widgets on the righthand side (Categories, Discussion, Post Slug, etc). If you scroll down a bit, there should be one titled “Post Timestamp.” If you don’t see anything, click the “+” button in the title.

To set a custom release date, select “Edit Timestamp.” Then use the inputs to enter the date and time you want the article released. Voila – you’re done.

Restricting Access to the Page

For most people, this is good enough. Your readers aren’t going to be able to find the article without a link to it appearing on your front page or in your RSS feed.

However, if your readers do know the link to the page, somehow, they can still access it directly. If you want to prevent that, you’ll need to add a few lines of code to your template files.

We’re going to edit the “single.php” template file – the file responsible for formatting and displaying a single post. After the page retrieves the post, we’re going to perform a check to see if the published date of the article is in the future.

If it is, we’ll display an alternative message to tell the user the article isn’t published yet. Otherwise, the article will be displayed as normal.

Editing Single.php

Your template file probably doesn’t look exactly like mine, but there should be some very basic similarities.

If you open single.php, the page is displayed within “the loop.” It’s how every WordPress template works. The loop always begins with a line similar to this.

<?php while (have_posts()) : the_post(); ?>

This checks to see if a page was found in the database. If it was, it loads the page into memory and prepares to output it. The loop will eventually end with a line like this.

<?php endwhile; ?>

We’re going to create a new if statement and place it in between these two lines. The new template will look something like this.

<?php while (have_posts()) : the_post(); ?>
<?php if ($pubDate > time()) : ?>
  <h3>Article Not Published Yet</h3>
  <p>Sorry!  The article you request is not published 
    yet.  It should be available soon, so check back in a few days.</p>
<?php else : ?>
  ...  Regular post processing goes here ...
<?php endif; ?>
<?php endwhile; ?>

Creating the Conditional Statement

The only thing we have to do now is create a functioning conditional statement that checks to see if the published date of the article is in the past or the future.

To do that, we’ll use a few functions – get_the_time (a WordPress function to get the post’s timestamp), strtotime (a PHP function to convert a date string to a timestamp), and time (a php function to get the current tie).

get_the_time doesn’t return the actual time stamp – it returns a formatted date string, like “March 9, 2008, 11:13:35.” You can specify how it’s formatted, just like you would with PHP’s date function.

To get the timestamp, we’re going to format the time string in a special way so that strtotime() can convert it back to a full timestamp (preserving the exact time the article should be published). Then we compare that timestamp to the system time and see if the date has passed or not.

Use this if statement in the code above, and you should be good to go.

<?php if (strtotime(get_the_time('F j, Y, H:i:s')) > time()) : ?>

If you time delay an article and someone tries to access the article directly, they will now see your alternate message. You should of course personalize that to something appropriate for your site.

You can also apply the same concept to “Pages” in WordPress. You’ll need to edit the page.php template file and insert the same snippet of code there.

What are you waiting for? Go write some articles for the future.

Like the file functions, each method is slightly different. Knowing how each operates will help you choose which function to use when you want to work with directories in your PHP script.

PHP 4 – opendir, readdir, closedir

The traditional method of working with directories is very similar to the traditional method of working with files. You open a directory and save it as a resource in a variable. Then, you read through it until the end. Finally, you close it to tidy things up.

$dirName = 'images';
 
$dir = opendir($dirName);
while ($filename = readdir($dir)) {
  echo $filename . '<br />';
}
 
closedir($dir);

That simple script will open a directory (‘images’), read every filename in the directory, and then clean up the directory resource.

The readdir() function goes through the files as they are stored in the filesystem. There’s no real logic to their order – they just come the way they are. Each time you use readdir(), the pointer in the $dir resource is moved to the next file.

PHP 5 – A Convenience Function, scandir

In PHP 5, a new convenience function was introduced to handle all of the major directory functions with one call. Similar to the way file_get_contents handles all of the file writing, scandir handles all of the directory listing.

With a single function, scandir opens a given directory, reads all of the files into an array, and closes the directory.

$dirname = 'images';
 
$filenames = scandir($dirname);
foreach ($filenames as $file) {
  echo $file . '<br />';
}

This slightly shorter snippet of code accomplishes the same thing as the original example. As an added bonus, the filenames are already stored in an array ($filenames). The filenames are also sorted alphabetically.

You could of course achieve the same end with the original directory functions – but you’d have to add more lines of code to store the data in an array and then sort it. One of the biggest reasons to use scandir() is that it’s a convenience.

There’s also one functional difference between the two. scandir() never actually accesses a file – so it’s “Last Accessed Time” will remain the same. When you use readdir() to cycle through a directory, each file is accessed – resetting the “Last Accessed Time.”

This often won’t matter, but it could play an important role in a script that works directly with a file’s “Last Accessed Time.”

The Versatile Choice – glob

The most versatile choice is glob(). Like scandir, it returns an array of filenames. However, glob allows you to specify a pattern to match – so only the matching filenames are returned.

The pattern follows all of the rules for wildcards when using a command like dir. For example, this will get all of the files in the ‘images’ directory.

$dirName = 'images';
 
$filenames = glob($dirName . '/*.*');
foreach ($filenames as $file) {
  echo $file . '<br />';
}

There is a very important difference between this and the other functions, though.

glob() returns paths, not filenames. In this case, the output will be something like ‘images/image.jpg,’ not just ‘image.jpg.’ The directory listing is based on the current working directory – so specifying a path (like we did) will cause that directory to be included in the returned path.

If you don’t want the full path shown, you can use some other functions to change the working directory – like using ‘cd’ in the command line. By default, the working directory is where the script is executing. In this case, we could change the working directory to ‘images’ to get filenames without the directory as part of the path.

chdir('images');

You can also use the GLOB_BRACE flag to pass multiple file extensions. For example, this would allow you to find all images with extension .jpeg, .png, or .gif.

chdir ('images');
 
$filenames = glob('*.{jpeg,png,gif}', GLOB_BRACE);
//  Notice there are NO spaces after the commas

glob() can be quite a powerful tool, indeed. If all you want is a list of files in a directory, you’ll probably want to stick to scandir() – so you don’t have to go messing with the working directory.

For anything else – like a selective list of files – you should make use of glob’s matching functionality rather than sorting through the filenames yourself.

With some String functions, you can create your own function to parse a query string attached to the request url and store it in an associative array – just like PHP would for you.

What Are Query Strings For

If you’re developing anything more than a basic informative page, you’ll need to pass information from one page to the next. You might want to pass a search query, some form values, the answer to a quiz question, or any number of other things. Passing this information is the first step in converting your page from a static bit of information into a dynamic application.

One way to pass information between pages is to use a query string. That’s the long line of text after the ‘?’ in a URL. Kind of like this.

http://www.google.com/search?hl=en&q=widgets&btnG=Google+Search

That’s a standard query string attached to a Google search. It sends a few values to the new page – hl (en), q (widgets), and btn (Google Search). These values are then used to determine what is displayed on the new page.

In PHP, these values are automatically stored in an associative array – the $_GET array. To make these values easily available to our Javascript code, we can write a function to do the same thing.

The Structure of a Query String

In order to break a query string down, we need to understand the rules for building one.

A query string always starts with ‘?’. This separates the query string from the actual URL.

This is followed by key-value pairs, like “key=value”. If there is more than one key-value pair, they are separated by an ampersand – “key1=value1&key2=value2″.

Finally, these values are url_encoded. Special characters – like spaces, ampersands, and equal signs – are converted to code so that they don’t interfere with the URL or the query string.

Step One: Get the Request String and Separate the Query

The first thing we need to do is get the entire request string and separate out just the query string.

//  Fetch the entire request string
var href = new String(window.location.href);
var hrefParts = href.split('?');
 
//  [0] is the URL, [1] is the query string
var query = new String(hrefParts[1]);

The request string is accessible through the window.location object. We use the split method of the string class to explode it at the ‘?’. This leaves us with two parts, and we save the entire query string in the variable query.

Step Two: Get the Key Value Pairs

At this point, our query string in the variable query might look something like this:

hl=en&q=widgets&btnG=Google+Search

To get the key-value pairs, we can use another split() call. This time, we split the string at each ampersand (&). The resulting array will contain the strings “hl=en”, “q=widgets”, and “btnG=Google+Search”.

var valuePairs = query.split('&');

Step Three: Loop Through and Create an Array

Now we can loop through the array valuePairs, split each pair, and create a new array where each value is indexed by its key. This gives us a nicely indexed array just like PHP would.

var getArray = new Array();
 
for each (var pair in valuePairs) {
  // [0] = key, [1] = value
  var tempPair = pair.split('=');
 
  // Unescape converts the text back from URL encoding
  getArray[tempPair[0]] = unescape(tempPair[1]);
}

At this point, getArray[] should hold all of the values in our query string.

Why Bother?

Good question. If PHP (and other server side scripts) automatically parse query strings, why should we bother using Javascript for it?

One reason may be to use query strings to pass information on pages that don’t have any server side scripting enabled. I was looking into a web design competition for high school students, and it doesn’t allow any server-side scripts – only HTML, CSS, and Javascript.

With this method, we could use query strings to bring a little dynamism to the party.

This is also helpful for reading query strings in general – not just the one in the request string. For example, if you use Ajax to get a value from a php script, how is the output formatted?

It may be plain text if it’s just one variable, or it may be in an XML format. If the output is just a handful of key-value pairs, it might be easier and more efficient to create a query string and parse it with this function.

Or… maybe it’s just fun to say “I can do this.” That’s a good enough reason for me.

And as usual, here’s the full function, in case you had some trouble.

function parseQueryString(fullHref) {
  var hrefParts = fullHref.split('?');
 
  //  [0] is the URL, [1] is the query string
  var query = new String(hrefParts[1]);
 
  var valuePairs = query.split('&');
  var getArray = new Array();
 
  for each (var pair in valuePairs) {
    // [0] = key, [1] = value
    var tempPair = pair.split('=');
 
    // Unescape converts the text back from URL encoding
    getArray[tempPair[0]] = unescape(tempPair[1]);
  }
  return getArray;
}
 
//  To use it, pass the request string or another href
//  to the function.  It returns the array.
var href = new String(window.location.href);
var getArray = parseQueryString(href);

However, one reader asked if it was possible to enable a client-side cache of a dynamically resized image. It surely is, and it’s very simple.

Dynamic Image Resizing: Revisited

If you’ve got no clue how to resize an image in PHP, then you ought to go back and re-read the original article. For the rest of you, here’s a quick refresher on what happens.

Our script takes a filename as a $_GET parameter. If the file exists, the script loads it in as an image resource. Using the GD library, we create a new image resource that is the proper size.

Finally, we use a content-type header to tell the browser to interpret the data as an image and we output the image data. Like this…

header("content-type: image/png");
imagepng($dst_img);

Enabling a Client Side Cache

In order to enable a client-side cache, all we need to do is add an extra header to the mix.

There is a set of headers in HTTP to handle this sort of need – Cache-Control. You can use this to enable caching, disable caching, and set some restrictions on what can be cached for how long.

The option we’re most interested in is max-age=[seconds]. This response header is sent along with the data to tell the browser that it can re-use a cached copy as long as it is no older than the specified age.

To enable this with PHP, add another header() call before the imagepng() call, and set a Cache-Control header with an appropriate max-age. Like so…

header("Cache-Control: max-age=3600");
header("content-type: image/png");
imagepng($dst_img);

Keep Request Queries Consistent

With this system, you could set a pretty long max-age for the cache. Assuming that the original image never changes, the user could cache a resized copy for months and your script would be happy.

However, you need to keep your query strings consistent for this to work. Since your request includes a query string, that full string is included in the location that is cached.

According to your browser, it’s not the image that is cached, it’s the location…

http://www.earn-web-cash.com/scripts/resize-image.php?image=http://www.earn-web-cash.com/wp-content/uploads/2008/01/dzone-screenshot.png

If you were to change the query string in any way – leaving out the www, for example – the browser will think it is fetching a new resource and it won’t consult the cache.

This is especially important if you include size parameters in the query string to dynamically choose the new size. You would need to be careful to keep the parameters in the same order every time for the cache to work properly.

The solution, it turns out, is very simple.

Why Randomize Ads?

There are a few reasons you might want to do this.

If you’re looking into changing the theme of your AdSense ad, you may want to test the two themes against each other. By giving each theme approximately 50% of the impressions for a given time period, you can make some direct comparisons between their performance.

Or maybe you and a friend both run a website, so you want to split the advertising time between two AdSense publisher ids. That can be done too.

How the AdSense Code Works

Before we randomize it, let’s take a look at how the AdSense code works.

Here’s the snippet of code that creates the skyscraper on the left side of this page.

<script type="text/javascript"><!--
google_ad_client = "pub-2399151883698113";
/* Web Cash Tall Skyscraper */
google_ad_slot = "8702750734";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

You’ll notice two major pieces to this code. The first piece – in the first <script> element – defines the ad unit’s properties. It sets google_ad_client (your publisher id), google_ad_slot (the saved ad unit’s id with color info), google_ad_width, and google_ad_height.

The second section – the script element with src “show_ads.js” – actually displays the ad based on the variables that were set previously.

In order to vary the type of ad shown, we need to come up with a conditional statement to vary the google_ad_client/slot/width/height settings.

The Javascript Code…

And here’s the moment you’ve all been waiting for – the Javascript code to randomize which ad is shown.

<script type="text/javascript">
<!--
if (Math.random() > 0.5) {
  google_ad_client = "pub-2399151883698113";
  google_ad_slot = "5396010225";
  google_ad_width = 250;
  google_ad_height = 250;
} else {
  google_ad_client = "pub-2399151883698113";
  google_ad_slot = "3900536874";
  google_ad_width = 250;
  google_ad_height = 250;
}
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

You’ll notice that there’s an if/else statement, and each branch of the conditional statement defines a different ad to display. The results of that conditional statement rely on the outcome of Math.random().

Previously, we built a function to get a useful random number out of Math.random(). This is actually a situation where we can use the value from Math.random() just the way it is.

Math.random() generates a random value between 0 and 1. In other words, it gives you a probability. By checking that Math.random() is greater than 0.5, the statement should evaluate to true approximately 50% of the time.

We could also make the rotation more lop-sided. For example (Math.random() > 0.70) would be true 30% of the time. Therefore the first ad would be displayed 30% of the time, while the second ad would be displayed 70% of the time.

I hope you weren’t looking for something more complicated because, well, it isn’t. It’s just that simple.

We’ve developed mathematical formulas to help us determine the number of possible combinations – and therefore the possibility of getting any single combination – but how can we generate a list of the actual combinations?

Find the Number of Combinations: the Binomial Coefficient

Previously, we looked at how to find the total number of combinations.

Mathematically, we can use the binomial coefficient to figure this out. With a given set size (i.e. 52 cards) and a given sample size (i.e. 7 cards per hand), we can write the equation – (52 Choose 7). We could then re-write the equation as (52! / (7! * 45!) ).

In order to calculate this, we found the most efficient way was to construct two loops. The first loop calculated the numerator – after having canceled out all of the numbers contained in 45!. We then calculated the numerator by looping through 7!. With simple division, we come up with the answer.

Listing the Actual Combinations

A more interesting task, though, is to figure out how to generate a list of these combinations. To do that, let’s take a look at a manually generated list – (6 Choose 3) – and look for a pattern.

Here’s the first few combinations…

123
12 4
12  5
12   6
1 34
1 3 5
1 3  6
1   45
1   4 6
1    56
 234
 23 5

You’ll notice that there’s a pattern and that the combinations seem to be developing sequentially. If we can understand that pattern and write a script to repeat it, we’ll have done our job.

Here’s the gist of the pattern. We look at the last number. If we can increment that, we do. If not, we look back one number. If we can increment, we do. If we increment that number, we “rewind” the next number to be equal to it plus one.

For example, look at this series.

12   6
1 34

We started by incrementing the last number until it maxed out at 6. Then we moved back one space, incremented that number, and set the other number equal to one greater than that. The same thing happens when the last two numbers max out.

1   56
 234

You move back to the number that can be incremented, increment it, and then set the other numbers to one greater than the number incremented.

Using Hard-coded Loops

The easy (and cheating) way to do this is to hard code a series of nested loops that follow this pattern.

The general formula is (k Choose n) – where k is the total number of items in the set and n is the sample size being taken. We will need to create n nested loops – represent each item being chosen in our sample set.

The outer loop will go from 1 to k – (n – 1). Why? Because at k – (n – 1), we can’t increment the outer number anymore. Imagine the real numbers are (6 Choose 3). Once the outer loop gets to 4, we won’t be able to increment it any further – we’ll be at the final combination, 4, 5, 6.

The inner loop will have a beginning value that depends on the outer loop. If the outer loop is in its first iteration, the first inner loop starts at 2. When the outer loop is in its second iteration, the first inner loop starts at 3. It’s always one greater. It’s maximum value is always the same – k – (n – 2) – for the same reason we created the upper limit for the outer loop.

This continues until we get to the inner-most loop.

Here’s what these nested loops might look like in PHP, generating the combinations for (6 Choose 3).

for ($a = 1; $a <= (6 - 2); $a++) {
  for ($b = ($a + 1); $b <= (6 - 1); $b++) {
    for ($c = ($b + 1); $c <= (6 - 0); $c++) {
      echo $a . ' ' . $b . ' ' . $c . "\r\n";
    }
  }
}

You’ll see that that script outputs the correct 20 combinations for (6 Choose 3).

Can We Improve On That?

Surely we can. The main problem here is that we’ve hard-coded the loops. This is ok for a short-term solution and a small number of items being chosen.

What if you had to choose twenty items from a larger set? You’d have to hard-code twenty loops. It makes the code a bit more unseemly. This is also inflexible – you’ll have to change the code every time you have a different problem.

Instead, we need to look for a generalizable solution. This is always the best bet, but sometimes it can be tempting to look for a one-off short term solution because it’s more readily visible.

There is, however, a generalizable solution to this problem. The key lies in creating a function that finds the next combination using the sequential method outlined above. It takes a combination and returns a combination – and you can continuously call the function to iterate through all of the combinations.

Think on that for a while. It’s an interesting challenge. I’ll explain a solution to it 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.

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.

As others have pointed out, this can be counter-productive. People don’t like to read articles that have just one Digg – they seem unpopular.

So here’s a solution: use the Conditional “Digg This” WordPress Plugin to only show the Digg Badge for articles that have a certain number of Diggs.

Why Shouldn’t You Show the Digg Badge on Every Article?

It’s easy enough to plaster the Digg Badge in your template or use a plug-in to add it to every post. Most of your posts aren’t going to be popular though. You’ll get at most one or two Diggs… nothing to write home about.

When a user opens your article, he or she might be impressed by “100 Diggs.” He or she definitely won’t be impressed by “1 Digg.” That’s a hint that your article wasn’t anything special – so why should the reader keep going?

Using the Plugin to Only Show the Badge on Popular Articles

The Conditional Digg This plug-in was designed to address this issue.

All you need to do is download the source code, upload it to your plugins directory, unpack the tar.gz, and click “Activate.” You don’t need to modify any settings or insert anything into your template. It’s all automated.

How Does It Work?

The basic concept behind the plugin is this:

• Load a story in your WordPress Blog
• Check the Digg API to see how many diggs the article has
• If the article has 10 or more diggs, show the badge…
• Otherwise, leave it alone.

Originally, I coded the plug-in to use a php function to access the API and check the number of Diggs each article had as it loaded. This worked perfectly – but it took a while. Sometimes, the API is slow to respond. If the API took 8 seconds to spit back a response, that meant your page would take 8 extra seconds to load up.

Even if the API was responding quickly, this was a problem for the front page and category pages. At best, the API takes about .25 to .5 seconds to respond – and with 10-15 checks on a page… you’re still waiting a good long time for the page to load.

Load First, Check the API Later

The solution I came up with was to use some nifty AJAX to perform the API checking behind the scenes.

The plug-in creates an AJAX request for each article. It sends information to a php script which accesses the Digg API behind the scenes. The page loads up instantly and AJAX will quietly do its thing. When the response is ready, it’ll change the page to include the Digg This badge if necessary.

So, the next time you want to display a “Digg This” badge on your article, think about how many diggs your article has already. Or, use the Conditional “Digg This” WordPress Plugin to automatically add a badge to your popular articles.