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

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

藏色散人

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

Original

6073 people have browsed it

We have explained step by step how to implement the Don’t Step on White Blocks game using native js in the previous article.

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

Let's continue to combine the previous article "Native JS to implement the don't step on the white block game (8)" to introduce to you don't step on the white block The specific implementation method of movement effects in mini-games.

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 previous article, we talked about how to use the if statement to determine the value of top.

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

Here we continue to explain the subsequent code. Then in the above code, another if judgment statement appears. The if statement here is used to determine whether the length of the div "row" under main is 6, that is, 6 rows of divs. If it is 6 (obj.children.length== 6), the for statement loop is used to determine whether the length of each row (including 4 divs), whether there is a colored square (div with class "i").

If there is i, the game is over, then calculate the score and restore the top value to -150px, then close the timer clearInterval(obj.timer), set the display to start the game.

Due to the length of the article, this article will introduce it to you here. In later articles, we will continue to introduce to you the method of implementing the don’t step on the white block game in native js.

For the complete code of the Don’t Step on the White Blocks game, please refer to: "Native JS Implementation of the Don’t Step on the White Blocks Game (1)"

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