首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

jQuery实现的别踩白块小游戏完整示例

Posted in jQuery onJanuary 07, 2019

本文实例讲述了jQuery实现的别踩白块小游戏。分享给大家供大家参考，具体如下：

首先引入jquery.js

1.css

html,
body,
.contain {
  width: 100%;
  height: 96%;
  overflow: hidden;
  background-color: #FFFFCC;
}
.text-center {
  text-align: center;
}
.score {
  font-size: 25px;
  color: #CB2D01;
  margin-top: 20px;
  margin-bottom: 20px;
}
.score lable{
  padding: 0 20px;
}
.main {
  position: relative;
  text-align: center;
  width: 100%;
  height: 80%;/*/454px*/
  margin: auto;
  border: 1px solid #A0A0A0;
  overflow: hidden;
}
.main-each{
  position: initial;
  width: 100%;
  height: 20%;
}
.item{
  width: 33%;
  height: 100%;
  border:1px solid #C6C6C6;
  border-top: 0;
  border-left: 0;
  float: left;
}
.item-bor{
  border-right: 0;
}
.back-black{
  background-color: #333333;
}
.operation {
  margin-top: 20px;
  font-size: 18px;
  text-align: center;
}
button {
  position: relative;
  z-index: 999;
  padding: 6px 10px;
  font-size: 20px;
  border-radius: 4px;
  color: white;
}
#start,
#reset {
  background-color: #5CB85C;
  border: 1px solid #4cae4c;
  z-index: 1;
}
#reset:hover,
#start:hover {
  background-color: #449d44;
  border-color: #398439;
}
#stop,
#return {
  color: #fff;
  background-color: #f0ad4e;
  border: 1px solid #eea236;
}
#return:hover,
#stop:hover {
  background-color: #ec971f;
  border-color: #d58512;
}
#cover,
.result {
  position: fixed;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .2);
}
.resultBox {
  position: fixed;
  z-index: 2;
  top: 30%;
  left: 25%;
  width: 50%;
  height: 400px;
  text-align: center;
  background-color: #EEE8D8;
}
.over {
  width: 80%;
  height: 200px;
  background-color: #606060;
  margin: auto;
  top: 10%;
  position: relative;
  color: white;
  text-align: center;
}
.over div{
  padding-top: 10%;
}
.cover-p{
  margin: 10px;
}
.result .operation {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 20px;
}
.hidden {
  display: none;
}
.show {
  display: block;
}

2.js

$(function() {
  init();
});
function init() {






 // 初始生成5*3的div
  $.each([0, 1, 2, 3, 4], function() {
    insertDiv();
  });
}
function insertDiv() {
  var rand = Math.floor(Math.random() * 3); // 生成一个0到3 的随机数，用来作为判断生成黑块的位置
  $(".main").prepend("<div class='main-each'></div>");
  $.each([0, 1, 2], function(k, v) {
    if(k == "2") {
      if(v == rand) {
        $(".main .main-each").first().append("<div tag='back-black' class='item item-bor back-black'></div>");
      } else {
        $(".main .main-each").first().append("<div class='item item-bor'></div>");
      }
    } else {
      if(v == rand) {
        $(".main .main-each").first().append("<div tag='back-black' class='item back-black'></div>");
      } else {
        $(".main .main-each").first().append("<div class='item'></div>");
      }
    }
  })
}
$(function() {
  //开始
  var c = 0;
  var t;
  //计算时间
  function timedCount() {
    $(".totalTime").text(formatTime(c));
    c = c + 1;
    t = setTimeout(function() {
      timedCount()
    }, 1000);
  }
  //时间换算
  function formatTime(seconds) {
    var min = Math.floor(seconds / 60),
      second = seconds % 60,
      hour, newMin, time;
    if(min > 60) {
      hour = Math.floor(min / 60);
      newMin = min % 60;
    }
    if(second < 10) {
      second = '0' + second;
    }
    if(min < 10) {
      min = '0' + min;
    }
    return time = hour ? (hour + ':' + newMin + ':' + second) : (min + ':' + second);
  }
  //开始
  $("#start").click(function() {
    $("#cover").fadeOut();
    timedCount();
    clickThing();
  });
  //暂停
  $("#stop").click(function() {
    $("#cover").fadeIn();
    clearTimeout(t);
  });
  //移动
  var x = 0;
  var y = 0;
  function clickThing() {
    $(".main").on('click', '.item', function() {
      x = x + 1;
      if($(this).attr("tag") == "back-black") {
        y = y + 1;
        //滑动效果
        $(".main .main-each").animate({
          top: 90,
          speed:500
        });
        insertDiv();
        $(this).css("background", "#FFFFCC");
        //游戏结束
        if(x == "9999") {
          clearTimeout(t);
          $(".result").fadeIn();
        }
      } else {
        clearTimeout(t);
        $(".result").fadeIn();
      }
      $(".totalPoints").text(y);
    });
  };
  //重新开始
  $("#reset").click(function() {
    $("#cover").fadeOut();
    c = 0;
    y = 0;
    $(".totalPoints").text(y);
    timedCount();
    $(".result").fadeOut();
    init();
  });
});

