别踩白块（又名钢琴块）相信大家都玩过，这是一款制作简单、容易上手，但又很有新意的一款安卓游戏，它一推出就取得了相当好的成果，获得了较多的用户量。一开始它只是简单的一种游戏模式，但在流行起来之后，别踩白块又逐渐添加了许许多多的其他模式，今天我们制作的就是最初的别踩白块，即经典版。
工具/原料
DreamweaverCS6或Dreamweaver8等
jQuery（版本随意，不是太过时就好）
方法/步骤
1、首先，没有jQuery的去官网下载，如图。没有Dreamweaver的去下载安装，不在多说，自己百度。
2、进入别踩白块，我们首先来分析一下这个游戏。注：我们只分析经典模式。这个游戏的主体就是一个4*n的白格子，每一行有四个，共有n行。每一行中只有一个黑色的格子，玩家点击黑色的格子，直到过关，点错即失败。值得一提的是：屏幕上方有计时器，显示用户所用时间，这样就更增加了这个游戏的可玩性！如果没有计时器，这个游戏就缺少了互动，未免太乏味了。玩家可以把自己的所用时间“炫耀”到朋友圈或其他地方。这样一来相当于免费给别踩白块打广告，二来又提高了这个游戏的玩家互动性，使玩家更加黏上这款游戏！不愧是第一虐心手游。
3、分析之后，我们就开始做这款游戏的网页版了。第一步：输出表格首先，我们需要一个4*n的格子，这个我们可以用jQuery输出表格做到。$(元素).append(HTML代码)；利用这个加上for循环，我们可以输出任意行数的4列表格。图示代码和表格效果。
4、js代码如下：----颍骈城茇----------------------------------------------------------------------------functio荏鱿胫协nym()//调用这个函数即可输出4*20的表格。 {vari,j,k; varbe,li; varss=""; be=4;//横着的块数 li=20;//共有多少行 for(i=1;i<=li;i++) {ss+="<tr>"; for(j=1;j<=be;j++) {ss+="<tdid=\"a"+i+j+"\"tabindex='-1'>"+"<aname=\"b"+i+j+"\"id=\"b"+i+j+"\"></a></td>";}//你可以看见，td里有一个a，那是一个锚，用来同步页面。//注意，每一个td一定要加id，按照坐标加，否则很难用jQuery操作。id不能以数字开头。ss+="</tr>";}$("#three").append(ss);//这里的#three是一个id为three的table--------------------------------------------------------------------------------html代码：--------------------------------------------------------------------------------<body><center><tablewidth='1020px'border='1px'height="3280px"id="three"cellspacing="0"bgcolor="black"><tbody><!--这里什么也不输入是因为用jQuery输出表格，当然，你也可以自己用html输出表格，但那样我个人觉得麻烦且无技术含量。--></tbody></table></center>--------------------------------------------------------------------------------
5、第二步：涂色白色我们来给格子图上颜色，让它更像别踩白块！涂色很简单，用CSS就ok啦。--颍骈城茇-------------------------------------------------幻腾寂埒-----------------------------<styletype="text/css">#threetd{ height:163px; width:250px; background:#CCC;//灰色。白色改成white即可。 font-size:22px; background-repeat:no-repeat;}</style>--------------------------------------------------------------------------------先把所有方块涂成白色吧!也可以换成你想要的其他颜色！
6、第三步：涂色黑色我们知道每一行都要有一个黑色块，所以我们必须在每一行涂一个黑色。为了保证游时卫熨舨戏的难度，这个任务交给随机数去做吧！---------------------------------幻腾寂埒-----------------------------------------------k=randomo(1,5);//这样可以获得1,2,3,4中的随机数。functionrandomo(mi,ma){returnMath.floor(mi+Math.random()*(ma-mi));}//一个简单的随机数函数。--------------------------------------------------------------------------------接下来我们就要随即涂色了，通过随机得到的数字，给每一行的第n个涂上颜色，这时，td上的坐标id就起到作用了！在这里我们需要用到jQuery的$().css();函数。简单说明一下$("#a11").css("background-color","white");//给第一行第一个格子涂上颜色------------------------------------------------------------------------------for(i=1;i<=li;i++) {k=randomo(1,5);//获取随机数 ss=""; ss+="#a"+i+k;//将坐标翻译成id$(ss).css("background-color","black");//涂成黑色------------------------------------------------------------------------------效果图如下（我没有改成黑白的，而是添加了图片）这样看起来大体已经很像别踩白块了！
7、第四步：按键\触摸事件首先说按键：需要用到jQuery的$(document).keyup(function(event){});函数，即按键响应事件。event.keyCode中有按键的值，至于值与按键的对应，从A到Z：65-90如图。代码中的switch中有一个bs()函数，那是我自己定义的一个函数，在这个函数里，将判断是否按错（css是否是black）和将按对的变为白色（css变为白色）代码不再写，上边涂色已经说过。按错跳转页面，完成跳转页面什么的就不再多说了，自己做几个页面就可以了。
8、第五步：页面同步（锚的使用）小编我技术有限，所以同步页面用的是html元素A，即抛锚跳转。我不是没有试过滚动条自动滚动或页面下移，但这些都有点麻烦，虽然很有技术含量。当然，用什么方法根据个人习惯即可。还记得td里面的a吧，每一个td都有，而且有坐标id，那个就是用来跳转的。如果没有这个，那么用户要手动下脱网页来进行游戏，而不是网页自己走。所以锚还是非常重要的，没有这个，用户体验会非常不好。设置锚已经设置好了，那么介绍使用。用到js的一个函数location.hash。location.hash="锚的id";//这句加到bs()(按键响应函数)里面，即玩家按对键页面下移。这样页面便会随着玩家按键往下移动。
9、第六步：最后一步————计时器这个就比较随意了，网上jQuery计时器一大堆，搜一个改改就可以用了。关键是显示方式，个人觉得别踩白块的显示方式就很好，在最上边动态显示。你也可以做一个浮动DIV，在页面最上边显示时间。感觉蛮好的。浮动DIV推荐Bootstrap的，毕竟人家做的高大上。再加上一个数据库，将用户数据进行比较，列出排行榜、新纪录、炫耀一下等东西，这个游戏的可玩性就更高了！你也可以看一下我做的计时器，关注我可以查看我其他经验，里面有一篇是关于jQuery计时器的。图示为不好的计时器，建议不要这样做！
