Native JS implementiert das Spiel „Don’t Step on White Block“ (8)

Im vorherigen Artikel „Native JS-Implementierung von Don't Step on White Blocks Game (7) “ haben wir die Implementierung erklärt Für alle. Treten Sie nicht auf einige der js-Methoden im White-Block-Spiel.

Lassen Sie uns den Inhalt des vorherigen Artikels fortsetzen und Ihnen weiterhin die js-Methode vorstellen, um das Spiel „Nicht auf den weißen Block treten“ zu implementieren.

Der relevante js-Code 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)


}

In diesem Code wird die Methode getComputedStyle(obj, null)['top'] verwendet, um das Top-Attribut für main abzurufen und festzulegen. Dann beurteilen wir anhand der if-Anweisung. Wenn der Top-Wert hier größer oder gleich 0 ist, rufen wir die CDiv-Methode auf, um dynamisch ein Div zu erstellen, fügen den Klassennamen „row“ hinzu und legen dann den Anfangswert von Top fest bis -150px.

Vollständige Codereferenz für das Spiel „Don't Step on White Blocks“: „Native JS Implementation of the Don't Step on White Blocks Game (1)“

Aufgrund der Länge des Artikels wird dieser Artikel hier vorgestellt. In späteren Artikeln werden wir weiterhin Schritt für Schritt die js-Implementierungsmethode im Spiel „Don't Step on the White Block“ vorstellen.

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