3.html

<div class="contain">
  <!--score-->
  <div class="score text-center">
    <lable>score:<span class="totalPoints">0</span>
    </lable>
    <lable>time:<span class="totalTime">00:00</span></lable>
  </div>
  <!--main-->
  <div class="main">
    <!--生成格子-->
  </div>
  <!--operation-->
  <div class="operation">
    <button id="start" type="button">开始</button>
    <button id="stop" type="button">暂停</button>
  </div>
  <!--result-->
  <div class="result hidden">
    <div class="resultBox">
      <div class="over">
        <div>
          <p class="cover-p"><span>GAME OVER</span></p>
          <p class="cover-p">总分：<span class="totalPoints"></span></p>
          <p class="cover-p">用时：<span class="totalTime"></span></p>
        </div>
      </div>
      <div class="operation">
        <button id="reset" type="button">重来</button>
      </div>
    </div>
  </div>
  <div id="cover"></div>
</div>

效果：

jQuery实现的别踩白块小游戏完整示例

完整示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery别踩白块游戏</title>
<style>
html,
body,
.contain {
  width: 100%;
  height: 96%;
  overflow: hidden;
  background-color: #FFFFCC;
}
.text-center {
  text-align: center;
}
.score {
  font-size: 25px;
  color: #CB2D01;
  margin-top: 20px;
  margin-bottom: 20px;
}
.score lable{
  padding: 0 20px;
}
.main {
  position: relative;
  text-align: center;
  width: 100%;
  height: 80%;/*/454px*/
  margin: auto;
  border: 1px solid #A0A0A0;
  overflow: hidden;
}
.main-each{
  position: initial;
  width: 100%;
  height: 20%;
}
.item{
  width: 33%;
  height: 100%;
  border:1px solid #C6C6C6;
  border-top: 0;
  border-left: 0;
  float: left;
}
.item-bor{
  border-right: 0;
}
.back-black{
  background-color: #333333;
}
.operation {
  margin-top: 20px;
  font-size: 18px;
  text-align: center;
}
button {
  position: relative;
  z-index: 999;
  padding: 6px 10px;
  font-size: 20px;
  border-radius: 4px;
  color: white;
}
#start,
#reset {
  background-color: #5CB85C;
  border: 1px solid #4cae4c;
  z-index: 1;
}
#reset:hover,
#start:hover {
  background-color: #449d44;
  border-color: #398439;
}
#stop,
#return {
  color: #fff;
  background-color: #f0ad4e;
  border: 1px solid #eea236;
}
#return:hover,
#stop:hover {
  background-color: #ec971f;
  border-color: #d58512;
}
#cover,
.result {
  position: fixed;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .2);
}
.resultBox {
  position: fixed;
  z-index: 2;
  top: 30%;
  left: 25%;
  width: 50%;
  height: 400px;
  text-align: center;
  background-color: #EEE8D8;
}
.over {
  width: 80%;
  height: 200px;
  background-color: #606060;
  margin: auto;
  top: 10%;
  position: relative;
  color: white;
  text-align: center;
}
.over div{
  padding-top: 10%;
}
.cover-p{
  margin: 10px;
}
.result .operation {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 20px;
}
.hidden {
  display: none;
}
.show {
  display: block;
}
</style>
</head>
<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<div class="contain">
  <!--score-->
  <div class="score text-center">
    <lable>score:<span class="totalPoints">0</span>
    </lable>
    <lable>time:<span class="totalTime">00:00</span></lable>
  </div>
  <!--main-->
  <div class="main">
    <!--生成格子-->
  </div>
  <!--operation-->
  <div class="operation">
    <button id="start" type="button">开始</button>
    <button id="stop" type="button">暂停</button>
  </div>
  <!--result-->
  <div class="result hidden">
    <div class="resultBox">
      <div class="over">
        <div>
          <p class="cover-p"><span>GAME OVER</span></p>
          <p class="cover-p">总分：<span class="totalPoints"></span></p>
          <p class="cover-p">用时：<span class="totalTime"></span></p>
        </div>
      </div>
      <div class="operation">
        <button id="reset" type="button">重来</button>
      </div>
    </div>
  </div>
  <div id="cover"></div>
