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


Posted in Javascript onDecember 02, 2019

效果图如下所示:

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

Javascript 相关文章推荐
学习ExtJS Panel常用方法
Oct 07 Javascript
JavaScript之自定义类型
May 04 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 #Javascript
VUE 动态组件的应用案例分析
Dec 02 #Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 #Javascript
vue 动态表单开发方法案例详解
Dec 02 #Javascript
vue 开发之路由配置方法详解
Dec 02 #Javascript
vue 开发企业微信整合案例分析
Dec 02 #Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 #Javascript
You might like
PHP 加密解密内部算法
2010/04/22 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
浅析Ajax语法
2016/12/05 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
Python 如何实现访问者模式
2020/07/28 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
领导班子三严三实对照检查材料
2014/09/25 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
Java spring单点登录系统
2021/09/04 Java/Android
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP