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

Comment implémenter le mini-jeu Don't Step on White Blocks en utilisant du JS natif. Dans les articles précédents, nous vous avons successivement expliqué des parties importantes des méthodes JS. Le contenu de cette section continue d'être combiné avec l'article précédent "JS natif pour implémenter le jeu ne marchez pas sur le bloc blanc (9) " pour présenter les méthodes d'implémentation js restantes.

Le code js pertinent du jeu Don't Step on White Blocks est le suivant :

//移动效果

function move(obj) {

    //默认速度与计分

    var speed = 5, num = 0;

    obj.timer = setInterval(function () {

        //速度

        var step = parseInt(getComputedStyle(obj, null)['top']) + speed;

        obj.style.top = step + 'px'

        if (parseInt(getComputedStyle(obj, null)['top']) >= 0) {

           CDiv('row');

            obj.style.top = -150 + 'px';

        }

        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)

}

Basé sur le contenu de l'article précédent , nous continuerons à vous présenter le clic sur des points supplémentaires Dans le cadre de la méthode js, nous ajoutons ici un événement de souris obj.onmousedown Lorsque nous cliquons avec la souris dans la zone de jeu, la méthode de fonction ci-dessus sera appelée et un objet événement, qui. est un élément div, sera obtenu. Dans cette méthode, la situation de notation est jugée via l'instruction if.

Lorsque la classe de bloc div cliquée est i (ce qui signifie un carré coloré), changez sa couleur d'arrière-plan backgroundColor (ici le gris #bbb). Couvrez ensuite "i" et effacez les espaces, puis calculez le score num++ et affichez-le en nombre.

Lorsque vous cliquez sur la zone blanche, le jeu se termine, le score final est calculé et le chronomètre est désactivé.

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

Cet article Ceci est une introduction à quelques méthodes d'implémentation du jeu Don't Step on White Blocks en utilisant JS natif. En raison de la longueur de l'article, nous continuerons à vous l'expliquer dans des articles ultérieurs.

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!