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

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

藏色散人

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

original

6016 Les gens l'ont consulté

Nous avons expliqué étape par étape comment implémenter le jeu Don't Step on White Blocks en utilisant du js natif dans l'article précédent.

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

Maintenant, nous allons continuer à combiner l'article précédent "Native JS pour implémenter le jeu Ne marchez pas sur le bloc blanc (8) " pour vous présenter le jeu Ne marchez pas sur le bloc blanc. La méthode spécifique de mise en œuvre des effets de mouvement dans les mini-jeux.

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

Nous avons expliqué comment utiliser l'instruction if pour déterminer la valeur de top dans l'article précédent.

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

Ici, nous continuons à expliquer le code suivant. Dans le code ci-dessus, une autre déclaration de jugement if apparaît. L'instruction if ici est utilisée pour déterminer si la longueur de la "ligne" div sous main est de 6, c'est-à-dire 6 lignes de divs. Si elle est de 6 (obj.children.length== 6), la boucle d'instruction for est. utilisé pour déterminer si la longueur de chaque ligne (y compris 4 divs), s'il y a un carré coloré (div de classe "i").

S'il y a i, le jeu est terminé, puis calculez le score et restaurez la valeur supérieure à -150px, puis fermez le timer clearInterval(obj.timer), réglez l'affichage pour démarrer le jeu.

En raison de la longueur de l'article, cet article vous le présentera ici. Dans les articles ultérieurs, nous continuerons à vous présenter la méthode de mise en œuvre du ne pas marcher sur le bloc blanc. jeu utilisant js natif.

Pour le code complet du jeu Don't Step on the White Blocks, veuillez vous référer à : "Implémentation Native JS du jeu Don't Step on the White Blocks (1) "

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!