Помогни ни да направим Uroci.net по - богат! Добави урок

Тетрис игра с HTML

saskenor   трудност:    видян: 8733

Сега в този урок ще ви покажа как да си направите ТЕТРИС игра.


Първо правим нов текстов файл и в него добавяме следното:


<HTML>
<HEAD>
 <TITLE>JavaScript - Tetris</TITLE>
<script LANGUAGE="JavaScript">
<!--

// Copyright (c) 1996-1997 Wolf. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.geocities.com/~yehuda/

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

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

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

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

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

// draw initial empty screen
function drawScreen() {
    with (document) {
        // center entire game
        write('<CENTER>')

        // start main table
        write('<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0><TR><TD>')

        // create board (10 x 19)
        for (var i = 0; i < 19; ++i) {
            for (var j = 0; j < 10; ++j) {
                write('<IMG src=' + off.src + ' HEIGHT=' + off.height + ' WIDTH=' + off.width + '>')
            }
            write('<BR>')
        }

        // close table cell
        write('</TD><TD VALIGN="top" ALIGN="center">')

        // make small header ("Netris Deluxe")
        write('<B><FONT SIZE=+2>N</FONT>ETRIS <FONT SIZE=+2>D</FONT>ELUXE</B><BR>')
    
        // create form for lines and level displays
        write('<FORM NAME="lineslevel"><TABLE BORDER=0 CELLPADDING=5 CELLSPACING=0>')

        // make "LINES" table cell and header
        write('<TR><TD WIDTH=100 ALIGN="center"><FONT SIZE=2>LINES</FONT><BR><INPUT TYPE="text" NAME="lines" VALUE="" SIZE=5></TD>')

        // make "LEVEL" table cell and header        
        write('<TD WIDTH=100 ALIGN="center"><FONT SIZE=2>LEVEL</FONT><BR><INPUT TYPE="text" NAME="level" VALUE="" SIZE=5></TD></TR>')

        // create start button link
        write('<TR><TD WIDTH=100 ALIGN="center"><A href="javascript:start()" onMouseOver="window.status='Start game'; return true">')
    
        // create start button image
        write('<IMG src="start.gif" WIDTH=72 HEIGHT=24 BORDER=0></A></TD>')
    
        // close start + pause table and form
        write('</TABLE></FORM>')

        // create table for shape statistics (two rows, seven columns)
        write('<FORM NAME="stats"><TABLE BORDER=0 CELLPADDING=5 CELLSPACING=0><TR>')

        // put one block of each type in each cell of upper row
        for (var k = 0; k < 7; ++k) {
            write('<TD ALIGN="center"><IMG src="' + on[k].src + '" HEIGHT=' + on[k].height + ' WIDTH=' + on[k].width + '></TD>')
        }

        // start new table row
        write('</TR><TR>')

        // create 7 text fields named "0", "1", "2", ..., "6"
        for (var l = 0; l < 7; ++l) {
            write('<TD ALIGN="center"><INPUT TYPE="text" SIZE=2 VALUE="0" NAME="' + l + '"></TD>')
        }

        // close statistics table and form
        write('</TR></TABLE></FORM>')

        // close table cell for header, start + pause buttons, and statistics, and start new row in main table
        write('</TD></TR><TR><TD>')

        // center control panel (left, right, down, rotate)
        write('<CENTER>')

        // organize control panel in a table
        write('<TABLE BORDER=0>')

        // create left table cell and button
        write('<TR><TD><A href="javascript:moveX(-1)" onMouseOver="window.status='Move left'; return true" onMouseOut="window.status=''; return true"><IMG src="left.gif" WIDTH=24 HEIGHT=24 BORDER=0></A></TD>')
        
        // create rotate table cell and button
        write('<TD><A href="javascript:rotate()" onMouseOver="window.status='Rotate'; return true" onMouseOut="window.status=''; return true"><IMG src="rotate.gif" WIDTH=24 HEIGHT=24 BORDER=0></A></TD>')
    
        // create right table cell and button
        write('<TD><A href="javascript:moveX(1)" onMouseOver="window.status='Move right'; return true" onMouseOut="window.status=''; return true"><IMG src="right.gif" WIDTH=24 HEIGHT=24 BORDER=0></A></TD></TR>')
            
        // close table for control panel
        write('</TABLE>')

        // close center of control panel
        write('</CENTER>')

        // close control panel table cell (main table) and create another main table cell with credits
        write('</TD><TD ALIGN="center"><BR><FONT SIZE=2></FONT><BR><FONT SIZE=2></FONT></TD></TR></TABLE>')
        
        // close center of main table
        write('</CENTER>')
    }
}

