前端学习快结束了，没有机会写出像样的东西。然后不小心想起之前有人给我玩过不要踩白块的游戏，我的手被嘲讽了。现在我觉得实现这个游戏并不难，所以上周用jquery写了一个不要踩白块的小游戏，就像刚学python的时候一样。然后，今天就抽时间写一篇博客记录，这是对之前研究的总结。没玩过的可以去下一个原版玩。游戏很简单，就是点击黑色快速脱离掉落的方块。如果你点击了一百块或者有黑块没点击，游戏就结束了。游戏不难实现，都是小知识点。写的时候头有点粘，一个bug很久没解决。后来第二天早上我的头醒了，一眼就能看出来。对了，我提醒自己不要在脑袋不清醒的时候写代码。说到这里，我们先来看看效果图。只是不要在这里吐槽我的css风格设计。

一、游戏html页面

游戏的html界面非常简单，分为四个部分。

乐谱标题栏，

游戏界面的主题容器一开始是一个div，然后由jquery动态生成黑白网格

开始暂停按钮列

游戏结束时显示的模式框

下面是代码部分

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title link href='./css/game.css' rel='样式表'类型=' text/CSS '/head body Div class=' main ' h3score : span id=' score ' 0/span/H3 Div id=' content ' class=' content ' Div id=' inner '/Div/Div class=' BTN ' Div class=' container '按钮id=' begin' start /button按钮id=' stop ' pause/button/Div/Div class=' shadow hide '/Div class=' alert-box hide ' Div class=' game './pic/gg . jpg '/Div/Div class=' BTN '按钮id='再次'再次启动/按钮按钮id='后退'返回/button/Div/Div script src=' http 3360./js/jquery-1 . 12 . 4 . js '/Script src=' http : './js/game . js '/script/body/html ii。css布局

先写html再写css，这里主要用的是绝对布局，然后需要注意的是div容器要设置overflow:隐藏，因为游戏过程中需要不断生成新的div，需要注意，然后其他知识点都是绝对的，如何布局相对，如何实现模态框并居中，这并不难。请看下面的代码。

* { margin : 0；padd : 0；} .main { width: 808pxmargin: 50px自动；背景：灰色；最小高度： 544 px；相对位置：} .内容{ width: 408pxmargin: 0 auto高度：408 px；border: 2px纯绿色；背景-颜色：白色；相对位置：top:0飞越：隐藏；} #内部{ position: relativetop :-102 px；} .项目{ height: 102px} .项目*{左侧浮动：高度： 100像素；宽度： 100 px；背景-颜色：白色；border: 1px纯黑；} .黑色{背景-颜色：黑色；} H3 { text-align : center；padding-top : 20px；填充-bottom : 20px；} h3 span { color:brown} .隐藏{ display: none} .shadow{ position:绝对值；left : 0；bottom : 0；right : 0；top : 0；背景-颜色：灰色；opacity: 0.6} .警报盒{ position: absolute宽度： 300 px；height: 300px左侧：50%；top :50%；边距-left :-150 px；边距-top :-150 px；背景-颜色：白色；} .警报箱。游戏结束{ margin-left : 20px；边距-top : 30px；} .警报箱。btn { width: 150px相对位置：左边距left: auto右边距：自动；边距-top : 20px；} .主要的。btn。容器{ width: 150pxmargin: 20px自动；}按钮{ cursor:指针；border : 0；display:内联块；宽度： 70px；height: 30px线高： 30px；文本对齐：中心；背景-颜色：青色；}三。jquery的实现

游戏的核心部分是jquery的实现。主要功能如下

如何在游戏中动态插入一行div和删除一行div来启动暂停按钮的事件绑定，点击百块和黑快事件来委托游戏如何移动和如何得分，如何自动增加白块下落速度，如何判断游戏结束

让我们看看初始化代码的实现。在初始化之前，写了一个函数自动插入一行，这一行的四个div中有一个是随机的黑块，供游戏点击。还剩三个白色街区。如何随机生成以及如何动态创建div这里需要一点技巧。详见下文。生成div的函数完成后，在初始化函数中只需要调用4次

