Crossword Web App, Part 3 0 Comments
This part of the tutorial makes mention of the canvas tag. When Mac OS X 10.4 was released, Safari began supporting a new feature called the canvas. The canvas (refered to as CSS Canvas on the Safari 4 features page) provides a method for drawing arbitrary content in a Web page. This extension lets you reserve an area of your web page or widget and use rendering calls like those found in Quartz (or ActionScript) to paint complex paths and shapes in that area. CSS Canvas was heavily utilized by the initial offering of Dashboard widgets released by Apple.
Safari, Firefox, Dashboard, and all other WebKit-based applications, including Safari for the iPhone, support CSS Canvas. There’s even rumor that Internet Explorer 9 will use WebKit, allowing it access to CSS Canvas as well. So it really makes a lot of sense to start learning how to use CSS Canvas now, so that you can build really cool Web sites that take advantage of it later.
Part 3: Jumping Into Code
Let’s start programming this game. The canvas tag, supported by Firefox and Safari, is a really great way to draw to (or animate) a Web page. Since the iPhone does not yet support Flash, utilizing the canvas makes a lot of sense. Since more qualified people than ! 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 17×17 pixel div elements and float them all to the left within a 270×270 pixel parent div. The first option sounds easier, but we’re actually going to do a little of both.
Note: Yesterday’s illustration stated that the grid takes up 271×271 pixels, yet we mention here that the outer div that holds all of the inner squares is 270×270 pixels. This is because the inner squares do not include the outer stroke that surrounds the grid. The outer stroke (and all inner grid lines) are part of the background image. The inner squares have a 1px left margin to separate them from one another, so: (1+17)*15 = 270.
First we’ll use the canvas to draw the visual part of the grid. Here is some simplified code:
<div id="squares"></div><canvas id="crossword" width="269" height="269"></canvas>Figure 1. Simplified CSS Canvas implementation
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);}Figure 2. JavaScript to draw the grid to the canvas
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. Let’s add that logic to the for loop.
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};}Figure 3. JavaScript to create clickable (touchable) squares for the grid
We’ve given each “touchable” div an id and name so that, when touched, we can figure out which clues they belong to. More on that later.
For today, that is all. Tomorrow I’ll provide a neat trick for embedding images directly into a Web page. It’s a great way to “preload” images. Very cool indeed.
—Ryan
