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

下面我们接着之前的文章内容，继续给大家介绍实现别踩白块小游戏的js方法。

相关js代码如下：

//移动效果  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)   }

此段代码中，getComputedStyle(obj, null)['top']方法是用来实现给main获取设置top属性。然后我们通过if语句进行判断，如果这里的top值大于等于0，就调用CDiv方法即动态创建div,并给其添加class名为“row”，然后设置top初始值为-150px。

别踩白块小游戏完整代码参考：《原生JS实现别踩白块小游戏（一）》

那么由于文章篇幅的原因，本篇文章就是介绍到这里，在后期的文章中，我们继续为大家逐步介绍别踩白块小游戏中的js实现方法。

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