首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

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

所属分类： 网络编程 / JavaScript 阅读数： 549
收藏 0 赞 0 分享

本文实例讲述了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>

效果：

完整示例代码：

<!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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

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

更多精彩内容其他人还在看

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件，用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结，需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里，我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明，这个主题很难，在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript （用setTimeout而非setInterval）

javascript （用setTimeout而非setInterval）如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于，如果明确设置了o中flag的值（非null/undefined/0""/等值），自然test就会取跟o.flag一样的值；如果没有设置，test就会默认为false，而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器，内容很多，方法实用，推荐

最近用javascript写了一个简单的计算器，自己测试感觉还好,代码都给了注释，非常不错，推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器，里面涉及到一些方法还是很实用的哦，新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素，remove用来删除元素，或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域，没有private修饰符，但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量（除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求，或没有我们需要的功能，那么我们就可以自己扩展下，个性化js
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22