这个游戏主要分为三部份，HTML5+CSS+JAVASCRIPT来完成的。在这里详细讲一下js的代码。因为这个游戏的主要部分其实就是js。
大多数都是靠js来完成的。
完成后的效果如下：
HTML代码：
<body> <div> <div> <div></div> <div> <p>下一个：</p> <div></div> <a href="javascript:void(0);" unselectable="on">开始</a><a href="javascript:void(0)" unselectable="on"><span>中等</span></span></a> <div> <ul> <li><a href="javascript:void(0)" level=0>简单</a></li> <li><a href="javascript:void(0)" level=1>中等</a></li> <li><a href="javascript:void(0)" level=2>困难</a></li> </ul> </div> <p> 分数：<span>0</span> </p> <p> 方向：<span>bottom</span> </p> <p> 说明：<br> -“下”、“左”、“右”键控制方向，“上”为变形；<br> -游戏开始前、暂停时可调整难度；<br> -难度分“简单”、“中等”、“困难”三级；<br> -对应的分值为10、20、40；<br> -多行同时消去的倍数为1、4、10、20； </p> </div> </div> </div> </body>
CSS代码：
<style> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,button,textarea,p,blockquote,th,td { padding: 0; margin: 0; } 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; } #play_area{ 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; } #play_area .play_cell{ float:left; width:19px; height:19px; border:1px solid #eee; margin:-1px 0 0 -1px; } #play_area .play_cell.active{ background:#999; border:1px solid #ccc; } #play_area .play_cell.goal{ 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; } </style>
HTML的代码其实就是一个游戏结构的框架，这里框架其实就是几个div的东西，所以不会太长，理解起来也是挺容易的。而CSS则是控制网页的布局与美观，所以要想吸引玩家，那CSS方面必须下功夫，而这里的CSS只是其实就将游戏区域与菜单区域分为左右两边了。而游戏域内的一个个框其实就是多个div，整齐排列在一起而已。
下面到了js了：
因为在代码已经将一些重要的部分做了注释，所以就不打算逐步分去分析了。说一下整体的写法吧。其实它首先是直接定义了一些图形的坐标，然后根据这些坐标画出一个下一个的图形出来，之后就是利用一个setInterval函数在游戏区域标出每个点，如果不能下落了就直接清除掉时间函数，之后在调用一个创建时间函数的函数出来，在画一个图形出来。具体的细节就看代码吧。