原生JS实现别踩白块小游戏（三）

下面我们继续结合其源代码，给大家介绍css和JS部分。

CSS代码如下：

<style>     * {         margin: 0;         padding: 0;     }      .box {         margin: 50px auto 0 auto;         width: 400px;         height: auto;         border: solid 1px #222;     }      #cont {         width: 400px;         height: 600px;         position: relative;         overflow: hidden;     }      #go {         width: 100%;         height: 600px;         position: absolute;         top: 0;         font: 700 60px '微软雅黑';         text-align: center;         z-index: 99;     }      #go span {         cursor: pointer;         background-color: #fff;         border-bottom: solid 1px #222;     }      #main {         width: 400px;         height: 600px;         position: relative;         top: -150px;     }      .row {         width: 400px;         height: 150px;     }      .row div {         width: 99px;         height: 149px;         border: solid 1px #222;         float: left;         border-top-width: 0;         border-left-width: 0;         cursor: pointer;     }     #count {         border-top: solid 1px #222;         width: 400px;         height: 50px;         font: 700 36px/50px '微软雅黑';         text-align: center;     }  </style>

其实css部分是非常简单的，需要大家注意的就是overflow: hidden样式属性，也就是溢出隐藏的效果。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。设置其值为hidden，则表示内容会被修剪，并且其余内容是不可见的。

JS代码如下：

<script>     var main = document.getElementById('main')     go = document.getElementById('go')     count = document.getElementById('count');      cols = ['#1AAB8A', '#E15650', '#121B39', '#80A84E'];      function CDiv(classname) {         var Div = document.createElement('div')         index = Math.floor(Math.random() * 4)         Div.className = classname         for (var i = 0; i < 4; i++) {             var iDiv = document.createElement('div')             Div.appendChild(iDiv)         }         if (main.children.length == 0) {             main.appendChild(Div);         } else {             main.insertBefore(Div, main.children[0]);         }          Div.children[index].style.backgroundColor = cols[index];         Div.children[index].className = "i";     }      function move(obj) {         //默认速度与计分         var speed = 5, num = 0;         obj.timer = setInterval(function () {             //速度             var step = parseInt(getComputedStyle(obj, null)['top']) + speed;             obj.style.top = step + 'px'             if (parseInt(getComputedStyle(obj, null)['top']) >= 0) {                 CDiv('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 == 'i') {                         //游戏结束                         obj.style.top = '-150px';                         count.innerHTML = '游戏结束,最高得分: ' + num;                         //关闭定时器                         clearInterval(obj.timer);                         //显示开始游戏                         go.children[0].innerHTML = '游戏结束';                         go.style.display = "block";                     }                 }                 obj.removeChild(obj.children[obj.children.length - 1]);             }             //点击与计分             obj.onmousedown = function (event) {                 //点击的不是白盒子                 // 兼容IE                 event = event || window.event;                 if ((event.target ? event.target : event.srcElement).className == 'i') {                     //点击后的盒子颜色                     (event.target ? event.target : event.srcElement).style.backgroundColor = "#bbb";                     //清除盒子标记                     (event.target ? event.target : event.srcElement).className = '';                     //计分                     num++;                     //显示得分                     count.innerHTML = '当前得分: ' + num;                  }                 else {                     //游戏结束                     obj.style.top = 0;                     count.innerHTML = '游戏结束,最高得分: ' + num;                     //关闭定时器                     clearInterval(obj.timer);                     //显示开始游戏                     go.children[0].innerHTML = '游戏结束';                     go.style.display = "block";                 }                 //盒子加速                 if (num % 10 == 0) {                     speed++;                 }             }             //松开触发停止             obj.onmouseup = function (event) {              }          }, 20)       }     go.children[0].onclick = function () {         if (main.children.length) {             //暴力清楚main里面所有盒子             main.innerHTML = '';         }         //清空计分         count.innerHTML = '游戏开始';         //隐藏开始盒子         this.parentNode.style.display = "none";         move(main);     } </script>

js就是让整个静态页面动起来的主要部分。其实现思路也很简单，先获取div元素，让div动起来，动态创建Div，动起来后填补缺失的div，随机创建有颜色的方块，绑定点击事件，点击判断输赢，游戏结束后的限制处理，有颜色方块触底的处理，还有加分加速的处理。

由于篇幅的原因，本篇文章就是先关于原生js实现别踩白块小游戏中css和js部分的简单介绍，那么在后期的文章中，我们会重点讲解其js部分的代码实现方法。

以上就是原生JS实现别踩白块小游戏（三）的详细内容，更多内容请关注技术你好其它相关文章！