首页
所有分类
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 append与appendTo方法比较
May 24 jQuery
jQuery取得元素标签名称小结（附代码）
Aug 16 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jQuery实现简单日历效果
Jul 05 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
循环(3) 嵌套(1) 安卓(1) 移动开发(2) Sqlite(2) 二维数组(2) 多维数组(1) OpenLayer(1) android studio(3) IDEA(2)
You might like
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
Python中的默认参数详解
2015/06/24 Python
Django中使用locals()函数的技巧
2015/07/16 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
Python实现把类当做字典来访问
2019/12/16 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
New Balance英国官方网站：始于1906年，百年慢跑品牌
2016/12/07 全球购物
NBA德国官方网上商店：NBA Store德国
2018/04/13 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
运动会跳远广播稿
2014/02/04 职场文书
租赁意向书范本
2014/04/01 职场文书
好听的队名和口号
2014/06/09 职场文书
年度安全生产目标责任书
2014/07/23 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
企业年会祝酒词
2015/08/11 职场文书
六年级数学教学反思
2016/02/16 职场文书
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL