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.

You can use attribute selectors to style an html element that contains an attribute with the value that you declare. This allows you to do a bunch of cool stuff – like style different “input” types differently, style anchor tags with titles differently, and etc.

How does it work?

An attribute selector follows this basic formula…

[attribute="value"] { style information... }

Like an id or class selector, you can use it alone (as in the example above), or attach it to a specific html element.

How can we use it? Here are a few examples.

Style Links with Title Elements Differently

You could use this to give users a hint that an anchor tag or link has a title element. This way they know to hover over the link and read the tooltip.

a[title] { border-bottom: thin dotted blue; }

That declaration gives any anchor tag containing a “title” attribute a thin dotted blue underlining. You may have to tweak it a bit to make sure the normal anchor-underlining doesn’t interfere with it.

Style Particular Input Types on Forms

You can use this to style Submit buttons, Text Inputs, etc. – independent of other input types.

input[type="submit"] {  background-color: blue; }

This simple declaration gives all Submit buttons a blue background color. Fairly silly, but the point is the declaration – not the actual styling. You could do something similar with these declarations…

input [type="text"] { /* style information */ }
input [type="password"] { /* style information */ }

Style Internal Links Different from External Links

This is a really nifty trick… but unfortunately it requires a bit of CSS 3. This will probably invalidate your CSS, and your mileage may vary.

It’s still interesting to try out.

You can use “^=” instead of “=” to signal that the browser should match any element with the given attribute that contains the quoted string. It doesn’t have to be an exact match. So you can use “^=’mydomain.com’” to match any links that point to the domain you’re working on.

Like so…

a[href^="earn-web-cash.com"] { /* style information */ }

You could use this to given internal links a slightly different color – some kind of queue to help the user differentiate between internal and external links.

For a longer list of ways to use this neat little trick, check out this post Hip to Be Square. There’s also a list of the different ways to search for values (like ^=) – which will be valid in CSS 3.