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

本文实例讲述了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%;
  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("");
  $.each([0, 1, 2], function(k, v) {
    if(k == "2") {
      if(v == rand) {
 $(".main .main-each").first().append("");
      } else {
 $(".main .main-each").first().append("");
      }
    } else {
      if(v == rand) {
 $(".main .main-each").first().append("");
      } else {
 $(".main .main-each").first().append("");
      }
    }
  })
}
$(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

score:0 time:00:00

GAME OVER

总分：

用时：

效果：

完整示例代码：





jQuery别踩白块游戏

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%;
  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;
}





  
  
    score:0
    
    time:00:00
  
  
  
    
  
  
  
    
    
  
  
  
    
      
 
   GAME OVER
   总分：
   用时：

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

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

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

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

JavaScript相关栏目本月热门文章