函数insertDiv(){ var rand=math . floor(math . random()* 4)；//生成一个从0到3的随机数，用来判断黑块$ ('# inner ')的位置。前置(' div class=' item '/div ')；$.每个([0，1，2，3]，函数(k，v) { if (v==rand) { $('#inner。项目')。第一个()。追加(' div class=' black col '/div ')；} else { $('#inner。项目')。第一个()。追加(' div class=' col '/div ')；} })}函数init() {//最初生成div $。4*4 ([0，1，2，3]，function(){ insert div()；});}初始化之后，我们需要做的就是如何让界面移动。这里写了一个函数。每次调用这个函数，游戏内容都会自动下移几个px，然后函数会传递给定时器，这样就可以连续向下滑动了。但是这里需要注意的是，在下降过程中，如果下降距离超过一行，需要重新插入一行，然后删除超出的行，需要将偏移距离恢复到原来的位置。让我们看看这部分代码

函数move(){ var ctop=ParSeint($(' # inner ')。偏移量()。顶部)；ctop=window.globalSpeed//用户自定义全局变量，每个下降偏移量的距离为$ ('# inner ')。偏移量({ top : ctop })；if(ctop=114){ insertDiv()；$('#inner ')。偏移量({ top : 12 })；//只移动一项，然后上移一项delDiv()；}}之后是书写开始和暂停部分。这里主要是定时器的使用。这里需要注意的是，每次点击都要先判断定时器是否已经清零，否则这里会有bug。让我们直接看代码。

函数bindStart() { $('#begin ')。mouseover(function () { $(this))。css('光标'，'指针')；}).单击(function(){ if(window . global leak t1){//一个自定义的全局变量，查看计时器是否清零} else { clear interval(window . global t1)；//如果没有清除，先清除避免按两次开始键} window . global t1=set interval(move，30)；window.globalStartClick=true//全局变量，是否启动标志位，可以点击})}函数bindstop () {$ ('# stop ')。mouseover (function () {$ (this))。CSS('光标'，'指针')；}).单击(function(){ clearInterval(window . global t1))；window.globalStartClick=falsewindow.globalIsClearT1=true})}写到这里，再来看看每次点击都是怎么操作的，是评分还是点错游戏。让我们看看代码。界面上有4*4个网格，需要事件委托来判断点击了哪个白块。如果你快速点击黑色，把它变成白色方块，加一分，否则游戏就结束了。

函数bindClick() { $('#inner ')。click(function(e){ if(window . GlobalStartClick){ var current=$(e . target)；if(current . has class(' black '){ current . remove class(' black ')；score()；} else { GameOVer()；} } });}我们来看看如何计算评分码，如何实现自动加速。比较简单，不多说。

函数score(){ var score=parsent($(' # score ')。text())；if(score==0){ window . global speed=1；//获得一定分数后自动加速} $('#score ')。文字(评分1分)；}最后，我们来看看游戏结束后如何处理。游戏结束后，先暂停游戏的行踪，然后弹出一个模态对话框，让用户选择返回还是重新开始。如果你重新开始，分数会清零，游戏界面清空，然后自动触发开始按钮开始下一轮游戏。

函数gameOver() {//暂停游戏并显示模式框$('#stop ')。触发器(' click ')；window.globalIsClearT1=true$('.阴影’)。removeClass(“隐藏”)。下一个()。removeClass(“隐藏”)；$(' #再次')。单击(function(){ clearInterval(window . global t1))；$('.阴影’)。addClass('hide ')。下一个()。add CLaSS(' hide ')；$('#score ')。文本(0)；clearAll()；init()；$('#begin ')。触发器(' click ')；//window . global t1=setInterval(move，30)})；至此，整个游戏基本实现。游戏并不复杂，但是完全没有bug运行起来就没那么简单了。如果你感兴趣，你可以写下来。以上代码有什么问题可以问我。

上面jquery游戏的简单实现就是边肖分享给大家的全部内容。希望能给大家一个参考，多多支持我们。