JS 版俄罗斯方块游戏

空格暂停，向上箭头变形。
<style>BODY {
        BACKGROUND: black; MARGIN: 0px
}
td           { height: 20px; width: 20px; font-family: 宋体; color: #FFFFFF; font-size: 9pt }
#block_div {
        POSITION: absolute; WIDTH: 80px; Z-INDEX: 1
}
#table_div {
        POSITION: absolute; WIDTH: 320px
}
#nblock_div {
        COLOR: red; FONT: 48px system; POSITION: absolute; Z-INDEX: 2
}
#title_div {
        COLOR: white; FONT-SIZE: 22px; LEFT: 326px; POSITION: absolute; TOP: 7px
}
#infobar_div {
        LEFT: 396px; POSITION: absolute; TOP: 416px
}
#infobar2_div {
        COLOR: white; FONT-SIZE: 14px; LEFT: 396px; POSITION: absolute; TOP: 480px
}
#infobar2_div A {
        COLOR: #99ccff; TEXT-DECORATION: none
}
</style>
<script id="clientEventHandlersJS" language="javascript">
<!--

/*
Tetris Game by Xie Yong ([email]nsxy@163.net[/email])
Modifications by DynamicDrive.com for interface enhancements
For this script, visit [url]http://www.dynamicdrive.com[/url]
*/

if (document.all){
var n_width = 800;
var n_height = 600;
var n_left = Math.round( screen.width/2 ) - n_width/2;
var n_top = Math.round( screen.height/2 ) - n_height/2;
var n_IncStep = 20;
var curBlcok,nextBlock;
var arr_curBlock = new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);
var curX,curY;
var speed=1;
var maxspeed=9;
var clr_per_line=18;
var pause=0;
var gameover=0;
var colors = new Array("#999999","#0000FF","#80FFFF","#80FF80","#FFFF00","#FF8000","#FF00FF","#FF0000"
);
var cid;
var ncid;
var blocks = new Array("tt_O1","tt_T2","tt_Z1","tt_S1","tt_L1","tt_J1","tt_I2");
var bid;
var killedlines=0;

var tt_O1 = new Array(0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,0);
var tt_O2 = new Array(0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,0);
var tt_O3 = new Array(0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,0);
var tt_O4 = new Array(0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,0);

var tt_T1 = new Array(0,0,0,0,0,1,0,0,1,1,0,0,0,1,0,0);
var tt_T2 = new Array(0,0,0,0,0,0,0,0,1,1,1,0,0,1,0,0);
var tt_T3 = new Array(0,0,0,0,0,1,0,0,0,1,1,0,0,1,0,0);
var tt_T4 = new Array(0,0,0,0,0,1,0,0,1,1,1,0,0,0,0,0);

var tt_Z1 = new Array(0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0);
var tt_Z2 = new Array(0,0,0,0,0,0,1,0,0,1,1,0,0,1,0,0);
var tt_Z3 = new Array(0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0);
var tt_Z4 = new Array(0,0,1,0,0,1,1,0,0,1,0,0,0,0,0,0);

var tt_S1 = new Array(0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,0);
var tt_S2 = new Array(0,0,0,0,0,1,0,0,0,1,1,0,0,0,1,0);
var tt_S3 = new Array(0,0,0,0,0,0,1,1,0,1,1,0,0,0,0,0);
var tt_S4 = new Array(0,1,0,0,0,1,1,0,0,0,1,0,0,0,0,0);

var tt_L1 = new Array(0,1,0,0,0,1,0,0,0,1,1,0,0,0,0,0);
var tt_L2 = new Array(0,0,0,0,0,0,1,0,1,1,1,0,0,0,0,0);
var tt_L3 = new Array(0,0,0,0,0,1,1,0,0,0,1,0,0,0,1,0);
var tt_L4 = new Array(0,0,0,0,0,1,1,1,0,1,0,0,0,0,0,0);

var tt_J1 = new Array(0,0,1,0,0,0,1,0,0,1,1,0,0,0,0,0);
var tt_J2 = new Array(0,0,0,0,1,1,1,0,0,0,1,0,0,0,0,0);
var tt_J3 = new Array(0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,0);
var tt_J4 = new Array(0,0,0,0,0,1,0,0,0,1,1,1,0,0,0,0);

var tt_I1 = new Array(0,1,0,0,0,1,0,0,0,1,0,0,0,1,0,0);
var tt_I2 = new Array(0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1);
var tt_I3 = new Array(0,0,1,0,0,0,1,0,0,0,1,0,0,0,1,0);
var tt_I4 = new Array(0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1);

var table = new Array(
                1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
                1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
                1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
                1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
                1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
                1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
                1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
                1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
                1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
                1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
                1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
                1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
                1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
                1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
                1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
                1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
                1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
                1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
                1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
                1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
                1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,
                1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1)

}
else
alert("You need IE4+ to play Tetris!")

function dimension2(row,col,num){
        var i = row * num + col;
        return (this[i]);
}
Array.prototype.getd = dimension2;

function ShowBlock(x,y,block_type,color){
        for (var i=0;i<block_tbl.rows.length;i++){
                for (var j=0;j<block_tbl.rows(i).cells.length;j++){
                        var d2 = i * 4 + j;
                        if (block_type[d2]==1){
                                block_tbl.rows(i).cells(j).style.background = color;
                        }
                        else{
                                block_tbl.rows(i).cells(j).style.background = "";
                        }
                }
        }
        block_div.style.pixelLeft=x;
        block_div.style.pixelTop=y;
}

function ShowBlock1(x,y,block_type,color,obj_tabID,obj_divID){
        for (var i=0;i<obj_tabID.rows.length;i++){
                for (var j=0;j<obj_tabID.rows(i).cells.length;j++){
                        var d2 = i * 4 + j;
                        if (block_type[d2]==1){
                                obj_tabID.rows(i).cells(j).style.background = color;
                        }
                        else{
                                obj_tabID.rows(i).cells(j).style.background = "";
                        }
                }
        }
        obj_divID.style.pixelLeft=x;
        obj_divID.style.pixelTop=y;
}

function Change(inc){
        var type = curBlock.substr(0,4);
        var num = curBlock.substr(curBlock.length-1);
        num = parseInt(num) + inc;
        if (num>4||num<1) num -= 4*inc;
        type += num;
        eval("arr_tmp = " + type + ";");
        if (CanMove(curX,curY,arr_tmp)){
                curBlock = type;
                eval("arr_curBlock = " + curBlock + ";");
                eval("ShowBlock(block_div.style.pixelLeft,block_div.style.pixelTop," + curBlock + ",colors[" + cid + "]);");
        }
}

function CanMove(x,y,block){
        for (i=0;i<4;i++){
                for (j=0;j<4;j++){
                        if (block.getd(i,j,4)&table.getd(y/n_IncStep+i,x/n_IncStep+j,16)) return false;
                }
        }
        return true;
}

function NewBlock(){
        curBlock = nextBlock;
        cid = ncid;
        bid = Math.round(Math.random()*(blocks.length-1));
        ncid = Math.round(Math.random()*(colors.length-1));
        nextBlock = blocks[bid];
        eval("arr_curBlock = " + curBlock + ";");
        eval("ShowBlock(120,0," + curBlock + ",colors[" + cid + "]);");
        eval("arr_curBlock = " + curBlock + ";");
        eval("ShowBlock1(466,116," + nextBlock + ",colors[" + ncid + "],nblock_tbl,nblock_div);");
}

