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

2024-04-10 20:43:01

本文实例讲述了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手速测试小游戏实现思路详解

(-1)写在前面我用的chrome49,jquery3.0,我得到过399分,信不信由你. (1)设计思路两个p元素放在div里,每个p元素的高度和宽度都和div一样,当鼠标放在div上时,第一个p向上移动(更改marginTop值),当鼠标离开div上时,第一个p向下移动. (2)知识储备 a. :nth-child #lol p:nth-child(1),当前元素p相对于他的父元素的所有子元素,如果第一个元素是p则匹配成功. #lol :nth-child(1) 相当于#lol *:nt
jQuery制作拼图小游戏

源代码思路分析: [一]如何生成图片网格,我想到两种方法: (1)把这张大图切成16张小图,然后用img标签的src (2)只有一张大图,然后每个元素的背景图用css的background-position进行切割定位,这样就需要16个数组[0,0],[-150,0],[-300,0]..........(我采用这种) [二]图片背景定位数组与布局定位数组在选择了使用CSS定位切图,就需要生成数据. 需要的css背景定位数组为:[0,0],[-150,0],[-300,0],[-450,0]
jQuery网页版打砖块小游戏源码分享

这是一款基于jQuery实现网页版打砖块小游戏源码,满满的童年回忆. 为大家分享的jQuery实现网页版打砖块小游戏源码如下效果演示源码下载 <!DOCTYPE html> <html lang="en" > <head> <meta charset="gb2312" /> <title>jQuery网页版打砖块小游戏源码</title> <link href="css/ma
jQuery编写网页版2048小游戏

大致介绍看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了,但是自己实现起来会遇到各种问题.比如,在最后判断游戏是否结束的时候,我写的语句语法是对的,但就是不执行.最后通过对视频源码的分析对比,发现原作者写的一个setTimeout定时器有额外的意思,本来我以为它就是简单的一个延时动画,其实他是在等待另外一个函数执行完毕.-_-||.最后还是很高兴能写出来,也改进了一些源
jQuery实现简易的天天爱消除小游戏

今天分享一枚小demo:<天天爱消除游戏>,我想大家对这个游戏不陌生吧!?近期挺火的一款手游妙味的讲师也很喜欢玩这款游戏 ,课余时间就写了个简易版天天的爱消除,除了PC端以外,试试在iPad.iPhone上玩吧~ 涉及知识点:JS.HTML5; 游戏截图: CSS: *{ margin:0; padding:0;} #ul1{ position:relative; margin:20px auto; background:#1b1f2b; overflow:hidden;} #ul1 li{
jQuery实现别踩白块儿网页版小游戏

大致介绍终于结束了考试,放假回家了.这次的别踩白块儿网页版要比之前做的 jQuery编写网页版2048小游戏要简单一点,基本的思路都差不多. 这篇博客并不是详细的讲解,只是大致介绍函数的作用,其中实现的细节注释中有解释,网上的这个源码有点乱,如果想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴) 思路这个小游戏可以抽象化分为3层 ◆最底下的一层是基本的样式(可见的) ◆中间的层是最主要的,是一个4x3的二维数组,游戏中我们都是对这个二维数组进行操作(不可见的) ◆最上面
jQuery实现拼图小游戏(实例讲解)

小熊维尼拼图 jQuery代码实现拼图小游戏,鼠标选中拼块,用上下左右键移动拼块. html代码 <div id="box-div">  <div id="tips"> <p>\(╯-╰)/ 哎呦,走不通啦!</p> </div> <div id="container"> <div class="row"&g
基于jquery实现九宫格拼图小游戏

