你的位置:首页 > Java教程

[Java教程]第一帖,发个网页版的别踩白块


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" ></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     else31     {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     else58     {59       //其它行60       alert("游戏结束");61       init();62     }63   }64   else65   {66     //单击到白块67     alert("游戏结束");68     init();69   }70 });


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

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

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

 

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

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

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

如果不是,直接结束游戏

  

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

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