// return index of image according to given x and y coordinates
function computeIndex(x, y) {
        return (y * 10 + x) + firstImage
}

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

// set square to 1 / 0
function setSquare(x, y, state) {
    if (state == 0)
        document.images[computeIndex(x, y)].src = off.src
    else
        document.images[computeIndex(x, y)].src = on[shape].src

    // if state is 1 square is active, so 1 is assigned to ar[x][y]
     // otherwise square is not active so 0 is assigned to ar[x][y]
    ar[x][y] = state
}

// clear array so no active squares exist
function clearActive() {
    // scan entire array and assign 0 to all elements (no active squares)
    for (var i = 0; i < 10; ++i) {
        for (var j = 0; j < 19; ++j) {
            ar[i][j] = 0
        }    
    }

    // no shape is currently in screen
    shape = -1
}

// check if specified move (left or right) is valid
function checkMoveX(step) {
    // scan screen (direction does not matter)
    for (var x = 0; x < 10; ++x) {
        for (var y = 0; y < 19; ++y) {
            // if current square is active
            if (ar[x][y] == 1) {
                // check all conditions:
                // not out of range and not coliding with existing not active block
                if (x + step < 0 || x + step > 9 || (state(x + step, y) && ar[x + step][y] == 0))
                    // return false if move (new situation) is not legal
                    return false
            }
        }
    }
    
    // return true if no invalid state has been encountered
    return true
}

// check if specified move (down) is valid
function checkMoveY() {
    // only possible step is one to the bottom
    var step = 1

    // scan screen (direction does not matter)
    for (var x = 0; x < 10; ++x) {
        for (var y = 0; y < 19; ++y) {
            // if current square is active
            if (ar[x][y] == 1) {
                // check all conditions:
                // not out of range and not coliding with existing not active block
                if (y + step > 18 || (state(x, y + step) && ar[x][y + step] == 0))
                    // return false if move (new situation) is not legal
                    return false
            }
        }
    }
    
    // return true if no invalid state has been encountered
    return true
}

// move all active squares step squares on the x axis
function moveX(step) {
    // if specified move is not legal
    if (!checkMoveX(step))
        // terminate function (active blocks are not moved)
        return

    // if left movement then scan screen from left to right
    if (step < 0) {
        for (var x = 0; x < 10; ++x) {
            for (var y = 0; y < 19; ++y) {
                // if current square is active
                if (ar[x][y] == 1)
                    // call function to handle movement
                    smartX(x, y, step)
            }
        }
    } else

    // if right movement then scan screen from right to left
    if (step > 0) {
        for (var x = 9; x >= 0; --x) {
            for (var y = 0; y < 19; ++y) {
                // if current square is active
                if (ar[x][y] == 1)
                    // call function to handle movement
                    smartX(x, y, step)
            }
        }
    }
}

// responsible for the blocks' horizontal movement
function smartX(x, y, step) {
    // if moving one step to the left
    if (step < 0)
        // if the destination square needs to be turned on explicitly
        if (ar[x + step][y] == 0)
            // if there is a block to the right of the current block
            if (x != 9 && ar[x - step][y] == 1)
                // set square to the left on without clearing current block
                setSquare(x + step, y, 1)
            else
                // clear current block and turn square to the left on
                warp(x, y, x + step, y)
        else
            // if there is no block to the right of the current block
            if (x == 9 || ar[x - step][y] == 0)
                // clear current block
                setSquare(x, y, 0)

    // if moving one step to the right
    if (step > 0)
        // if the destination square needs to be turned on explicitly
        if (ar[x + step][y] == 0)
            // if there is a block to the left of the current block
            if (x != 0 && ar[x - step][y] == 1)
                // set square to the right on without clearing current block
                setSquare(x + step, y, 1)
            else
                // clear current block and turn square to the right on
                warp(x, y, x + step, y)
        else
            // if there is no block to the left of the current block
            if (x == 0 || ar[x - step][y] == 0)
                // clear current block
                setSquare(x, y, 0)
}

