jquery之别踩白块游戏的简单实现


Posted in Javascript onJuly 25, 2016

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

jquery之别踩白块游戏的简单实现  jquery之别踩白块游戏的简单实现

 一、游戏html页面

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

得分标题栏,

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

开始暂停按钮一栏

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

下面是代码部分

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Title</title> 
  <link href="../css/game.css" rel="stylesheet" type="text/css"> 
</head> 
 
<body> 
<div class="main"> 
  <h3>Score:<span id="score">0</span></h3> 
  <div id="content" class="content"> 
    <div id="inner"></div> 
  </div> 
  <div class="btn"> 
    <div class="container"> 
      <button id="begin">开始</button> 
      <button id="stop">暂停</button> 
    </div> 
  </div> 
 
  <div class="shadow hide"></div> 
  <div class="alert-box hide"> 
    <div class="game-over"> 
      <img style="opacity: 0.8" src="../pic/gg.jpg"> 
    </div> 
    <div class="btn"> 
      <button id="again">重新开始</button> 
      <button id="back">返回</button> 
    </div> 
  </div> 
</div> 
 
<script src="../js/jquery-1.12.4.js"></script> 
<script src="../js/game.js"></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 的随机数,用来作为判断生成黑块的位置 
  $("#inner").prepend("<div class='item'></div>");  
  $.each([0, 1, 2, 3], function (k, v) { 
    if (v == rand) { 
      $("#inner .item").first().append("<div class='black col'></div>"); 
    } else { 
      $("#inner .item").first().append("<div class='col'></div>"); 
    } 
  }) 
} 
 
 
function init() {







// 初始生成4*4的div 
  $.each([0, 1, 2, 3], function () { 
    insertDiv(); 
  }); 
}

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

function move() { 
  var ctop = parseInt($("#inner").offset().top); 
  ctop += window.globalSpeed;




// 自定义的全局变量, 每次下落偏移的距离 
  $("#inner").offset({top: ctop}); 
  if (ctop >= 114) { 
    insertDiv(); 
    $("#inner").offset({top: 12}); 


 // 刚好移动一个item后在上移一个item 
    delDiv(); 
  } 
}

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

function bindStart() { 
  $("#begin").mouseover(function () { 
    $(this).css("cursor", 'pointer'); 
  }).click(function () { 
    if(window.globalIsClearT1){ 

// 自定义的全局变量,看定时器是否清楚 
 
    }else { 
      clearInterval(window.globalT1); 
//没有清除的话,先清除,避免两次按下开始按钮 
    } 
    window.globalT1 = setInterval(move, 30); 
    window.globalStartClick = true;


//全局变量,是否开始标志位,只有开始了,才能点击 
  }) 
} 
 
function bindStop() { 
  $("#stop").mouseover(function () { 
    $(this).css("cursor", 'pointer'); 
  }).click(function () { 
    clearInterval(window.globalT1); 
    window.globalStartClick = false; 
    window.globalIsClearT1 = true; 
  }) 
}

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

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

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

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

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

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

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

以上这篇jquery之别踩白块游戏的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 入门教程 [翻译] 推荐
Aug 17 Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
js下载文件并修改文件名
May 08 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
js实现AI五子棋人机大战
May 28 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 #Javascript
JavaScript表单焦点自动切换代码
Jul 24 #Javascript
javascript中sort排序实例详解
Jul 24 #Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 #Javascript
关于input全选反选恶心的异常情况
Jul 24 #Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 #Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 #Javascript
You might like
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
jQuery图片轮播的具体实现
2013/09/11 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
基于Python的文件类型和字符串详解
2017/12/21 Python
python3.6.3安装图文教程 TensorFlow安装配置方法
2020/06/24 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
wxpython绘制音频效果
2019/11/18 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
Python对excel的基本操作方法
2021/02/18 Python
接口可以包含哪些成员
2012/09/30 面试题
remote接口和home接口主要作用
2013/05/15 面试题
咨询公司各岗位职责
2013/12/02 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
商场促销活动方案
2014/02/08 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
2014年学校工作总结
2014/11/20 职场文书
检讨书怎么写
2015/05/07 职场文书
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js
nginx 配置指令之location使用详解
2022/05/25 Servers
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers