📄 html+javascript俄罗斯方块.html
字号:
<html>
<head>
<title>网页版俄罗斯方块--作者：李征</title>
<meta content="text/html; charset=gb2312" http-equiv=Content-Type>
</head>
<body>
<!---------------------------定义了游戏界面风格----------------------------->
<style>BODY
{
BACKGROUND: #212121; MARGIN: 0px
}
TD
{
COLOR: #ffffff; FONT-SIZE: 9pt; HEIGHT: 20px; WIDTH: 20px
}
#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: 14px; LEFT: 326px; POSITION: absolute; TOP: 7px
}
#infobar_div
{
LEFT: 5px; POSITION: absolute; TOP: 460px
}
#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>
top.window.moveTo(0, 0); //起始位置
if (document.all){
var gameInterval=""; //定义各种变量并初始化
var gamestart=0;
var n_width = 800;
var n_height =640;
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; //这里定义速度级别变量,初始为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; //定义消除行的变量，初始化为0，没有一行消除
//定义每一种方块的属性的数组，用1表示被填，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);
//把整个游戏区域定义为一个大的数组，这里以“块”为单位，游戏区域带边框是：21行，16列;可操作区域为20行，12列
//▓▓ ▓▓
//▓▓ ▓▓
//▓▓ ▓▓
//▓▓ ▓▓
//▓▓ ▓▓
//▓▓ ▓▓
//▓▓ ▓▓
//▓▓ ▓▓
//▓▓ ▓▓
//▓▓ ▓▓
//▓▓ ▓▓
//▓▓ ▓▓
//▓▓ ▓▓
//▓▓ ▓▓
//▓▓ ▓▓
//▓▓ ▓▓
//▓▓ ▓▓
//▓▓ ▓▓
//▓▓ ▓▓
//▓▓ ▓▓
//▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
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("需要IE4.0以上!") //JAVA脚本支持IE4以上，此为不满足情况提示信息
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(340,170," + 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--) //当i为20时，游戏区域满20行，此时调处循环
{
c=0;
for(j=2;j<14;j++)
{
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -