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 相关文章推荐
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 Javascript
js实现滑动进度条效果
Aug 21 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
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
layui table 参数设置方法
2018/08/14 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
python实现对一个完整url进行分割的方法
2015/04/29 Python
Java分治归并排序算法实例详解
2017/12/12 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
Python中最大递归深度值的探讨
2019/03/05 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
运动会开幕式邀请函
2014/01/22 职场文书
工作时间上网检讨书
2014/02/03 职场文书
房屋委托书范本
2014/04/04 职场文书
2014年班主任工作总结
2014/11/08 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
小学英语听课心得体会
2016/01/14 职场文书
关于感恩的作文
2019/08/26 职场文书
python_tkinter事件类型详情
2022/03/20 Python