js实现一款简单踩白块小游戏(曾经很火)

效果图如下所示:

html

 <div class="bigbox">
    <!-- 显示游戏的区域 -->
    <div class="gamequyu">
      <!-- 上面显示一个游戏开始的按钮 -->
      <div class="start">游戏开始</div>
      <!-- 再显示一个游戏的主体部分 -->
      <div class="zhuti"></div>
      <div class="zhezhaoceng"></div>

    </div>
    <!-- 下面再显示一个计分的盒子 -->
    <div class="jifen">当前分数:0</div>
  </div>

js

<script>
    // 先找到主体内容的盒子,添加到这个盒子中去
    var zhuti = document.getElementsByClassName('zhuti')[0];
    //找到计分 , 每点击一次, 就让分数++;
    var jifen = document.getElementsByClassName('jifen')[0];
    // 找到游戏开始按钮, 点击让它影藏,结束时显示并把里面的文字改变为'游戏结束'
    var start = document.getElementsByClassName('start')[0];
    // 找到遮罩层, 结束游戏的时候显示
    var zhezhaoceng = document.getElementsByClassName('zhezhaoceng')[0];
    // addbox('row')
    //动态创建盒子的函数
    function addbox(classname) {
      // 思路:
      // 1: 先封装一个函数动态的创建盒子;
      // 2: 一个盒子里装了四个小盒子;
      // 3: 随机一个数,让这四个小盒子的某一个的颜色改为黑色 ;
      // 4: 给这个小盒子添加类名,设置样式;
      // 5: 随机数作为下标, 给这个随机数的下标的小盒子添加一个类名;
      // 6: 添加到'zhuti'里面去,显示在页面上(如果zhuti里面有内容了,就要添加到所有内容的最前面,如果没有,接直接添加)
      // 生成随机数作为四个盒子的下标
      var index = Math.floor(Math.random() * 4)
      // console.log(index);
      //创建一个盒子;
      var bigdiv = document.createElement('div');
      bigdiv.className = classname;
      // 再依次创建四个小盒子;添加到刚刚创建的大盒子中;
      for (var i = 0; i < 4; i++) {
        var smallbox = document.createElement('div')
        bigdiv.appendChild(smallbox)
      }
      // 判断主体里面有没有盒子 ;
      // 如果已经存在盒子,就要添加到它们的最前面
      // 如果没有,就可以直接添加到页面上
      if (zhuti.children.length == 0) {
        zhuti.appendChild(bigdiv)
      } else {
        zhuti.insertBefore(bigdiv, zhuti.children[0])
      }
      // 给随机下标的盒子添加样式的背景色为黑色;
      bigdiv.children[index].style.backgroundColor = 'black';
      // 再给这个随机的盒子添加一点东西,可以用来做判断
      bigdiv.children[index].className = 'random_box';
    }
    //计分与控制速度的函数
    function move(obj) {
      // 封装一个计时器移动的方法, 让主体内的内容动起来;
      // 思路:
      //   1: 先获取元素的最终样式,距离顶部的top值;
      //   2: 声明两个变量; 一个用来改变元素距离顶部的top值; 一个用来计分数;
      var num = 0;
      var sudu = 5;
      // 创建一个计时器让它缓动显示到页面
      //在样式里面就设置了top值为-150px;
      //通过计时器让它的top值缓动到页面, 当它的top值等于0的时候,又让它的top值变为-150px;
      //就调用创建元素的方法再创建一个盒子,让它插在这个显示在页面上的盒子的前面
      obj.timeID = setInterval(function () {
        var nowtop = parseInt(getComputedStyle(obj)['top']) + sudu;
        // console.log(nowtop);
        obj.style.top = nowtop + 'px';
        if (parseInt(getComputedStyle(obj)['top']) >= 0) {
          addbox('row')
          obj.style.top = -150 + 'px'
        }
        // 判断条件:在移动的时候,如果用户没有点击到带有颜色的盒子,让盒子超过了界限;就结束游戏;
        if (obj.children.length == 6) {
          for (var i = 0; i < 4; i++) {
            if (obj.children[obj.children.length - 1].children[i].className == 'random_box') {

              jifen.innerHTML = '当前最高得分:' + num;
              start.style.display = 'block'
              start.innerHTML = '小朋友, 游戏结束';
              start.style.display = 'block';
              start.style.backgroundColor = 'green';
              start.style.height = 60 + 'px';
              start.style.fontSize = 30 + 'px';
              zhezhaoceng.style.display = 'block';
              clearInterval(obj.timeID)

            }
          }
          // 让主体的内容的长度永远等于6,如果不等于6,就会出现按下第一个带'random_box'类名的小盒子,之后就不会再回到以上的判断里面了;
          obj.removeChild(obj.children[obj.children.length - 1])
        }
        // console.log(obj.children.length);

        // 判断用户点击的时候:条件:如果没有点中指定的盒子(类名为'random_box')的盒子,就结束游戏;不然就计分num++;
        obj.onmousedown = function (event) {
          // 根据事件对象里面的事件源来进行判断;
          //当它的事件源的名字等于'random_box'的时候;
          if (event.target.className == 'random_box') {
            // 让这个事件源的的背景色变为红色;
            event.target.style.backgroundColor = 'red';
            //当用户点击了事件源时,把他的类名清空, 不然只变了颜色,到了第6个,判断类名还是'random_box'时, 就会结束游戏;
            event.target.className = '';
            // 计分
            num++;
            // 显示在当前得分的盒子里
            jifen.innerHTML = '当前得分' + num;
          } else {
            // 结束游戏
            clearInterval(obj.timeID)
            start.style.display = 'block';
            start.style.backgroundColor = 'green';
            start.style.height = 60 + 'px';
            start.style.fontSize = 30 + 'px';
            start.innerHTML = '游戏结束!再来一局';
            jifen.innerHTML = '最终得分' + num;
            // 让遮罩层显示
            zhezhaoceng.style.display = 'block';
          }
          // 加速(判断分数到了多少时,让主体下降的top值变大)
          if (num % 5 == 0) {
            sudu++;
          }
        }

      }, 20)
    }
    // 当它点击开始按钮的时候,再调用函数;运行起来;
    start.onclick = function () {
      //如果事重新来一局,那就先把页面上已经创建的盒子先清除;
      if (zhuti.children.length != 0) {
        zhuti.innerHTML = ''
      }
      // 让遮罩层隐藏
      zhezhaoceng.style.display = 'none';
      // 让开始的按钮影藏
      this.style.display = 'none';
      jifen.innerHTML = '当前得分:0'
      move(zhuti)
    }
  </script>

