第一帖，发个网页版的别踩白块

index.html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>别踩白块</title>
 5         <script type="text/javascript" src="js/jquery.js"></script>
 6         <script type="text/javascript" src="js/init.js"></script>
 7     </head>
 8     <body>
 9         <table id="canvas" style="98%;height:800px;margin:0 auto"></table>
10         <p>  --By:无痕    2015/07/05</p>
11         <p>本人QQ：2632790902 欢迎反馈</p>
12     </body>
13 </html>

init.js

 1 var canvas;            //画布div
 2 
 3 $(function(){
 4     canvas=$("#canvas");
 5     init();
 6 });
 7 
 8 /*初始化方法*/
 9 function init()
10 {    
11     canvas.html("");
12     for(var n=0;n<4;n++)
13     {
14         addLine();
15     }
16 }
17 
18 /*添加一行方块*/
19 function addLine()
20 {
21     var i=Math.round(Math.random()*100)%4;
22     var line="";
23     line+="<tr>";
24     for(var n=0;n<4;n++)
25     {
26         if(n!=i)
27         {
28             line+="<td style='border:#FFF 1px solid;25%;height:100px;background:#CCC;'></td>";
29         }
30         else
31         {
32             line+="<td class='black' style='border:#FFF 1px solid;25%;height:100px;background:#555;'></td>";
33         }
34     }
35     line+="</tr>";
36     canvas.append(line);
37 }
38 
39 //移除第一行
40 function removeFirst()
41 {
42     canvas.children().children().eq(0).remove();
43 }
44 
45 //方块单击事件
46 $("td").live("click", function(){
47     var thistd=$(this);
48     if(thistd.attr("class")=="black")
49     {
50         //单击到黑块
51         if(thistd.parent().index()==0)
52         {
53             //第一行
54             removeFirst();
55             addLine();
56         }
57         else
58         {
59             //其它行
60             alert("游戏结束");
61             init();
62         }
63     }
64     else
65     {
66         //单击到白块
67         alert("游戏结束");
68         init();
69     }
70 });

整个的代码很简单，先是在html里面创建一个table标签作为画布

　　为什么要以table作为画布呢？

　　　　原因很简单，游戏里面的内容是方块，而且排列也很整齐，符合table标签的特点。

在html代码加载完成以后，初始化画布(即table)里面的内容，插入tr和td，tr和td分别对应的就是方块所在的行和方块

然后为每个方块注册单击事件，单击后判断是否为第一行的黑块(黑块使用class="black"类进行标记)

如果是，删除第一行并添加新行以继续游戏

如果不是，直接结束游戏

如发现存在缺陷或者有bug，欢迎反馈。本人QQ:2632790902

　　　　　　　　　　　　　　　　　　　　　　　　----第一次发帖，谢谢支持