Native JS implements the don’t step on white block game (3)

In the previous article, I have given you a brief explanation of the HTML part of the source code of the native JS implementation of the Don’t Step on White Blocks game. Interested friends can refer to "Native JS Implementation of the Don't Step on White Blocks Game (1)" and "Native JS Implementation of the Don't Step on the White Blocks Game (2)".

Let’s continue to combine the source code and introduce the css and JS parts to you.

The CSS code is as follows:

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        margin: 50px auto 0 auto;
        width: 400px;
        height: auto;
        border: solid 1px #222;
    }

    #cont {
        width: 400px;
        height: 600px;
        position: relative;
        overflow: hidden;
    }

    #go {
        width: 100%;
        height: 600px;
        position: absolute;
        top: 0;
        font: 700 60px &#39;微软雅黑&#39;;
        text-align: center;
        z-index: 99;
    }

    #go span {
        cursor: pointer;
        background-color: #fff;
        border-bottom: solid 1px #222;
    }

    #main {
        width: 400px;
        height: 600px;
        position: relative;
        top: -150px;
    }

    .row {
        width: 400px;
        height: 150px;
    }

    .row div {
        width: 99px;
        height: 149px;
        border: solid 1px #222;
        float: left;
        border-top-width: 0;
        border-left-width: 0;
        cursor: pointer;
    }
    #count {
        border-top: solid 1px #222;
        width: 400px;
        height: 50px;
        font: 700 36px/50px &#39;微软雅黑&#39;;
        text-align: center;
    }

</style>

In fact, the css part is very simple. What you need to pay attention to is the overflow: hidden style attribute, which is the effect of overflow and hiding. This property defines how content that overflows the element's content area will be handled. If the value is scroll, the user agent provides a scrolling mechanism whether required or not. Therefore, it is possible that scrollbars will appear even if everything fits inside the element box. Setting its value to hidden means that the content will be trimmed and the remaining content will be invisible.

The JS code is as follows:

<script>
    var main = document.getElementById(&#39;main&#39;)
    go = document.getElementById(&#39;go&#39;)
    count = document.getElementById(&#39;count&#39;);

    cols = [&#39;#1AAB8A&#39;, &#39;#E15650&#39;, &#39;#121B39&#39;, &#39;#80A84E&#39;];

    function CDiv(classname) {
        var Div = document.createElement(&#39;div&#39;)
        index = Math.floor(Math.random() * 4)
        Div.className = classname
        for (var i = 0; i < 4; i++) {
            var iDiv = document.createElement(&#39;div&#39;)
            Div.appendChild(iDiv)
        }
        if (main.children.length == 0) {
            main.appendChild(Div);
        } else {
            main.insertBefore(Div, main.children[0]);
        }

        Div.children[index].style.backgroundColor = cols[index];
        Div.children[index].className = "i";
    }

    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)


    }
    go.children[0].onclick = function () {
        if (main.children.length) {
            //暴力清楚main里面所有盒子
            main.innerHTML = &#39;&#39;;
        }
        //清空计分
        count.innerHTML = &#39;游戏开始&#39;;
        //隐藏开始盒子
        this.parentNode.style.display = "none";
        move(main);
    }
</script>

js is the main part that makes the entire static page move. The implementation idea is also very simple. First get the div element, let the div move, create the Div dynamically, fill in the missing div after it moves, randomly create colored squares, bind the click event, click to determine the winner or lose, and limit after the game is over. Processing, including the processing of color blocks bottoming out, and the processing of extra points for acceleration.

Due to length reasons, this article is a brief introduction to the css and js parts of the native js implementation of the don’t step on the white block game. Then in later articles, we will focus on the js part. Code implementation method.

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