// move all active squares step squares on the x axis
function moveY() {
    // if specified move is not legal (shape is laid down on block or bottom panel)
    if (!checkMoveY()) {
        // active squares are not active anymore (should not be moved later)
        clearActive()

        // terminate function (active blocks are not moved)
        return
    }

    // scan screen from bottom to top
    for (var y = 18; y >= 0; --y) {
        for (var x = 0; x < 10; ++x) {
            // if current square is active
            if (ar[x][y] == 1)
                // call function to handle movement
                smartY(x, y)
        }
    }
}

// responsible for the blocks' vertical (downwards) movement
function smartY(x, y) {
    // if the destination square needs to be turned on explicitly
    if (ar[x][y + 1] == 0)
        // if there is a block above current block
        if (y != 0 && ar[x][y - 1] == 1)
            // set square below on without clearing current block
            setSquare(x, y + 1, 1)
        else
            // clear current block and turn square below on
            warp(x, y, x, y + 1)
    else
        // if there is no block above the current block
        if (y == 0 || ar[x][y - 1] == 0)
            // clear current block
            setSquare(x, y, 0)
}

// construct object containing shape
function shapeMap() {
    // set minimum and maximum coordinates to opposite (minimum and maximum found thus far)
    var minX = 9
    var minY = 18
    var maxX = 0
    var maxY = 0
    
    // scan screen to find actual minimum and maximum coordinates of active squares
    for (var y = 0; y < 19; ++y) {
        for (var x = 0; x < 10; ++x) {
            // if current coordinates reflect active square
            if (ar[x][y] == 1) {
                if (x < minX)
                    minX = x
                if (x > maxX)
                    maxX = x
                if (y < minY)
                    minY = y
                if (y > maxY)
                    maxY = y
            }
        }
    }

    // create a length property representing the x coordinate span
    this.length = maxX - minX + 1

    // create properties so hold minimum coordinates of both axisis
    this.offsetX = minX
    this.offsetY = minY

    // construct minimum array containing all active squares respectively
    for (x = 0; x <= maxX - minX; ++x) {
        this[x] = new Array()
        for (y = 0; y <= maxY - minY; ++y) {
            this[x][y] = ar[x + minX][y + minY]
        }
    }
}

// random function to return an integer between 0 and 6
function getRandom() {
    // use random number method to find integer between 0 and 8
    var randomNum = Math.round(Math.random() * 8)

    // call function again if random number is 0 or 8.
    if (randomNum == 0 || randomNum == 8)
        return getRandom()
    
    // 1 to 7 => 0 to 6
    randomNum--

    // update selected shape's statistics
    statistics[randomNum]++

    // update statistics display form (update *all* fields so user cannot enter any value in fields)
    for (var shape = 0; shape < 7; ++shape) {
        document.stats[shape].value = statistics[shape]
    }

    // return the random number
    return randomNum
}

