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.

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:

//移動(dòng)效果

function move(obj) {

    //默認(rèn)速度與計(jì)分

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

                    //游戲結(jié)束

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

                    count.innerHTML = &#39;游戲結(jié)束,最高得分: &#39; + num;

                    //關(guān)閉定時(shí)器

                    clearInterval(obj.timer);

                    //顯示開(kāi)始游戲

                    go.children[0].innerHTML = &#39;游戲結(jié)束&#39;;

                    go.style.display = "block";

                }

            }

            obj.removeChild(obj.children[obj.children.length - 1]);

        }

        //點(diǎn)擊與計(jì)分

        obj.onmousedown = function (event) {

            //點(diǎn)擊的不是白盒子

            // 兼容IE

            event = event || window.event;

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

                //點(diǎn)擊后的盒子顏色

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

                //清除盒子標(biāo)記

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

                //計(jì)分

                num++;

                //顯示得分

                count.innerHTML = &#39;當(dāng)前得分: &#39; + num;

 

            }

            else {

                //游戲結(jié)束

                obj.style.top = 0;

                count.innerHTML = &#39;游戲結(jié)束,最高得分: &#39; + num;

                //關(guān)閉定時(shí)器

                clearInterval(obj.timer);

                //顯示開(kāi)始游戲

                go.children[0].innerHTML = &#39;游戲結(jié)束&#39;;

                go.style.display = "block";

            }

            //盒子加速

            if (num % 10 == 0) {

                speed++;

            }

        }

        //松開(kāi)觸發(fā)停止

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


}

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!