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

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

藏色散人

Release： 2021-01-11 11:08:51

Original

5190 people have browsed it

How to implement the Don’t Step on White Blocks game using native js. In previous articles, we have successively explained important parts of the js methods to you. The content of this section continues to be combined with the previous article "Native JS Implementation of the Don't Step on White Blocks Game (9)" to introduce the remaining js implementation methods.

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

The relevant js code of the Don’t Step on White Blocks game 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

Based on the content of the previous article, we will continue to introduce to you the click bonus part. js method, here we add a mouse event obj.onmousedown. When we click the mouse in the game area, the above function method will be called and an event object, which is a div element, will be obtained. In this method, the scoring situation is judged through the if statement.

When the clicked div block class is i (which means a colored square), change its background color backgroundColor (here is gray #bbb). Then cover "i" and clear the spaces, then calculate the score num and display it in count.

When the white area is clicked, the game ends, the final score is calculated, and the timer is turned off.

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)"

This article This is an introduction to some methods of implementing the Don’t Step on White Blocks game using native JS. Due to the length of the article, we will continue to explain it to you in later articles.

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