// inserts a shape when there is no active shape
function insertShape() {
    // initialize *global* variable
    shape = getRandom()

    // The following segment checks if the selected shape has room to enter.
    // If there is no room the game is over (function return false).
    // If there is room, the function inserts the shape by setting its initial coordinates.

    if (shape == 0) {
        if (state(3, 2) || state(3, 2) || state(3, 2) || state(3, 2))
            return false
        setSquare(3, 2, 1)
        setSquare(4, 2, 1)
        setSquare(5, 2, 1)
        setSquare(6, 2, 1)
    } else

    if (shape == 1) {
        if (state(4, 2) || state(5, 2) || state(4, 3) || state(5, 3))
            return false
        setSquare(4, 2, 1)
        setSquare(5, 2, 1)
        setSquare(4, 3, 1)
        setSquare(5, 3, 1)
    } else

    if (shape == 2) {
        if (state(3, 2) || state(4, 2) || state(5, 2) || state(3, 3))
            return false
        setSquare(3, 2, 1)
        setSquare(4, 2, 1)
        setSquare(5, 2, 1)
        setSquare(3, 3, 1)
    } else

    if (shape == 3) {
        if (state(3, 2) || state(4, 2) || state(4, 3) || state(5, 3))
            return false
        setSquare(3, 2, 1)
        setSquare(4, 2, 1)
        setSquare(4, 3, 1)
        setSquare(5, 3, 1)
    } else

    if (shape == 4) {
        if (state(4, 2) || state(5, 2) || state(3, 3) || state(4, 3))
            return false
        setSquare(4, 2, 1)
        setSquare(5, 2, 1)
        setSquare(3, 3, 1)
        setSquare(4, 3, 1)
    } else

    if (shape == 5) {
        if (state(3, 2) || state(4, 2) || state(5, 2) || state(4, 3))
            return false
        setSquare(3, 2, 1)
        setSquare(4, 2, 1)
        setSquare(5, 2, 1)
        setSquare(4, 3, 1)
    } else

    if (shape == 6) {
        if (state(3, 2) || state(4, 2) || state(5, 2) || state(5, 3))
            return false
        setSquare(3, 2, 1)
        setSquare(4, 2, 1)
        setSquare(5, 2, 1)
        setSquare(5, 3, 1)
    }

    // return true because shape was able to enter screen
    return true
}

// warp several squares if possible
// initial x1, initial y1, destination x1, destination y1, initial x2, initial y2, destination x2, destination y2, etc.
function complexWarp() {
    // loop through arguments checking that each warp is valid
    for (var i = 0; i < arguments.length; i += 4) {
        // if warp is not valid
        if (!checkWarp(arguments[i], arguments[i + 1], arguments[i + 2], arguments[i + 3]))
            // terminate the function -- no squares warped
            return
    }

    // loop through arguments again -- warp squares
    for (var i = 0; i < arguments.length; i += 4) {
        // call function to warp the current square corresponding to argument coordinates
        warp(arguments[i], arguments[i + 1], arguments[i + 2], arguments[i + 3])
    }
}

// check if warp is valid (used by complexWarp function)
function checkWarp(startX, startY, endX, endY) {
    // if a destination coordinate is invalid or destination square is off
    // state(endX, endY) must be last due to short-circuit evaluation
    if (endX < 0 || endX > 9 || endY < 0 || endY > 18 || state(endX, endY))
        // return false because warp is invalid
        return false

    // return true because warp has not been proved to be invalid (it is valid)
    return true
}

