保存到桌面加入收藏设为首页
java开发
当前位置:首页 > java开发

jquery之别踩白块游戏的实现-安度博客

时间:2019-02-04 14:53:09   作者:   来源:   阅读:71   评论:0
内容摘要:  出处http://www.cnblogs.com/Wxtrkbc/p/5687112.html  前端学习要告一段落了,也没时机写什么像样的工具,然后无意中想起某人以前给我玩了一下别踩白块的游戏,手残还被讥笑了下,现在想起来以为这游戏实现起来也不难,于是上星期用jquery写......
  •   出处http://www.cnblogs.com/Wxtrkbc/p/5687112.html 

      前端学习要告一段落了,也没时机写什么像样的工具,然后无意中想起某人以前给我玩了一下别踩白块的游戏,手残还被讥笑了下,现在想起来以为这游戏实现起来也不难,于是上星期用jquery写了一个体踩白块的小游戏,就像当初学python的时候一样写了一个2048。然后今天正好抽个时间写个博客纪录下,算是对前一段时间学习的总结,没有玩过的可以去下一个原版的来玩一下,游戏很简朴,就是从不停下落的方块中点击黑快,如果点击到百块或者有黑块没被点击到,游戏就算竣事。游戏实现起来不难,都是一些小知识点。其时写的时候,脑袋有点糊,有一bug看了半天没解决,厥后第二天早上脑袋清醒的时一看就看出来,顺便在这里提醒自己一定不要在脑袋不清醒的时候写代码。好了说了这么多先来看一下效果图,这里别吐槽我的css样式设计就好。。。

        

     一、游戏html页面

    游戏的html界面很是简朴,分为4部门,

    得分标题栏, 游戏界面主题容器,开始的时候为一个div,然后用jquery动态生成黑白格子 开始暂停按钮一栏 游戏竣事时候显示的模态框

    下面是代码部门

    <!DOCTYPE html><html lang=&#39;en&#39;><head> <meta charset=&#39;UTF-8&#39;> <title>Title</title> <link href=&#39;../css/game.css&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;></head><body><div class=&#39;main&#39;> <h3>Score:<span id=&#39;score&#39;>0</span></h3> <div id=&#39;content&#39; class=&#39;content&#39;> <div id=&#39;inner&#39;></div> </div> <div class=&#39;btn&#39;> <div class=&#39;container&#39;> <button id=&#39;begin&#39;>开始</button> <button id=&#39;stop&#39;>暂停</button> </div> </div> <div class=&#39;shadow hide&#39;></div> <div class=&#39;alert-box hide&#39;> <div class=&#39;game-over&#39;> <img style=&#39;opacity: 0.8&#39; src=http:\&#39;../pic/gg.jpg/&#39;> </div> <div class=&#39;btn&#39;> <button id=&#39;again&#39;>重新开始</button> <button id=&#39;back&#39;>返回</button> </div> </div></div><script src=&#39;../js/jquery-1.12.4.js&#39;></script><script src=&#39;../js/game.js&#39;></script></body></html>

    二、css结构  

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

    *{ margin: 0; padding: 0;}.main{ width: 808px; margin: 50px auto; background: gray; min-height: 544px; position: relative;}.content{ width: 408px; margin: 0 auto; height:408px; border: 2px solid green; background-color: white; position: relative; top:0; overflow: hidden;}#inner{ position: relative; top:-102px;}.item{ height: 102px;}.item *{ float: left; height: 100px; width: 100px; background-color: white; border: 1px solid black;}.black{ background-color: black;}h3{ text-align: center; padding-top: 20px; padding-bottom: 20px;}h3 span{ color:brown;}.hide{ display: none;}.shadow{ position: absolute; left: 0; bottom: 0; right: 0; top: 0; background-color: gray; opacity: 0.6;}.alert-box{ position: absolute; width: 300px; height: 300px; left: 50%; top:50%; margin-left: -150px; margin-top: -150px; background-color: white;}.alert-box .game-over{ margin-left: 20px; margin-top: 30px;}.alert-box .btn{ width: 150px; position: relative; margin-left: auto; margin-right: auto; margin-top: 20px;}.main .btn .container{ width: 150px; margin: 20px auto;}button{ cursor: pointer; border: 0; display: inline-block; width: 70px; height: 30px; line-height: 30px; text-align: center; background-color: cyan;}

    三、jquery实现  

    游戏最焦点的部门就是jquery实现了,主要的功效如下

    游戏的初始化 如何动态插入一行div和删除一行div 开始暂停按钮的事件绑定 游戏历程中点击百块和黑快的事件委托 游戏如何移动以及如何得分 如何自动增加白块下落速度 如何判定游戏竣事

      下面来看一下初始化代码的实现,初始化之前写了个函数,自动插入一行,而且在这一行4个div中某一个为随机的黑块供游戏中点击,剩下3个白块,怎么随机生成,怎么动态建设div这里需要点小技巧,详细看下面。生成一行div的函数完成后只需在初始化函数内里调用4次即可

    function insertDiv() { var rand = Math.floor(Math.random() * 4);        // 生成一个0到3 的随机数,用来作为判断生成黑块的位置 $(&#39;#inner&#39;).prepend(&#39;<div class=&#39;item&#39;></div>&#39;); $.each([0 1 2 3] function (k v) { if (v == rand) { $(&#39;#inner .item&#39;).first().append(&#39;<div class=&#39;black col&#39;></div>&#39;); } else { $(&#39;#inner .item&#39;).first().append(&#39;<div class=&#39;col&#39;></div>&#39;); } })}function init() {                // 初始生成4*4的div $.each([0 1 2 3] function () { insertDiv(); });}

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

    function move() { var ctop = parseInt($(&#39;#inner&#39;).offset().top); ctop += window.globalSpeed;            // 自界说的全局变量, 每次下落偏移的距离 $(&#39;#inner&#39;).offset({top: ctop}); if (ctop >= 114) { insertDiv(); $(&#39;#inner&#39;).offset({top: 12});        // 恰好移动一个item后在上移一个item delDiv(); }}

     之后就是写开始,暂停部门,这里主要是对计时器的使用,这里需要注意的是每次点击的时候,都要先判断定时器是否已经清除,否则这里会有bug,下面来直接看一下代码

    function bindStart() { $(&#39;#begin&#39;).mounk" target="_blank">seover(function () { $(this).css(&#39;cursor&#39; &#39;pointer&#39;); }).click(function () { if(window.globalIsClearT1){       // 自界说的全局变量,看定时器是否清楚 }else { clearInterval(window.globalT1);   //没有清除的话,先清除,制止两次按下开始按钮 } window.globalT1 = setInterval(move 30); window.globalStartClick = true;      //全局变量,是否开始标志位,只有开始了,才气点击 })}function bindStop() { $(&#39;#stop&#39;).mounk" target="_blank">seover(function () { $(this).css(&#39;cursor&#39; &#39;pointer&#39;); }).click(function () { clearInterval(window.globalT1); window.globalStartClick = false; window.globalIsClearT1 = true; })}

      写到这里,再就是看一下,每次点击的时候如何操作,是否得分,照旧点错了游戏竣事,下面来看一下代码,界面上有4*4个格子,需要事件委托,来判断是哪一个白块被点击,如果点击的是黑快,将其变为白块,而且加上一分即可,否则点错的话,游戏就竣事 

    function bindClick() { $(&#39;#inner&#39;).click(function (e) { if (window.globalStartClick) { var current = $(e.target); if (current.hasClass(&#39;black&#39;)) { current.removeClass(&#39;black&#39;); score(); } else { gameOver(); } } });}

    下面来看一下如何盘算得分的代码,以及如何实现自动的加速,较量简朴就不多说了

    function score() { var score = parseInt($(&#39;#score&#39;).text()); if(score%10 == 0){ window.globalSpeed += 1; //获得一定的分数后就自动加速 } $(&#39;#score&#39;).text(score + 1);}

      最厥后看一下,游戏竣事的时候如那里置惩罚,游戏竣事的话,先暂停游戏下落,然后弹出模态对话框,让用户选择返回,照旧重新来过,重新来过的话,分数清零,游戏界面清空,然后初始化再在自动触发开始按钮,开始下一轮游戏,  

    function gameOver() { //暂停游戏,显示模态框 $(&#39;#stop&#39;).trigger(&#39;click&#39;); window.globalIsClearT1 = true; $(&#39;.shadow&#39;).removeClass(&#39;hide&#39;).next().removeClass(&#39;hide&#39;); $(&#39;#again&#39;).click(function () { clearInterval(window.globalT1); $(&#39;.shadow&#39;).addClass(&#39;hide&#39;).next().addClass(&#39;hide&#39;); $(&#39;#score&#39;).text(0); clearAll(); init(); $(&#39;#begin&#39;).trigger(&#39;click&#39;); // window.globalT1 = setInterval(move 30) });  

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

      


最近更新

精彩推荐

阅读排行

本站所有站内信息仅供娱乐参考,不作任何商业用途,不以营利为目的,专注分享快乐,欢迎收藏本站!
所有信息均来自:百度一下 (威尼斯人官网)