Wednesday, February 13, 2008 @ 12:50 PM

Okay, let's start programming this game. A couple of weeks ago... no wait, a little over a month ago... I posted about the canvas. The canvas is a really great way to draw to (or animate) a Web page. So, since the iPhone does not yet support Flash, utilizing the canvas makes a lot of sense.

Since more qualified people have already written great tutorials on how to use the canvas, it may behoove you to read up a bit if you become confused with what follows.

Let's code the grid. There are two ways we can display it. We can use the canvas to draw the grid. Or we can create 225 17x17 pixel DIVs and float them all to the left within a 270x270 pixel parent DIV. The first option sounds easier, but we're actually going to do a little of both.

First we'll use the canvas to draw the representation of the grid. Here is some simplified code:

HTML

<div id="squares"></div>
<canvas id="crossword" width="269" height="269"></canvas>

Javascript

var ctx = document.getElementById('crossword').getContext('2d');
ctx.fillStyle = '#ffffff';
for (var i = 0; i < 225; i++) {
     ctx.fillRect((i-Math.floor(i/15)*15)*18, Math.floor(i/15)*18, 17, 17);
}

The code above will simply draw out 225 white squares, positioned exactly where we want them on the grid. It does not yet determine which squares should be black (the regions of the grid that are not part of the puzzle). We're ultimately going to read from an XML file to understand which squares are white and which are black. We'll get to that later.

The user will be interacting with the grid in order to read and solve clues, so we also need a separate clickable region for each of the 225 inner squares. That's where the second option comes into play. Let's add that logic to the for loop:

Javascript

for (var i = 0; i < 225; i++) {
     ctx.fillRect((i-Math.floor(i/15)*15)*18, Math.floor(i/15)*18, 17, 17);

 
     var newSquare = document.createElement('DIV');
     document.getElementById('squares').appendChild(newSquare);
     newSquare.className = 'square';
     newSquare.id = i;
     newSquare.name = i;
     newSquare.onclick = function() {
          // code to execute onclick
     };
 
}

We've given each "pressable" DIV an id and name so that "onclick" we can figure out which clues they belong to. We'll get to that later as well.

For today, that is all. We're going to start slow and ramp up towards the end. Tomorrow I'll provide a neat trick for embedding images into Javascript so that you don't have to wait for them to individually download. A great way to preload images. It's very cool.

// Ryan Jennings

Labels: crossword, game, how to, iphone development, javascript