// rotate the current active shape
function rotate() {
    // create instance of shapeMap object (similar to minimum 2D array reflecting active shape)
    var curMap = new shapeMap()

    // note: all arguments handed to complexWarp are explained in that function

    // if shape is 4 x 1 line
    if (shape == 0)
        // if line is in horizontal state
        if (curMap.length == 4)
            complexWarp(curMap.offsetX, curMap.offsetY, curMap.offsetX + 1, curMap.offsetY + 1, curMap.offsetX + 2, curMap.offsetY, curMap.offsetX + 1, curMap.offsetY - 1, curMap.offsetX + 3, curMap.offsetY, curMap.offsetX + 1, curMap.offsetY - 2)
        // else line is in vertical state
        else
            complexWarp(curMap.offsetX, curMap.offsetY + 3, curMap.offsetX - 1, curMap.offsetY + 2, curMap.offsetX, curMap.offsetY + 1, curMap.offsetX + 1, curMap.offsetY + 2, curMap.offsetX, curMap.offsetY, curMap.offsetX + 2, curMap.offsetY + 2)

    // if shape is square
    if (shape == 1)
        // do not rotate shape because square does not change appearance after rotation
        return

    // if shape is L
    if (shape == 2)
        // if shape is L tilted 90 degrees to the right
        if (state(curMap.offsetX, curMap.offsetY) && curMap.length == 3)
            complexWarp(curMap.offsetX, curMap.offsetY + 1, curMap.offsetX + 1, curMap.offsetY + 1, curMap.offsetX + 2, curMap.offsetY, curMap.offsetX + 1, curMap.offsetY - 1, curMap.offsetX, curMap.offsetY, curMap.offsetX, curMap.offsetY - 1)
        else
            // if shape is L titled 180 degrees
            if (state(curMap.offsetX + 1, curMap.offsetY) && curMap.length == 2)
                complexWarp(curMap.offsetX + 1, curMap.offsetY + 2, curMap.offsetX, curMap.offsetY + 1, curMap.offsetX + 1, curMap.offsetY, curMap.offsetX + 2, curMap.offsetY, curMap.offsetX, curMap.offsetY, curMap.offsetX + 2, curMap.offsetY + 1)
            else
                // if L is titled 90 degrees to the left
                if (curMap.length == 3)
                    complexWarp(curMap.offsetX, curMap.offsetY + 1, curMap.offsetX + 1, curMap.offsetY, curMap.offsetX + 2, curMap.offsetY, curMap.offsetX + 2, curMap.offsetY + 2, curMap.offsetX + 2, curMap.offsetY + 1, curMap.offsetX + 1, curMap.offsetY + 2)
                // else L is not titled
                else
                    complexWarp(curMap.offsetX, curMap.offsetY, curMap.offsetX + 1, curMap.offsetY + 1, curMap.offsetX, curMap.offsetY + 2, curMap.offsetX - 1, curMap.offsetY + 2, curMap.offsetX + 1, curMap.offsetY + 2, curMap.offsetX - 1, curMap.offsetY + 1)
    
    if (shape == 3)
        if (curMap.length == 3)
            complexWarp(curMap.offsetX + 1, curMap.offsetY + 1, curMap.offsetX, curMap.offsetY + 1, curMap.offsetX + 2, curMap.offsetY + 1, curMap.offsetX + 1, curMap.offsetY - 1)
        else
            complexWarp(curMap.offsetX, curMap.offsetY + 2, curMap.offsetX + 1, curMap.offsetY + 2, curMap.offsetX + 1, curMap.offsetY, curMap.offsetX + 2, curMap.offsetY + 2)

    if (shape == 4)
        if (curMap.length == 3)
            complexWarp(curMap.offsetX, curMap.offsetY + 1, curMap.offsetX, curMap.offsetY, curMap.offsetX + 2, curMap.offsetY, curMap.offsetX, curMap.offsetY - 1)
        else
            complexWarp(curMap.offsetX, curMap.offsetY, curMap.offsetX + 2, curMap.offsetY + 1, curMap.offsetX, curMap.offsetY + 1, curMap.offsetX, curMap.offsetY + 2)

    if (shape == 5)
        if (curMap.length == 3 && state(curMap.offsetX, curMap.offsetY))
            complexWarp(curMap.offsetX + 2, curMap.offsetY, curMap.offsetX + 1, curMap.offsetY - 1)
        else
            if (curMap.length == 2 && state(curMap.offsetX + 1, curMap.offsetY))
                complexWarp(curMap.offsetX + 1, curMap.offsetY + 2, curMap.offsetX + 2, curMap.offsetY + 1)
            else
                if (curMap.length == 3)
                    complexWarp(curMap.offsetX, curMap.offsetY + 1, curMap.offsetX + 1, curMap.offsetY + 2)
                else
                    complexWarp(curMap.offsetX, curMap.offsetY, curMap.offsetX - 1, curMap.offsetY + 1)
            
    if (shape == 6)
        if (curMap.length == 3 && state(curMap.offsetX + 1, curMap.offsetY))
            complexWarp(curMap.offsetX, curMap.offsetY, curMap.offsetX, curMap.offsetY + 1, curMap.offsetX + 2, curMap.offsetY + 1, curMap.offsetX + 1, curMap.offsetY + 1, curMap.offsetX + 2, curMap.offsetY, curMap.offsetX + 1, curMap.offsetY - 1)
        else
            if (curMap.length == 2 && state(curMap.offsetX + 1, curMap.offsetY + 1))
                complexWarp(curMap.offsetX, curMap.offsetY + 2, curMap.offsetX, curMap.offsetY, curMap.offsetX + 1, curMap.offsetY + 2, curMap.offsetX, curMap.offsetY + 1, curMap.offsetX + 1, curMap.offsetY, curMap.offsetX + 2, curMap.offsetY + 1)
        else
            if (curMap.length == 3)
                complexWarp(curMap.offsetX + 1, curMap.offsetY + 1, curMap.offsetX + 1, curMap.offsetY, curMap.offsetX + 2, curMap.offsetY + 1, curMap.offsetX, curMap.offsetY + 2)
            else
                complexWarp(curMap.offsetX, curMap.offsetY, curMap.offsetX + 1, curMap.offsetY + 1, curMap.offsetX + 1, curMap.offsetY, curMap.offsetX + 2, curMap.offsetY + 1, curMap.offsetX, curMap.offsetY + 2, curMap.offsetX + 2, curMap.offsetY + 2)
}