</div>
<script>
$(function() {
  init();
});
function init() {






 // 初始生成5*3的div
  $.each([0, 1, 2, 3, 4], function() {
    insertDiv();
  });
}
function insertDiv() {
  var rand = Math.floor(Math.random() * 3); // 生成一个0到3 的随机数，用来作为判断生成黑块的位置
  $(".main").prepend("<div class='main-each'></div>");
  $.each([0, 1, 2], function(k, v) {
    if(k == "2") {
      if(v == rand) {
        $(".main .main-each").first().append("<div tag='back-black' class='item item-bor back-black'></div>");
      } else {
        $(".main .main-each").first().append("<div class='item item-bor'></div>");
      }
    } else {
      if(v == rand) {
        $(".main .main-each").first().append("<div tag='back-black' class='item back-black'></div>");
      } else {
        $(".main .main-each").first().append("<div class='item'></div>");
      }
    }
  })
}
$(function() {
  //开始
  var c = 0;
  var t;
  //计算时间
  function timedCount() {
    $(".totalTime").text(formatTime(c));
    c = c + 1;
    t = setTimeout(function() {
      timedCount()
    }, 1000);
  }
  //时间换算
  function formatTime(seconds) {
    var min = Math.floor(seconds / 60),
      second = seconds % 60,
      hour, newMin, time;
    if(min > 60) {
      hour = Math.floor(min / 60);
      newMin = min % 60;
    }
    if(second < 10) {
      second = '0' + second;
    }
    if(min < 10) {
      min = '0' + min;
    }
    return time = hour ? (hour + ':' + newMin + ':' + second) : (min + ':' + second);
  }
  //开始
  $("#start").click(function() {
    $("#cover").fadeOut();
    timedCount();
    clickThing();
  });
  //暂停
  $("#stop").click(function() {
    $("#cover").fadeIn();
    clearTimeout(t);
  });
  //移动
  var x = 0;
  var y = 0;
  function clickThing() {
    $(".main").on('click', '.item', function() {
      x = x + 1;
      if($(this).attr("tag") == "back-black") {
        y = y + 1;
        //滑动效果
        $(".main .main-each").animate({
          top: 90,
          speed:500
        });
        insertDiv();
        $(this).css("background", "#FFFFCC");
        //游戏结束
        if(x == "9999") {
          clearTimeout(t);
          $(".result").fadeIn();
        }
      } else {
        clearTimeout(t);
        $(".result").fadeIn();
      }
      $(".totalPoints").text(y);
    });
  };
  //重新开始
  $("#reset").click(function() {
    $("#cover").fadeOut();
    c = 0;
    y = 0;
    $(".totalPoints").text(y);
    timedCount();
    $(".result").fadeOut();
    init();
  });
});
</script>
</body>
</html>

感兴趣的朋友可以使用本站在线HTML/CSS/JavaScript代码运行工具：http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery实现的别踩白块小游戏完整示例

- Author -

The_road_of_ordinary

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 #jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 #jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 #jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 #jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 #jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 #jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 #jQuery
opencv(7) PyTorch(1) moviepy(1) 模糊匹配(1) iOS(1) FuzzyWuzzy(1) Pyecharts(7) compose(3) 模型保存加载(1) Athens(1)
You might like
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
JavaScript常用脚本汇总（一）
2015/03/04 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
深入理解JS中Number()，parseInt()，parseFloat()三者比较
2018/08/24 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
Python多线程爬虫简单示例
2016/03/04 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
python构建指数平滑预测模型示例
2019/11/21 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
python扫描线填充算法详解
2020/02/19 Python
Python二元算术运算常用方法解析
2020/09/15 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
比驿：全球酒店比价网
2018/06/20 全球购物
Harman Audio官方商店：购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
物流专业专科生职业生涯规划书
2014/09/14 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
2014年团工作总结
2014/11/27 职场文书
怎样写辞职信
2015/02/27 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
搬迁通知
2015/04/20 职场文书
公文写作指导之倡议书！
2019/07/03 职场文书