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

概述原生JS实现别踩白块小游戏（十） 原生Js实现别踩白块小游戏的方法，我们在前面的文章中，都陆续为大家讲解过了其中重要部分的Js方法。本节内容继续结合上篇文章《原生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)}

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

当点击的div块class为i时（即表示有颜色的方块），就改变它的背景颜色backgroundcolor（这里是灰色#bbb）。然后对“i"进行覆盖空格清空，再计算分数num++，并显示在count中。

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

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

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

以上是内存溢出为你收集整理的原生JS实现别踩白块小游戏（十）全部内容，希望文章能够帮你解决原生JS实现别踩白块小游戏（十）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。