function SaveBlock(){
        for (i=0;i<4;i++){
                for (j=0;j<4;j++){
                        table[(curY/n_IncStep+i)*16+curX/n_IncStep+j]|=arr_curBlock[i*4+j];
                        if (arr_curBlock[i*4+j]==1)
                                if ((curY/n_IncStep+i<21)&&(curX/n_IncStep+j>1)&&(curX/n_IncStep+j<14))
                                        table_tbl.rows(curY/n_IncStep+i).cells(curX/n_IncStep+j).style.background = colors[cid];
                        if (table[(curY/n_IncStep+i)*16+curX/n_IncStep+j]!=1)
                                        table_tbl.rows(curY/n_IncStep+i).cells(curX/n_IncStep+j).style.background = "black";
                }
        }
}

function DelLine(line){
        for(i=line;i>0;i--){
                for(j=2;j<14;j++){
                        table[i*16+j]=table[(i-1)*16+j];
                }
        }
        table_tbl.deleteRow(line);
        table_tbl.insertRow(0);
        for (i=0;i<16;i++){
                table_tbl.rows(0).insertCell();
                if (i<2||i>13) table_tbl.rows(0).cells(i).style.background="navy";
        }
        killedlines++;
        cll.innerText=parseInt(cll.innerText)+1;
}

function DelLines(){
        var c,d,i,j;
        d=0;
        curY=block_div.style.pixelTop;
        for(i=(curY/20+3);i>curY/20-1;i--){
                c=0;
                for(j=2;j<14;j++){
                        if (isNaN(table[i*16+j])||i==21) break;
                        c+=table[i*16+j];
                }
                if(c==12){
                        DelLine(i);
                        i++;
                        d++;
                }
        }
        if (d>0)
                sco.innerText=parseInt(sco.innerText)+d*d*36;
}

function Lucifer(){
        for(var i=2;i<14;i++){
                if (table[16+i]==1) return true;
        }
        return false;
}

function GameOver(){
        gameover=1;
        clearInterval(gameInterval);
        block_div.innerHTML="";
        for (i=0;i<21;i++){
                for (j=2;j<14;j++){
                        setTimeout("table_tbl.rows(" + i + ").cells(" + j + ").style.background = colors[Math.round(Math.random()*7)];",16*i*j);
                }
        }
        nblock_div.innerHTML = "Game Over";
}



function document_onkeydown() {
        if (gameover==1) return;
        with (block_div.style){
        curX = pixelLeft;
        curY = pixelTop;
        switch (event.keyCode){
                case 37:
                        if (CanMove(curX-n_IncStep,curY,arr_curBlock))
                                pixelLeft-=n_IncStep;
                        break;
                case 38:
                        Change(1);
                        break;
                case 39:
                        if (CanMove(curX+n_IncStep,curY,arr_curBlock))
                                pixelLeft+=n_IncStep;
                        break;
                case 40:
                        if (CanMove(curX,curY+n_IncStep,arr_curBlock)){
                                pixelTop+=n_IncStep;
                        }
                        else{
                                SaveBlock();
                                DelLines();
                                if (Lucifer()){
                                        GameOver();
                                        return;
                                }
                                sco.innerText=parseInt(sco.innerText)+2;
                                NewBlock();
                        }
                        break;
                case 32:
                        if (pause==0){
                                clearInterval(gameInterval);
                                pause=1;
                        }
                        else{
                                gameInterval=window.setInterval("Handle_Interval()",(maxspeed-speed+1)*60);
                                pause=0;
                        }
                        break;
                case 90:
                        Change(1);
                        break;
                case 88:
                        Change(-1);
                        break;
                default:
        }
        }
}

function Handle_Interval(){
        curX = block_div.style.pixelLeft;
        curY = block_div.style.pixelTop;
        if (CanMove(curX,curY+n_IncStep,arr_curBlock)){
                block_div.style.pixelTop+=n_IncStep;
        }
        else{
                SaveBlock();
                DelLines();
                if (Lucifer()){
                        GameOver();
                        return;
                }
                sco.innerText=parseInt(sco.innerText)+2
                NewBlock();
        }
        if (killedlines>=clr_per_line){
                killedlines-=clr_per_line;
                if (speed<maxspeed)
                        speed++;
                else
                        speed=maxspeed;
                spd.innerText=speed;
                clearInterval(gameInterval);
                gameInterval=window.setInterval("Handle_Interval()",(maxspeed-speed+1)*60);
        }
}
//-->
</script>
<script
event="onkeydown" for="document" language="javascript">
<!--
 if (document.all)
 document_onkeydown()
