Native JS implémente le jeu Ne marchez pas sur les blocs blancs (3)

Dans l'article précédent, je vous ai donné une brève explication de la partie HTML du code source de l'implémentation JS native du jeu Don't Step on White Blocks. Les amis intéressés peuvent se référer à "Implémentation Native JS du jeu Don't Step on the White Blocks (1) " et "Implémentation Native JS du jeu Don't Step on the White Blocks ( 2) ".

Continuons à présenter les parties CSS et JS basées sur son code source.

Le code CSS est le suivant :

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

En fait, la partie CSS est très simple. Ce à quoi vous devez faire attention, c'est le débordement : caché. attribut de style, qui est l'effet caché du débordement. Cette propriété définit comment le contenu qui déborde de la zone de contenu de l'élément sera traité. Si la valeur est scroll, l'agent utilisateur fournit un mécanisme de défilement, qu'il soit requis ou non. Par conséquent, il est possible que des barres de défilement apparaissent même si tout rentre dans la zone de l'élément. Définir sa valeur sur caché signifie que le contenu sera coupé et que le contenu restant sera invisible.

Le code JS est le suivant :

<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 est la partie principale qui fait bouger toute la page statique. L'idée de mise en œuvre est également très simple. Obtenez d'abord l'élément div, laissez le div se déplacer, créez le div dynamiquement, remplissez le div manquant après son déplacement, créez de manière aléatoire des carrés colorés, liez l'événement de clic, cliquez pour déterminer le gagnant ou perdre. , et les restrictions après la fin du jeu, y compris le traitement des blocs de couleur atteignant le fond et le traitement des points supplémentaires pour l'accélération.

Pour des raisons de longueur, cet article est une brève introduction aux parties css et js de l'implémentation js native du jeu ne marchez pas sur le bloc blanc. Dans les articles ultérieurs, nous nous concentrerons sur le js. partie. Méthode de mise en œuvre du code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!