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="width: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;width:25%;height:100px;background:#CCC;‘></td>";
29 }
30 else
31 {
32 line+="<td class=‘black‘ style=‘border:#FFF 1px solid;width: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
----第一次发帖，谢谢支持
时间： 2024-08-08 13:53:10