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

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

藏色散人

Release： 2019-01-09 13:19:11

Original

5076 people have browsed it

In the previous article "Native JS implements the don't step on the white block game (5) "In ", we analyzed the CDiv method in the game source code. So this section will continue to introduce you to the move method.

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

Let's combine the relevant js code parts to introduce to you the implementation method of movement and speed in the game "Don't Step on the White Blocks".

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 the above code, we define a move method. This move method is used to implement the functions of dynamic running of the game and timing and scoring.

For example, when we comment out the following code:

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]);
        }

Copy after login

and then run it in the foreground, we can find that when we click to start the game, the game area is not there regardless of whether we click on it or not. Any reaction, even if you click on the white block, it will not show the end of the game, it will just keep moving down. Then this code is used to determine whether the game starts and ends.

Native JS implements the dont step on white block game (6)

For another example, we comment out the code for clicking and scoring in the above code:

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++;
    }
}

Copy after login

You can find that after the game starts, click on the game The click scoring function will no longer appear in the area.

Native JS implements the dont step on white block game (6)

#So I believe everyone already has an understanding of the functions of these two pieces of code. Due to the length of the article, we will continue to analyze the specific code implementation methods for you in later articles.

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