帝王谷资源网 Design By www.wdxyy.com

效果图如下所示:

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

标签:
js,小游戏,js,踩白块

帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?