Online Documentation Server
Net technology
Web technology
Data bases
Other docs



Вся предоставленная на этом сервере информация собрана нами из разных источников. Если Вам кажется, что публикация каких-то документов нарушает чьи-либо авторские права, сообщите нам об этом.

Previous Table of Contents Next


// 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

 // tempLevel is the actual level
 level = tempLevel

 // clear states, blocks, and timer

 // 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

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


// 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

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

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

  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)
 // no square should be active

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.


// 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

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

   // flood screen to blank

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

   // clear timeout

   // timer is not running
   timerRunning = false

   // terminate function (and game)
 } else
  // a shape is currently falling so move it one square downward
 // 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]


// 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 and unpause game
function pause() {
 // if game is not paused
 if (!paused) {
  // stop timer

  // game is now paused
  paused = true

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

  // flood board so player cannot see current status

  // no active blocks so user cannot move anything with buttons

  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 =
   document.images[computeIndex(x, y)].src=

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

  // game is no longer paused
  paused = false
  // play ball!

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


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



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.

Previous Table of Contents Next

With any suggestions or questions please feel free to contact us