spacer

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

home / experts / javascript / column47


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

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

Winning Points

The user earns points by eating the target apple. Every time the snake hits its target, it is extended by 1 and a new target appears on the board. Here is the function that process collisions with the target:

function processTargetCollision() {
  if (snakeRowPos[1] == targetRow && snakeColumnPos[1] == targetColumn){
    snakeLength++;
    snakeRowPos[snakeLength] = afterTailRow;
	snakeColumnPos[snakeLength] = afterTailColumn;
	loadTarget();
	divNode.childNodes[domIndex(afterTailColumn, afterTailRow)].src =
     snakeGif;
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
	score++;
	scoreThisLevel++;
	window.status = "Turn with (u, h, n, k) or with NumLock
     (8, 4, 2, 6); Your score is " + score;
  // (The above two lines should be joined as one line.
  // They have been split for formatting purposes.)
    if (scoreThisLevel == qualifyingScore) {
	  scoreThisLevel = 0;
	  interval = interval/2;
	  clearInterval(cycleObj);
	  setInterval("moveOne()", interval);
	}
  }
} 

Detecting a collision is simple. We just check if the snake's head coordinates coincide with the target's coordinates:

if (snakeRowPos[1] == targetRow && snakeColumnPos[1] == targetColumn)

We first increment the snakeLength. Then we set the coordinates of the newly-created square to afterTailRow and afterTailColumn. The trick here is that we extend the snake to where the snake tail was before the last move. We then load the new target via the loadTarget() function. The last statement dealing with the target is the one that fill the tail with the right GIF file:

divNode.childNodes[domIndex(afterTailColumn, afterTailRow)].src = snakeGif;

The rest of the function deals with the scoring. We first add one point to the score, and to the scoreThisLevel. We also update the message on the window status. Finally, when the scoreThisLevel reaches a certain qualifyingScore, we want to double the game's speed. Notice that in order to set the new interval, you need to clear the previous one, and set it again with the new interval:

if (scoreThisLevel == qualifyingScore) {
  scoreThisLevel = 0;
  interval = interval/2;
  clearInterval(cycleObj);
  setInterval("moveOne()", interval);
}

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/win.html