spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / column47


A DOM-Based Snakes Game, Part II (3)

Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

Loading the Game's Board

Now that the DOM is ready, we need to assign the right images to the right nodes. We first define the row loading function:

function loadRow(rowNum, gif) {
  for(var i = 0; i < maxColumnCount - 1; i++) {
    divNode.childNodes[domIndex(i, rowNum)].src = gif;
  }
}

Notice how easy it is to assign an image file name to a DOM's node. You just use an HTML attribute of the relevant tag (IMG's SRC for example) as a property of the node (always in lower case):

divNode.childNodes[domIndex(i, rowNum)].src = gif;

Notice the domIndex() function above. It converts a 2-D position (row and column) to an index into a 1-D array of divNode's childNodes. Here is the function:

function domIndex(x, y) {
  return (y * maxColumnCount + x);
}

The loadColumn() function is very similar to the loadRow() function:

function loadColumn(colNum, gif) {
  for(var i = 0; i < maxRowCount; i++) {
    divNode.childNodes[domIndex(colNum, i)].src = gif;
  }
}

We build the rectangular board area by calling the loadRow() method, once per row:

function loadBoardCore() {
  for(var i = 0; i < maxRowCount; i++) {
    loadRow(i, coreGif);
  }
}

Finally, we build the game's DOM similarly to how we did it for the sliding puzzle. The board consists of maxRowCount of rows. We append a <BR> tag to the end of each row, and thus forcing the new lines:

function buildBoard() {
  for(var i = 0; i < maxRowCount; i++) {
    addOneRow();
    addBr();
  }
}

http://www.internet.com

Produced by Yehuda Shiran and Tomer Shiran

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint


Created: August 30, 1999
Revised: August 30, 1999

URL: http://www.webreference.com/js/column47/load.html