Native JS implémente le jeu Ne marchez pas sur les blocs blancs (8)-connaissance HTML-php.cn

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

藏色散人

Libérer： 2019-01-09 13:25:04

original

5502 Les gens l'ont consulté

Dans l'article précédent "Implémentation Native JS du jeu Don't Step on White Blocks (7) ", nous avons expliqué l'implémentation pour tout le monde N'utilisez pas certaines méthodes js dans le jeu des blocs blancs.

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

Continuons le contenu de l'article précédent et continuons à vous présenter la méthode js pour implémenter le jeu ne marchez pas sur le bloc blanc.

Le code js pertinent est le suivant :

//移动效果

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)


}

Copier après la connexion

Dans ce code, la méthode getComputedStyle(obj, null)['top'] est utilisée pour obtenir et définir l'attribut supérieur pour principal. Ensuite, nous jugeons à travers l'instruction if. Si la valeur supérieure ici est supérieure ou égale à 0, nous appelons la méthode CDiv pour créer dynamiquement un div, y ajoutons le nom de classe « ligne », puis définissons la valeur initiale de top. à -150px.

Référence complète du code pour le jeu Don't Step on White Blocks : "Implémentation Native JS du jeu Don't Step on White Blocks (1)"

En raison de la longueur de l'article, cet article est présenté ici. Dans les articles ultérieurs, nous continuerons à présenter étape par étape la méthode d'implémentation js dans le jeu Ne marchez pas sur le bloc blanc.

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!