Native JS implementiert das Spiel „Don't Step on White Block' (10)

So implementieren Sie das Minispiel „Don’t Step on White Blocks“ mit nativem JS. In früheren Artikeln haben wir Ihnen nacheinander wichtige Teile der JS-Methoden erklärt. Der Inhalt dieses Abschnitts wird weiterhin mit dem vorherigen Artikel „Native JS zur Implementierung des Don't Step on the White Block-Spiels (9) “ kombiniert, um die verbleibenden JS-Implementierungsmethoden vorzustellen.

Der relevante js-Code des Don't Step on White Blocks-Spiels lautet wie folgt:

//移动效果

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)

}

Basierend auf dem Inhalt des vorherigen Artikels haben wir Wir werden Ihnen weiterhin den Click-Bonus-Teil js vorstellen. Hier fügen wir ein Mausereignis obj.onmousedown hinzu. Wenn wir mit der Maus in den Spielbereich klicken, wird die obige Funktionsmethode aufgerufen und ein Ereignisobjekt, das ein div ist Element, wird erhalten. Bei dieser Methode wird die Bewertungssituation anhand der if-Anweisung beurteilt.

Wenn die angeklickte Div-Blockklasse i ist (was ein farbiges Quadrat bedeutet), ändern Sie die Hintergrundfarbe „backgroundColor“ (hier ist grau #bbb). Decken Sie dann „i“ ab und löschen Sie die Leerzeichen. Berechnen Sie dann die Punktzahl num++ und zeigen Sie sie in count an.

Wenn auf den weißen Bereich geklickt wird, endet das Spiel, das Endergebnis wird berechnet und der Timer wird ausgeschaltet.

Den vollständigen Code des Spiels „Don't Step on the White Blocks“ finden Sie unter: „Native JS-Implementierung des Spiels „Don't Step on the White Blocks“ (1) "

Dieser Artikel ist eine Einführung in einige Methoden zur Implementierung des Don't Step on White Blocks-Spiels mit nativem JS. Aufgrund der Länge des Artikels werden wir ihn Ihnen weiterhin erklären in späteren Artikeln.

Das obige ist der detaillierte Inhalt vonNative JS implementiert das Spiel „Don't Step on White Block' (10). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!