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

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

0

2015-07-06 01:00:03

index.html1 2 3

4 别踩白块 5 6 7 8 9 10

--By:无痕 2015/07/05

11

本人QQ：2632790902 欢迎反馈

12 13

init.js1 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+="

";24 for(var n=0;n<4;n++)25 {26 if(n!=i)27 {28 line+="";29 }30 else31 {32 line+="";33 }34 }35 line+="";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

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

本文网址：http://www.shaoqun.com/a/122847.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

0