Native JS implements the don't step on white block game (8)-HTML Knowledge-php.cn

Native JS implements the don't step on white block game (8)

藏色散人

Release： 2019-01-09 13:25:04

Original

5500 people have browsed it

In the previous article "Native JS Implementation of Don’t Step on White Blocks Game (7)", we explained the implementation for everyone Don't step on some of the js methods in the white block game.

Native JS implements the don't step on white block game (8)

Let's continue the previous article and continue to introduce to you the js method to implement the don't step on the white block game.

The relevant js code is as follows:

//移动效果

function move(obj) {

    //默认速度与计分

    var speed = 5, num = 0;

    obj.timer = setInterval(function () {

        //速度

        var step = parseInt(getComputedStyle(obj, null)[&#39;top&#39;]) + speed;

        obj.style.top = step + &#39;px&#39;

        if (parseInt(getComputedStyle(obj, null)[&#39;top&#39;]) >= 0) {

            CDiv(&#39;row&#39;);

            obj.style.top = -150 + &#39;px&#39;;

        }

        if (obj.children.length == 6) {

            for (var i = 0; i < 4; i++) {

                if (obj.children[obj.children.length - 1].children[i].className == &#39;i&#39;) {

                    //游戏结束

                    obj.style.top = &#39;-150px&#39;;

                    count.innerHTML = &#39;游戏结束,最高得分: &#39; + num;

                    //关闭定时器

                    clearInterval(obj.timer);

                    //显示开始游戏

                    go.children[0].innerHTML = &#39;游戏结束&#39;;

                    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 == &#39;i&#39;) {

                //点击后的盒子颜色

                (event.target ? event.target : event.srcElement).style.backgroundColor = "#bbb";

                //清除盒子标记

                (event.target ? event.target : event.srcElement).className = &#39;&#39;;

                //计分

                num++;

                //显示得分

                count.innerHTML = &#39;当前得分: &#39; + num;

 

            }

            else {

                //游戏结束

                obj.style.top = 0;

                count.innerHTML = &#39;游戏结束,最高得分: &#39; + num;

                //关闭定时器

                clearInterval(obj.timer);

                //显示开始游戏

                go.children[0].innerHTML = &#39;游戏结束&#39;;

                go.style.display = "block";

            }

            //盒子加速

            if (num % 10 == 0) {

                speed++;

            }

        }

        //松开触发停止

        obj.onmouseup = function (event) {
        }
    }, 20)


}

Copy after login

In this code, the getComputedStyle(obj, null)['top'] method is used to obtain and set the top attribute for main. Then we judge through the if statement. If the top value here is greater than or equal to 0, we call the CDiv method to dynamically create a div, add the class name "row" to it, and then set the initial value of top to -150px.

Complete code reference for the Don’t Step on White Blocks game: "Native JS Implementation of the Don’t Step on White Blocks Game (1)"

So due to the length of the article, this article This article is introduced here. In later articles, we will continue to gradually introduce to you the js implementation method in the game "Don't Step on the White Blocks".

The above is the detailed content of Native JS implements the don't step on white block game (8). For more information, please follow other related articles on the PHP Chinese website!