原生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)  }

结合上篇文章内容，我们继续为大家介绍点击加分部分的js方法，这里我们添加了一个鼠标事件obj.onmousedown，当我们在游戏区域点击鼠标的同时，就会调用上述函数方法并获取到一个event对象即一个div元素。在此方法中，通过if语句判断计分情况。

当点击的是白色区域，则游戏结束，计算最后得分，并关闭定时器。

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

本篇文章就是关于原生js实现别踩白块小游戏的部分方法介绍，由于文章篇幅原因，我们会在后期的文章中继续为大家讲解。

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