//-->
</script>
<div id="block_div" style="LEFT: 60px; TOP: 0px">

<table border="0" cellPadding="0" cellSpacing="0" id="block_tbl">
  <script>
if (document.all){
for (var i=0;i<4;i++){
        document.write("<tr>");
        for (var j=0;j<4;j++){
                document.write("<td style=\"border:1 solid black;\"></td>");
        }
        document.write("</tr>");
}
}
</script>
<TBODY>
</TBODY>

</table>
</div><div id="nblock_div">

<table border="0" cellPadding="0" cellSpacing="0" id="nblock_tbl">
  <script>
if (document.all){
for (var i=0;i<4;i++){
        document.write("<tr>");
        for (var j=0;j<4;j++){
                document.write("<td style=\"height:40;width:40;border:1 outset black;\"></td>");
        }
        document.write("</tr>");
}
}
</script>
<TBODY>
</TBODY>

</table>
</div><div id="table_div">

<table border="0" cellPadding="0" cellSpacing="0" id="table_tbl">
  <script>
if (document.all){
for (var i=0;i<22;i++){
        document.write("<tr>");
        for (var j=0;j<16;j++){
                var d2 = i * 16 + j;
                if (table[d2]==1)
                document.write("<td bgcolor=navy></td>");
                else
                document.write("<td style=\"background:black;\"></td>");
        }
        document.write("</tr>");
}
}
</script>
<TBODY>
</TBODY>

</table>
</div><div id="title_div" noWrap>

<p>请输入数字(1-9)来调整速度： <input id="speedin" size="8">&nbsp;<BUTTON id="but" onclick="begintet()">应用</BUTTON></p>
</div><div id="infobar_div">

<table border="1" borderColor="navy" cellPadding="0" cellSpacing="0">
<TBODY>
  <tr align="middle">
    <td style="COLOR: #99ccff; FONT: 12px system; WIDTH: 56px"><font size="2">速度</font>:</td>
    <td id="spd" style="COLOR: red; FONT: 12px system">1</td>
    <td style="COLOR: #99ccff; FONT: 12px system; WIDTH: 86px">总分：</td>
    <td id="sco" style="COLOR: red; FONT: 12px system">0</td>
    <td style="COLOR: #99ccff; FONT: 12px system; WIDTH: 96px">成绩:</td>
    <td id="cll" style="COLOR: red; FONT: 12px system">0</td>
  </tr>
</TBODY>
</table>
</div><div id="infobar2_div"></div><script id="MainSection" language="javascript">
<!--
if (document.all){
ncid = Math.round(Math.random()*(colors.length-1));
bid = Math.round(Math.random()*(blocks.length-1));
nextBlock = blocks[bid];
NewBlock();
}
function begintet(){
document.all.speedin.disabled=true
document.all.but.disabled=true
speed=parseInt(document.all.speedin.value);
if (isNaN(speed)||speed==null||speed>maxspeed||speed<1) speed=1;
spd.innerText=speed;
gameInterval=window.setInterval("Handle_Interval()",(maxspeed-speed+1)*60);
}
//-->
</script>
[Ctrl+A 全部选择提示：您可先修改部分代码，再按运行]
另一种：
演示：http://58.61.155.48:818/Tetris.html
下载：http://58.61.155.48:818/Tetris.rar
本站下载：Tetris.rar
ASP.NET 中的 AJAX	ASP.NET 画图全接触	ASP.NET 与 XML	声明式数据绑定	ASP.NET 网页抓取
C# 基础	C# 类教程	C# 加密	ASP.NET 成员资格	非“自动化”处理 Excel
QuickAjax	Ajax	完美的语法高亮器	Silverlight	Popfly