css

<style>
    .bigbox {
      width: 400px;
      height: auto;
      border: 1px solid #2d2d2d;
      margin: 100px auto 0 auto;
    }

    .gamequyu {
      width: 100%;
      height: 600px;
      position: relative;
      overflow: hidden;
      background-color: #fefefe;
      /* background: url("./dog.png") no-repeat; */
      background-size: 100%;
    }

    .start {
      position: absolute;
      width: 400px;
      height: 50px;
      color: white;
      text-align: center;
      line-height: 50px;
      background-color: brown;
      font-size: 30px;
      cursor: pointer;
      z-index: 9999;
    }

    .zhuti {
      width: 100%;
      height: 600px;
      position: absolute;
      top: -150px;
    }

    .jifen {
      width: 400px;
      height: 50px;
      font-size: 30px;
      text-align: center;
      line-height: 50px;
      color: white;
      margin: 0 auto;
      background-color: brown;
    }

    .row {
      width: 400px;
      height: 150px;

    }

    .row div {
      width: 100px;
      height: 150px;
      border: 1px solid #343434;
      border-top-width: 0;
      border-left-width: 0;
      float: left;
      cursor: pointer;
      box-sizing: border-box;
    }

    .zhezhaoceng {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 999;
      display: none;
    }
  </style>

总结

以上所述是小编给大家介绍的js实现一款简单踩白块小游戏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(0)

相关推荐

  • javascript实现别踩白块儿小游戏程序

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

  • 20行js代码实现的贪吃蛇小游戏

    前言 最近在csdn上看到一位大神用20行代码就写出了一个贪吃蛇的小游戏,感觉被惊艳到了,就试着读了一下这段代码,阅读过程中不断为作者写法的巧妙而叫绝,其中我发现自己对运算符优先级和一些js的技巧不是很清楚,所以看完之后决定把思路分享出来,方便和我一样的小白学习. 我对代码稍稍做了些修改,并添加了一些注释,方便理解. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="

  • js实现九宫格拼图小游戏

    效果如下: 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>九宫格拼图</title> <style> *{ padding: 0; margin: 0; border: 0; } /* *是通配符,给所有的元素去掉默认样式,因为有的浏览器会默认加上一些样式,这可能会给布局带来问题 */ body{ width: 100

  • Javascript别踩白块儿(钢琴块儿)小游戏实现代码

    游戏唯一的一个规则,我们只需要不断踩着黑色方块前进即可,这里根据方向键来踩白块 在规定时间内,每走一次分数加100 游戏内的每一排都是一个有四个元素的数组,当正确的踩到黑块前进后,前一个数组内所有的对象样式属性(backgroundColor)赋值给其后一个数组内的对应位置处的对象,便实现了前进的功能,很简单的思想 <!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8&

  • js实现打地鼠小游戏

    话不多说,请看代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>打地鼠</title> <style type="text/css"> #content { width:960px; margin:0 auto; text-align:center; margin-top:40px; } #form1 {

  • js实现一款简单踩白块小游戏(曾经很火)

    效果图如下所示: html <div class="bigbox"> <!-- 显示游戏的区域 --> <div class="gamequyu"> <!-- 上面显示一个游戏开始的按钮 --> <div class="start">游戏开始</div> <!-- 再显示一个游戏的主体部分 --> <div class="zhuti"&g

  • 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实现《别踩白块》游戏(兼容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

  • 用js编写简单的贪吃蛇小游戏

    本文实例为大家分享了js编写简单的贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 代码如下: HTML 5 部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n

随机推荐