用DHTML制作俄罗斯方块

精华区

当前位置：网易精华区>>讨论区精华>>网络专区>>● 网站建设>>DHTML,JavaScript专栏>>用DHTML制作俄罗斯方块

主题：用DHTML制作俄罗斯方块

发信人: xmzw(小米粥)
整理人: morefeetin(2001-05-10 08:09:24), 站内信件

特点：
　　使用纯DHTML技术编写的俄罗斯方块游戏（不是Applet），你只要有IE就可以玩。可以通过它学习DHTML技术，JavaScript语言，CSS设计等。另外您可以看看作者是如何在没有指针和多维数组的情况下来完成它的，的确有些麻烦，如果用C语言也许200行就OK了。

软件使用：
　　方向键控制游戏，Z,X分别是顺、逆时针旋转，空格键暂停。

<HTML>
<HEAD>
<META NAME="Title" CONTENT="JScript Simple Tetris">
<META NAME="主题" CONTENT="脚本语言版的俄罗斯方块">
<META NAME="CopyRightBy" CONTENT="Lucifer Xie">
<META NAME="Author Email" CONTENT="[email protected]">
<META NAME="Start" CONTENT="2001.2.1">
<META NAME="Complete" CONTENT="2001.2.3 20:55PM">
<META NAME="Latest Patch" CONTENT="2001.2.5 18:22PM">
<TITLE>Simple Tetris</TITLE>
<style>
body {margin:0;background:black;}
td {height:20;width:20;}
#block_div {position:absolute;z-index:1;width:80;}
#table_div {position:absolute;z-index:0;width:320;}
#nblock_div {position:absolute;z-index:2;font:48 system;color:red;}
#title_div {position:absolute;left:326;font:48 system;color:gold;filter:shadow(color=red);cursor:hand;}
#infobar_div {position:absolute;left:396;top:416;}
</style>

<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>

</SCRIPT>

<SCRIPT LANGUAGE=javascript FOR=document EVENT=onkeydown>

</SCRIPT>

</HEAD>

<BODY LANGUAGE=javascript onload="return window_onload()">

<div id=block_div style="left:60;top:0">
<table id=block_tbl border=0 cellspacing=0 cellpadding=0>
<script>
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>
</table>
</div>

<div id=nblock_div>
<table id=nblock_tbl border=0 cellspacing=0 cellpadding=0>
<script>
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>
</table>
</div>

<div id=table_div>
<table id=table_tbl border=0 cellspacing=0 cellpadding=0>
<script>
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>
</table>
</div>

<div id=title_div nowrap onclick="location='mailto:[email protected]';" title="Contact ME!">Tetris Master ver0.99b</div>

<div id=infobar_div>
<table border=1 bordercolor=navy cellspacing=0 cellpadding=0>
<tr align=center>
<td style="color:99ccff;font:12 system;width:56;">Speed:</td>
<td style="color:red;font:12 system;" id=spd>1</td>
<td style="color:99ccff;font:12 system;width:86;">Total Score:</td>
<td style="color:red;font:12 system;" id=sco>0</td>
<td style="color:99ccff;font:12 system;width:96;">Cleared Lines:</td>
<td style="color:red;font:12 system;" id=cll>0</td>
</tr>
</table>
</div>

<SCRIPT ID=MainSection LANGUAGE=javascript>

</SCRIPT>
<BGSOUND ID=bk_Music SRC="Music/back0.mid" LOOP=INFINITE>
</BODY>
</HTML>

　　将以上原码合并存为Tetris.htm文件。

　　俄罗斯方块的游戏虽然很多人都写过了，但却发现没有人去写一个纯网页版的（使用Java Applet的除外），于是作者谢勇就制作了这个游戏，它是使用DHTML技术，JavaScript语言制作成的，您只需要有IE5.0以上版本的浏览器就可以运行它。

　　这个版本目前不支持IE4.0，只是因为IE4.0的层叠样式表（CSS）不支持下划线，当然改动起来也不是很麻烦，请期待下一个版本，您可以发信到[email protected]索要最新的版本。

功能说明

--在Windows环境下双击Tetris.htm运行游戏

--方向键（Arrow Keys）控制游戏，“↑”键和“Z”为逆时针旋转，“X”为顺时针旋转。空格键可以暂停游戏（你可以在暂停状态下继续玩哦^_^）。

--背景音乐会随速度的变换而改变。

积分方法
================
--每下落一个方块可得2分。

--消层得分是这样计算的：消层数的平房 X 36 即为增加的分数。所以说要尽可能的一次性多消几层，得分才高，因为每消18层，速度就会加快，最高速度是9级速度。

[关闭][返回]