JS俄罗斯方块，包含完整的设计理念

由于该游戏属于二维游戏，所以布置好网格是写好该游戏的关键，无论是游戏窗口还是预览窗口

下面是俄罗斯方块的截图：

请到这里下载源码：

俄罗斯方块 在线演示下载地址
下面是代码：
复制代码 代码如下:

body
{
background-color:#ffffff;
overflow:hidden;
font-size:14px;
}
.gameZone
{
position:absolute;
left:0px;
top:0px;
width:100%;
height:550px;
background-Color:white;
}
.mask
{
position:absolute;
left:100px;
top:0px;
width:300px;
height:20px;
background-color:White;
border:solid 0px;
z-index:5;
}
.map
{
position:absolute;
left:100px;
top:20px;
width:280px;
height:504px;
background-image:url(images/tetris_grid.gif);
border:solid 3px green;
}
.gameOver
{
position:absolute;
left:100px;
top:20px;
width:280px;
height:504px;
font-weight:800;
font-size:xx-large;
color:Red;
text-align:center;
border:solid 3px;
line-height:420px;
display:none;
filter: Alpha(Opacity=80);
background-color:pink;
}
.map div
{
BACKGROUND-IMAGE: url(images/tetris.gif);
WIDTH: 28px;
BACKGROUND-REPEAT: no-repeat;
POSITION: absolute;
HEIGHT: 28px
}
.PreviewMap
{
position:absolute;
left:400px;
top:20px;
width:168px;
height:168px;
background-color:pink;
border:solid 2px green;
}
.PreviewMap div
{
BACKGROUND-IMAGE: url(images/tetris.gif);
WIDTH: 28px;
BACKGROUND-REPEAT: no-repeat;
POSITION: absolute;
HEIGHT: 28px
}
.start
{
position:absolute;
left:400px;
top:240px;
width:168px;
height:40px;
}
.scoreSpeed
{
position:absolute;
left:400px;
top:200px;
width:190px;
height:40px;
}
.score
{
color:pink;
font-weight:bold;
width:20px;
height:20px;
background-color:blue;
padding-left:10px;
padding-right:10px;
font-size:medium;
}
.speed
{
color:pink;
font-weight:bold;
width:20px;
height:20px;
background-color:blue;
padding-left:5px;
padding-right:5px;
font-size:medium;
}
.copyright
{
position:absolute;
left:400px;
top:280px;
word-break:break-all;
width:160px;
height:225px;
border:solid 2px green;
padding:5px;
}

得分：0

 
级别：

版权所有

此俄罗斯方块由高山流水开发，欢迎各位使用，
如有bug或者好的意见，请给我留言，谢谢支持!
另如需转载，请注明出处！

顺便，宣传一下我的MVC qq群：45660795,欢迎加入!

作者：高山流水

QQ:21243468

以上就是JS俄罗斯方块，包含完整的设计理念的详细内容，更多请关注本站其它相关文章！