这个游戏主要分为三部份，HTML5+CSS+JAVASCRIPT来完成的。在这里详细讲一下js的代码。因为这个游戏的主要部分其实就是js。
大多数都是靠js来完成的。
完成后的效果如下：
CSS代码：
body {
font-family: "Helvetica Neue","Hiragino Sans GB","Segoe UI","Microsoft Yahei","微软雅黑",Tahoma,Arial,STHeiti,sans-serif;
font-size: 12px;
background: #fff;
color: #333;
}
a{
outline:none;
-moz-outline:none;
text-decoration: none;
}
.wrap{
width:1000px;
margin:80px auto;
}
.play_wrap{
padding-left:260px;
}
float:left;
width:300px;
height:480px;
margin:auto;
background-color:#fefefe;
border-radius:2px;
color:black;
Box-shadow:0px 0px 8px #e5e5e5;
padding:1px 0 0 1px;
}
float:left;
width:19px;
height:19px;
border:1px solid #eee;
margin:-1px 0 0 -1px;
}
background:#999;
border:1px solid #ccc;
}
background:#0c0;
}
.play_menu{
float:left;
margin-left:60px;
font-size:14px;
padding-top:20px;
}
.play_menu #play_nextType{
width:60px;
height:60px;
padding:1px 0 0 1px;
margin:10px 0 20px 0;
}
.play_menu .play_mini_cell{
float:left;
width:14px;
height:14px;
border:1px solid #fff;
margin:-1px 0 0 -1px;
}
.play_menu .play_mini_cell.active{
background:#999;
border:1px solid #ccc;
}
.play_menu p {
line-height:200%;
clear:both;
}
.play_menu a.play_btn{
display:block;
margin-bottom:20px;
width:80px;
height:28px;
line-height:28px;
text-align:center;
text-decoration: none;
color:#333;
background:#fefefe;
border:1px solid #eee;
border-radius: 2px;
Box-shadow: 1px 1px 2px #eee;
border-color:#ddd #d2d2d2 #d2d2d2 #ddd;
outline: none;
-moz-outline:none;
}
.play_menu a.play_btn:hover{
background-color:#fcfcfc;
border-color:#ccc;
Box-shadow: inset 0 -2px 6px #eee;
}
.play_menu a#play_btn_level{
position:relative;
margin-bottom:30px;
}
.level_text{
margin-left:-10px;
}
.level_icon{
display: block;
position:absolute;
top:12px;
right:16px;
width:0;
height:0;
overflow: hidden;
border:5px solid #FFF;
border-color: #999 transparent transparent transparent;
}
.level_menu{
position:absolute;
margin:-30px 0 0 1px;
display:none;
}
.level_menu ul{
list-style:none;
}
.level_menu li{
float:left;
}
.level_menu li a{
display:block;
padding:3px 10px;
border:1px solid #e8e8e8;
margin-left:-1px;
color:#09c;
}
.level_menu li a:hover{
background:#09c;
color:#fefefe;
}
HTML的代码其实就是一个游戏结构的框架，这里框架其实就是几个div的东西，所以不会太长，理解起来也是挺容易的。而CSS则是控制网页的布局与美观，所以要想吸引玩家，那CSS方面必须下功夫，而这里的CSS只是其实就将游戏区域与菜单区域分为左右两边了。而游戏域内的一个个框其实就是多个div，整齐排列在一起而已。
下面到了js了：
因为在代码已经将一些重要的部分做了注释，所以就不打算逐步分去分析了。说一下整体的写法吧。其实它首先是直接定义了一些图形的坐标，然后根据这些坐标画出一个下一个的图形出来，之后就是利用一个setInterval函数在游戏区域标出每个点，如果不能下落了就直接清除掉时间函数，之后在调用一个创建时间函数的函数出来，在画一个图形出来。具体的细节就看代码吧。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
