Ajax Dice Game

Part 1

We saw that we could use the jQuery load() function, to dynamically load a piece of an html document into another html document without refreshing the page.

The next step is to load something less static than html into the page. You may remember the php dice game from a different class. Lets use it to test this functionality.

If you download and unzip the ajaxdice folder and put it in the htdocs folder you will find a bunch of files. Included are the pictures of the dice and the dicegame.php file (among the other files).

If you run the dicegame.php file through the local host, you will get two pairs of dice. One for player and one for house.

With each reload of the page, you will get a different set of dice and potentially a different outcome for the game.

Lets review the PHP quickly.

First we have our array of images, which match the image files of the dice. The first element in the array is empty, so we don't have to worry about element #0.

We generate four random numbers - one for each die. Then we add two together for the player total and two for the house total.

Then we have PHP print a <div> to the screen and inside it we use two of our random numbers to pull two images of dice from our array and print them to the screen.

We do the same thing for the other two dice.

Finally, we determine which number was bigger and print out the correct winning statement.

If we load the index.html page through the localhost, we get a link to roll the dice.

When you roll the dice, the dicegame.php file gets loaded dynamically into the page without reloading the page.

Each click of the link reloads the php file dynamically.

If you look at the script.js file, you will see the jQuery used to load the dicegame.php file.

Its pretty straight forward.

Also notice, if you look at the stylesheet, we can create styles for the divs that get loaded dynamically. That is where the red border is coming from.