start()

// function that starts game (*works with global variables only*)
function start() {
 // accept level from user (no validation to save space)
 tempLevel = prompt("Enter level to begin game (0 – 10):", "0")

// if user cancelled prompt
 if (!tempLevel)
  // abort function
  return

 // tempLevel is the actual level
 level = tempLevel

 // clear states, blocks, and timer
 clearActive()
 flood(0)
 clearTimeout(timerID)

 // clear statistics
 for (var i = 0; i < 7; ++i) {
  statistics[i] = 0
 }

 // convert input from string to integer
 level = parseInt(level)

 // calculate speed
 speed = 800 – (level * 80)

 // game begins with no lines completed!
 lines = 0

 // game starts
 timerRunning = true

 // game is not paused for sure
 paused = false

 // start actual playing
 play()
}

This function is very well documented and explained. Use it as an example for how to comment a script.

dropLines()

// check if lines have been completed and drop accordingly
function dropLines() {
 // on line has been found
 var aLine = –1

 // scan screen from top to bottom and stop when first complete
  line is found and assigned
 for (var y = 0; y < 19; ++y) {
  if (isLine(y)) {
   aLine = y
   break
  }
 }

 // if a complete line has been found
 if (aLine != –1) {
  // increment lines
  lines++

  // if enough lines have been made increment level
  if (lines > level * 10 + 9)
   level++

  if (level == 11)
   alert("You are a champion!")

  // scan screen from one line above the complete one to top
 of screen
  for (y = aLine – 1; y >= 0; --y) {
   for (var x = 0; x < 10; ++x) {
// if current square is on
if (state(x, y))
 // call function to warp it down
 warp(x, y, x, y + 1)
else {
 // clear square below (similar to a warp because
   initial square is off)
 setSquare(x, y + 1, 0)
}
   }
  }

  // recursive call (maybe more than one line was completed)
  dropLines()
 }
 // no square should be active
 clearActive()
}

The dropLines() function loops over the board rows, from top to bottom, searching for fully blocked rows to clear. After finding a line, all blocks above the line are warped one position downward, and the dropLines() function is called recursively to search and clear other rows. Since there are no active shapes after clearing, the clearActive() function is invoked to clear all board squares. The script also checks if the user has completed enough lines to up the current level of play.

play()

// main function responsible for game action
function play() {
 // place values in form fields (display)
 document.lineslevel.lines.value = lines
 document.lineslevel.level.value = level
 // if no shape is falling
 if (noActive()) {
  // check for line completions and drop them
  dropLines()

  // insert a new shape (if shape is not able to enter)
  if (!insertShape()) {
   // flood screen to black
   flood(1)

   // flood screen to blank
   flood(0)

   // display final results
   alert('Game over!\r\rlevel = ' + level + '\rlines = '+
   lines)

   // clear timeout
   clearTimeout(timerID)

   // timer is not running
   timerRunning = false

   // terminate function (and game)
   return
  }
 } else
  // a shape is currently falling so move it one square downward
  moveY()
 // call after speed milliseconds
 timerID = setTimeout('play()', speed)
}

characteristics(x, y)

// constructs an object representing a specific position
function characteristics(x, y) {
 // create property to hold status (block or empty)
 this.state = state(x, y)

 // if block found in specified position
 if (state(x, y)) {
  // local variable to hold URL of image at specified location
  var src = document.images[computeIndex(x, y)].src

  // local variable to hold color (0, 1, 2, ..., 6)
  var color = src.charAt(src.lastIndexOf('/') + 2)

 } else
  // no color because no block found at specified position
  color = –1

 // convert color from string to integer and assign to property
 this.color = parseInt(color)
 // create property to hold square's current state (active or not,
   1 or 0)
 this.activity = ar[x][y]
}

fullMap()

// contructs a map of entire board and status
function fullMap() {
 for (var x = 0; x < 10; ++x) {
  this[x] = new Array(10)
  for (var y = 0; y < 19; ++y) {
 this[x][y] = new characteristics(x, y)
  }
 }

 this.shape = shape
}

pause()

// pause and unpause game
function pause() {
 // if game is not paused
 if (!paused) {
  // stop timer
  clearTimeout(timerID)

  // game is now paused
  paused = true

  // create global map of board
  map = new fullMap()

  // flood board so player cannot see current status
  flood(1)

  // no active blocks so user cannot move anything with buttons
  clearActive()

  alert('Oh no, not the boss...')
 } else {
  // return board to status before game was paused, according
to the map object
  for (var x = 0; x < 10; ++x) {
   for (var y = 0; y < 19; ++y) {
if (!map[x][y].state)
   document.images[computeIndex(x, y)].src =
  off.src
else
   document.images[computeIndex(x, y)].src=
 on[map[x][y].color].src

ar[x][y] = map[x][y].activity
   }
  }
  shape = map.shape

  // game is no longer paused
  paused = false
  // play ball!
  play()
 }
}

The pause() function is responsible for pausing and unpausing the game, depending on its current state.

MUSIC

The background music featured by Netris Deluxe is embedded via a Netscape Navigator 3.0 HTML statement:

<EMBED SRC="tetris1a.mid" AUTOSTART=TRUE LOOP=TRUE HIDDEN=TRUE>

Summary

In this chapter we discussed the Image object, and how it is implemented in client-side JavaScript. Bear in mind that Navigator 2.0x and MSIE 3.0 do not support this object, so test carefully the version you are going to use. Mastering the usage of the Image object and the document.images array is not trivial, but will become easier with experience. This is the reason why we included three image-based comprehensive demonstrations, including a 1,000-line script (Netris Deluxe). JavaScript is very useful when you want to interact with the user (as in games), or when the animation is customized (as in the updating clock and in the LED sign). Plain animation is better created with gif89, rather than with JavaScript.