九宫格拼图小游戏是小时候比较常见的小游戏之一.闲着无聊就用js简单写了一个. 游戏的玩法很简单.九宫格中有八个小图片.随机打乱之后,将八张小图片拼接成一个完整的图. html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <style> body{ border: 0; } .out{ width: 606px; height: 606px; margin: 0 aut
jQuery实现贪吃蛇小游戏（附源码下载）

前言相信贪吃蛇的游戏大家都玩过.在那个水果机还没有流行,人手一部诺基亚的时代,贪吃蛇是手机中的必备游戏.笔者闲的无聊的时候就拿出手机来玩上几局,挑战一下自己的记录. 后来上大学了,用c语言做过贪吃蛇的游戏,不过主要是通过函数来控制(PS:现在让我看代码都看不懂(⊙﹏⊙)).现在学习前端框架之后,通过jQuery来实现一个贪吃蛇的游戏效果,虽然游戏界面比(bu)较(ren)简(zhi)陋(shi),但是主要学习一下游戏中面向对象和由局部到整体的思想. 设计思想在开始写代码前首先让我们来构思一下
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: 20
Matlab实现别踩白块小游戏的示例代码

目录游戏效果游戏说明完整代码 pianoKeys.m(主函数) getMusic.m(用于获取音乐数据) 游戏效果游戏说明 ‘A’,‘S’,‘D’,F’按键代表四条通路(点击S开始),按错按钮或黑块接触底限均为失败. 完整代码分两个m文件,应放在同一文件夹 pianoKeys.m(主函数) function pianoKeys %======================%======== [v1,notes,fs]=getMusic;%读取音乐 %=================
使用jquery实现别踩白块小游戏的方法实例

目录前言 html 首页字体中间的表格实现每一行的黑块随机显示按键事件 key事件 adds speedup 源码总结前言掘金真的是太懂了,写游戏的活动,想不参加都难!第一个,别踩白块! 先来看效果~ 如上图所示,jkl三个键对应三列,左上是得分,得分右边是时间(没做倒计时...)敲击对应的按键来进行游戏,如果敲错了就会弹出得分与所用时间接下来就开始肢解这个小游戏,来一步一步的分析究竟是怎么实现的,let's go~ html <body> <div class=&quo
js实现一款简单踩白块小游戏(曾经很火)

效果图如下所示: html <div class="bigbox">  <div class="gamequyu">  <div class="start">游戏开始</div>  <div class="zhuti"&g
javascript实现别踩白块儿小游戏程序

最近有朋友找我用JS帮忙仿做一个别踩白块的小游戏程序,但他给的源代码较麻烦,而且没有注释,理解起来很无力,我就以自己的想法自己做了这个小游戏,主要是应用JS对DOM和数组的操作. 程序思路:如图:将游戏区域的CSS设置为相对定位.溢出隐藏;两块"游戏板"上分别排布着24块方格,黑色每行随机产生一个,"游戏板"向下滚动并交替显示,将每个操作板的黑块位置存入数组,每次点击时将数组pop出来进行比对(我觉得亮点在这--). 这里是游戏的GitHub地址,大家可以到里点击中
Java实现的打地鼠小游戏完整示例【附源码下载】

本文实例讲述了Java实现的打地鼠小游戏.分享给大家供大家参考,具体如下: 这里涉及到java线程和GUI的相关知识,一个简单的java小游戏打地鼠,有兴趣的朋友可以优化一下.先来看看运行效果: 具体代码: Mouse.java: import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Image; import java.awt.Toolkit; import java.awt
原生JS实现《别踩白块》游戏（兼容IE）

兼容了IE,每得20分就加速一次!!! 效果如下: 图(1) 游戏初始图(2) 游戏开始代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> *{ margin: 0; padding: 0; } .box { margin: 50px auto 0 auto; width: 400px; height:
jquery之别踩白块游戏的简单实现

前端学习要告一段落了,也没机会写什么像样的东西,然后无意中想起某人以前给我玩了一下别踩白块的游戏,手残还被嘲讽了下,现在想起来觉得这游戏实现起来也不难,于是上星期用jquery写了一个别踩白块的小游戏,就像当初学python的时候一样写了一个2048.然后今天正好抽个时间写个博客纪录下,算是对前一段时间学习的总结,没有玩过的可以去下一个原版的来玩一下,游戏很简单,就是从不断下落的方块中点击黑快,如果点击到百块或者有黑块没被点击到,游戏就算结束.游戏实现起来不难,都是一些小知识点.当时写的时候,脑
JS实现别踩白块游戏的示例代码

目录实现思路核心代码 HTML代码 CSS代码 JS代码实现思路 1.offsetTop,与style.top 2.我们看到的是白块在向下运动,其实不是,政治运动的是装着白块的盒子,白块只是被装在了盒子里面被带着向下,而向下运动也只是改变top值.同事盒子total的高度也不是无限长的能一直向下运动,所以肯定是运动到某个地方他又回去了. childNodes:由childNodes属性返回的数组中包含着所有类型的节点,所有的属性节点和文本节点也包含在其中.(不能乱用) JS获取元素的lef
PyQt5实现类似别踩白块游戏

本文实例为大家分享了PyQt5实现类似别踩白块游戏的具体代码,供大家参考,具体内容如下 #引入可能用到的库 from PyQt5.QtWidgets import (QWidget, QApplication,QPushButton,QMessageBox,QLabel,QDesktopWidget,QMainWindow) from PyQt5.QtCore import Qt,QRect,QSize,QPoint,QTimer from PyQt5.QtGui import QPainter

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

相关推荐

随机推荐