Online Documentation Server
 ÏÎÈÑÊ
ods.com.ua Web
 ÊÀÒÅÃÎÐÈÈ
Home
Programming
Net technology
Unixes
Security
RFC, HOWTO
Web technology
Data bases
Other docs

 


 ÏÎÄÏÈÑÊÀ

 Î ÊÎÏÈÐÀÉÒÀÕ
Âñÿ ïðåäîñòàâëåííàÿ íà ýòîì ñåðâåðå èíôîðìàöèÿ ñîáðàíà íàìè èç ðàçíûõ èñòî÷íèêîâ. Åñëè Âàì êàæåòñÿ, ÷òî ïóáëèêàöèÿ êàêèõ-òî äîêóìåíòîâ íàðóøàåò ÷üè-ëèáî àâòîðñêèå ïðàâà, ñîîáùèòå íàì îá ýòîì.




Previous Table of Contents Next


Figure 25-3.  The initial screen of Netris Deluxe, as printed by the drawScreen() function.


Figure 25-4.  The light gray shape is the initial position when it enters the board, and the darker one is the shape’s position after being rotated immediately afterwards.

Global Statements

// array to hold number of shapes used from each type
var statistics = new Array(7)
for (var shapeNum = 0; shapeNum < 7; ++shapeNum) {
 statistics[shapeNum] = 0
}

Tetris is based on seven shapes, so an array of seven elements named statistics is created first, and its elements are 0-initialized. The first element, statistics[0], is associated with the first shape, and so forth. The array holds the shape statistics from the beginning of the game, so the element statistics[2], for example, holds the number of times shape #3 appeared.

// set pause to false

var paused = false
// game is currently running
var timerRunning = false

// no shape currently falling
var shape = –1
// timer is not running
var timerID = null

Since the game is paused only when the user clicks the Pause button, we set the paused variable to false. The second variable, timerRunning, is also set to false, as no time out has been set by the setTimeout() method. The shape variable normally holds the index of the shape that is currently falling down on the screen. It is initialized to –1, indicating that no shape is falling yet (the game has not started). Another global variable, timerID, is initialized to null.

// initialize image variables for seven shapes
var on = new Array()
on[0] = new Image(12, 12)
on[1] = new Image(12, 12)
on[2] = new Image(12, 12)
on[3] = new Image(12, 12)
on[4] = new Image(12, 12)
on[5] = new Image(12, 12)
on[6] = new Image(12, 12)

// create a transparent block
var off = new Image(12, 12)

Like the LED Sign, Netris Deluxe is based on image manipulations. In this script we create a seven-element global array named on and a variable named off, and assign an instance of the Image object to each element of the array and to the variable. Notice that all images are the same size, 12 pixels by 12 pixels. The off variable holds a transparent gif image for the background.

// set image URLs
on[0].src = "10.gif"
on[1].src = "11.gif"
on[2].src = "12.gif"
on[3].src = "13.gif"
on[4].src = "14.gif"
on[5].src = "15.gif"
on[6].src = "16.gif"
off.src = "0.gif"

After creating the Image instances, we set the src property of each instance to the URL of its image. The images for the seven color blocks (those used to construct shapes) are “10.gif”, “11.gif”, “12.gif”, …, “15.gif”, and “16.gif”. The URL of the transparent image is “0.gif”. Notice that the first character of all block images is “1”, whereas the first character of the “off image” (the transparent one) is “0”.

// get number of images already laid out in the page
var firstImage = document.images.length

// create initial screen
drawScreen()

// array of screen (10 x 19)
var ar = new Array()
for (var i = 0; i < 10; ++i) {
 ar[i] = new Array(19)
 for (var j = 0; j < 19; ++j) {
  ar[i][j] = 0
 }
}

Once the essential instances of the Image object are ready, we compute the document index of the first image. Since the document.images array starts from index 0, the index of the last image in the document, before loading the game, is document.images.length –1. The value assigned to firstImage, then, is the index of the first image of the game and is equal to document.images.length. The function drawScreen() creates the initial screen of the game, as illustrated in Figure 25-3:

The last portion of the global statements creates a simple 10 x 19 2D array. Since the actual height of a Tetris screen is 17 squares instead of 19, all shapes enter two lines above the top. This two-line margin enables the user to see the entire shape, even if he or she rotates it immediately upon entering the game (17th row). Figure 25-4 shows the position of a “line” shape when it enters a 17+2-row board, and its position after an in-place rotation (center of rotation is on the 17th row). It clearly demonstrates that the two extra rows at the top are essential.

drawScreen()

The drawScreen() function simply uses document.write() statements to generate the game, as presented in Figure 25-3. Notice that we use the with(document) construct so that we can use write() rather than document.write(). The function creates several forms and buttons:

  • The first form includes the “LINES” and “LEVEL” text fields, referenced as document.lineslevel.lines and document .lineslevel.level, respectively.
  • The Start and Pause buttons are images linked with the start() and pause() functions, respectively.
  • The second form is named “stats”. It includes seven two-character text fields, named “0”, “1”, …, “5” and “6”.
  • The control panel includes direction and rotation buttons as well. The left movement button calls moveX() with the argument –1, the right movement button invokes moveX() with the argument 1, the downward movement button calls the moveY() function with no argument, and the rotation button calls the rotate() function.

computeIndex(x, y)

See the listings for the previous script for a detailed explanation of this function.

state(x, y)

// returns state of square (true / false)
function state(x, y) {
 // assign URL of image at given coordinates to local variable
 var source = document.images[computeIndex(x, y)].src
 // expression evaluates to 0 or 1
 return (source.charAt(source.lastIndexOf('/') + 1) == '0') ?
false : true
}

This function first finds the URL of the image located at the given x and y coordinates and assigns it to the local variable source. You may recall from the beginning of our discussion that the filename of an image starts with either a “0” (for the off image) or a“1” (for a color block). Since source.lastIndexOf('/') + 1 is the index of the first character of the image’s filename, the following expression evaluates to either a “1” or a “0”:

source.charAt(source.lastIndexOf('/') + 1)

This computation also applies to the case when the images are stored in the same directory in which the document resides (there is no slash in the URL expression). The source.lastIndexOf('/') evaluates to –1, and source.lastIndexOf('/') + 1 yields a 0 value, the index of the first character.

The state() function returns true if the image at the given coordinates is a block (its filename starts with a “1”), and false if it is a transparent image (its filename starts with a “0”).


Figure 25-5.  A shape can move without moving all the blocks in the shape.

   Block that did not move

   Block that moved

Previous Table of Contents Next


With any suggestions or questions please feel free to contact us