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 相关文章推荐
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
微信小程序url与token设置详解
Sep 26 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 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
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
JS自动缩小超出大小的图片
2012/10/12 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
浅谈python多线程和队列管理shell程序
2015/08/04 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
简单了解Django ContentType内置组件
2019/07/23 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
python 8种必备的gui库
2020/08/27 Python
python实现视频压缩功能
2020/12/18 Python
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
作文批改评语大全
2014/04/23 职场文书
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL