您所在的位置:小祥子 » 编程 » JavaScript » 正文

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

时间:2015-07-06 编辑:无痕、 来源:Cnblogs

index.html

 <!DOCTYPE html>
 <html>
     <head>
         <title>别踩白块</title>
         <script type="text/javascript" src="JS/jquery.js"></script>
         <script type="text/javascript" src="js/init.js"></script>
     </head>
     <body>
         <table id="canvas" style="width:98%;height:800px;margin:0 auto"></table>
         <p>  --By:无痕    2015/07/05</p>
         <p>本人QQ:2632790902 欢迎反馈</p>
     </body>
 </html>

init.js

 var canvas;            //画布div
 
 $(function(){
     canvas=$("#canvas");
     init();
 });
 
 /*初始化方法*/
 function init()
 {    
     canvas.html("");
     for(var n=0;n<4;n++)
     {
         addLine();
     }
 }
 
 /*添加一行方块*/
 function addLine()
 {
     var i=Math.round(Math.random()*100)%4;
     var line="";
     line+="<tr>";
     for(var n=0;n<4;n++)
     {
         if(n!=i)
         {
             line+="<td style='border:#FFF 1px solid;width:25%;height:100px;background:#CCC;'></td>";
         }
         else
         {
             line+="<td class='black' style='border:#FFF 1px solid;width:25%;height:100px;background:#555;'></td>";
         }
     }
     line+="</tr>";
     canvas.append(line);
 }
 
 //移除第一行
 function removeFirst()
 {
     canvas.children().children().eq(0).remove();
 }
 
 //方块单击事件
 $("td").live("click", function(){
     var thistd=$(this);
     if(thistd.attr("class")=="black")
     {
         //单击到黑块
         if(thistd.parent().index()==0)
         {
             //第一行
             removeFirst();
             addLine();
         }
         else
         {
             //其它行
             alert("游戏结束");
             init();
         }
     }
     else
     {
         //单击到白块
         alert("游戏结束");
         init();
     }
 });


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

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

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

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

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

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

如果不是,直接结束游戏

  

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

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

关键词:网页