// flood entire screen with given state
function flood(state) {
    for (var x = 0; x < 10; ++x) {
        for (var y = 0; y < 19; ++y) {
            if (state == 0)
                document.images[computeIndex(x, y)].src = off.src
            else
                document.images[computeIndex(x, y)].src = on[3].src
        }
    }
}

// return true if no active squares are found and false otherwise
function noActive() {
    // scan board from top to bottom
    for (var y = 0; y < 19; ++y) {
        for (var x = 0; x < 10; ++ x) {
            if (ar[x][y] == 1)
                return false
        }
    }

    // no active square found on the board
    return true
}

// return true if the line with the given coordinate is completed
function isLine(y) {
    // horizontal scan of current line
    for (var x = 0; x < 10; ++x) {
        // if a square is off the line is not completed
        if (!state(x, y))
            return false
    }
    
    // no square was found off
    return true
}

// move block from one position to another
function warp(startX, startY, endX, endY) {
    document.images[computeIndex(endX, endY)].src = document.images[computeIndex(startX, startY)].src
    document.images[computeIndex(startX, startY)].src = off.src
    
    // block in new position is now active
    ar[endX][endY] = 1

    // previous position is no longer active
    ar[startX][startY] = 0
}

// 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()
}

// 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()
}

// 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!rrlevel = ' + 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 downwards
        moveY()

    // call after speed milliseconds
    timerID = setTimeout('play()', speed)
}

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

    // is 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 as 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
        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 games 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()
    }
}


// -->
 </script>
 <META NAME="GENERATOR" CONTENT="Microsoft FrontPage 5.0">
 <META NAME="ProgId" CONTENT="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></HEAD>
<BODY bgcolor="#EBE9ED">
</BODY>
</HTML>


След като сте готови, го кръстете както искате, например аз съм го кръстил tetris.html . Все още не сме готови. Трябват ни и картинките. Ето ги и тях - http://uroci.net/downloads/Kartinki.rar . Разархивираме ги в същата папка в която сме сложили и файла tetris. Например на мен ми е папка Tetris, в нея имаме tetris.html и картинките



Коментари (5)

mitko98 на 27.03 2011 в 18:18ч.
Не работи!
sico на 29.05 2011 в 22:50ч.
И при мен не работи
kiril07 на 29.07 2011 в 18:26ч.
Не работи
awanturistkata на 22.08 2011 в 13:21ч.
Не работи защото има няколко малки синтактични грешчици примерно тук // create start button link
write('') ==> трябва да е // create start button link
write('') има 6-7 такива места и това ви дава грешки.
icebilly на 29.11 2011 в 17:15ч.
нито при мен не работи :)

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com