jquery之别踩白块游戏的实现

游戏的html界面非常简单，分为4部分，

得分标题栏，

游戏界面主题容器，开始的时候为一个div，然后用jquery动态生成黑白格子

开始暂停按钮一栏

游戏结束时候显示的模态框

下面是代码部分

!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"titleTitle/titlelinkhref=""rel="stylesheet"type="text/css"/headbodydivclass="main"h3Score:spanid="score"0/span/h3divid="content"class="content"divid="inner"/div/divdivclass="btn"divclass="container"buttonid="begin"开始/buttonbuttonid="stop"暂停/button/div/divdivclass="shadowhide"/divdivclass="alert-boxhide"divclass="game-over"imgstyle="opacity:0.8"src="../pic/"/divdivclass="btn"buttonid="again"重新开始/buttonbuttonid="back"返回/button/div/div/divscriptsrc="../js/"/scriptscriptsrc="../js/"/script/body/html

写完了html然后就是css，这里主要用到absolute布局，然后需要注意的是就是游戏过程由于需要不停的生成一栏新div，所以div容器要设置overflow:hidden，这一点需要注意下，然后其他的知识点也就是absolute，relative如何布局，模态框如何实现并居中，都不难，下面看下代码就好

*{margin:0;padding:0;}.main{width:808px;margin:50pxauto;background:gray;min-height:544px;position:relative;}.content{width:408px;margin:0auto;height:408px;border:2pxsolidgreen;background-color:white;position:relative;top:0;overflow:hidden;}inner").prep("divclass='item'/div");$.each([0,1,2,3],function(k,v){if(v==rand){$("").("divclass='col'/div");}})}functioninit{//初始生成4*4的div$.each([0,1,2,3],function{insertDiv;});}

初始化完成后，我们需要做的就是如何让界面动起来，这里写了一个函数，每次调用该函数的话，游戏内容会自动向下移动几px，然后将该函数传给定时器，就可以不断的向下滑动，不过这里需要注意，下落过程中，如果下落的距离超过一行后，需要重新插入一行，然后将超出的那一行删除，而且需要将偏移的距离恢复到原来的位置，如果需要加速白块下落的速度，只需将每次向下移动加大即可，游戏后面的自动加速也是基于此来做的。下面来看一下这部分的代码

下面来看一下如何计算得分的代码，以及如何实现自动的加速，比较简单就不多说了

functionscore{varscore=parseInt($("score").text(score+1);}

最后来看一下，游戏结束的时候如何处理，游戏结束的话，先暂停游戏下落，然后弹出模态对话框，让用户选择返回，还是重新来过，重新来过的话，分数清零，游戏界面清空，然后初始化再在自动触发开始按钮，开始下一轮游戏，

functiongameOver{//暂停游戏，显示模态框$("again").click(function{clearInterval();$(".shadow").addClass('hide').('hide');$("begin").trigger('click');//=setInterval(move,30)});

到这里，基本整个游戏都算实现了，游戏不复杂，但是要完全运行起来，没有bug也不是那么简单，有兴趣的也可以去写写，如果上面代码有什么问题的话，可以向我提出来。