Wir haben im vorherigen Artikel Schritt für Schritt erkl?rt, wie Sie das Spiel ?Don’t Step on White Blocks“ mit nativem JS implementieren.

Jetzt werden wir den vorherigen Artikel ?Native JS zur Implementierung des Don't Step on the White Block Game (8) “ weiter kombinieren Machen Sie sich mit dem Spiel ?Nicht auf den wei?en Block treten“ vertraut. Die spezifische Implementierungsmethode für Bewegungseffekte in Minispielen.

Der relevante js-Code lautet wie folgt:

//移動效果
function move(obj) {
    //默認(rèn)速度與計分
    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;) {
                    //游戲結(jié)束
                    obj.style.top = &#39;-150px&#39;;
                    count.innerHTML = &#39;游戲結(jié)束,最高得分: &#39; + num;
                    //關(guān)閉定時器
                    clearInterval(obj.timer);
                    //顯示開始游戲
                    go.children[0].innerHTML = &#39;游戲結(jié)束&#39;;
                    go.style.display = "block";
                }
            }
            obj.removeChild(obj.children[obj.children.length - 1]);
        }
        //點(diǎn)擊與計分
        obj.onmousedown = function (event) {
            //點(diǎn)擊的不是白盒子
            // 兼容IE
            event = event || window.event;
            if ((event.target ? event.target : event.srcElement).className == &#39;i&#39;) {
                //點(diǎn)擊后的盒子顏色
                (event.target ? event.target : event.srcElement).style.backgroundColor = "#bbb";
                //清除盒子標(biāo)記
                (event.target ? event.target : event.srcElement).className = &#39;&#39;;
                //計分
                num++;
                //顯示得分
                count.innerHTML = &#39;當(dāng)前得分: &#39; + num;
            }
            else {
                //游戲結(jié)束
                obj.style.top = 0;
                count.innerHTML = &#39;游戲結(jié)束,最高得分: &#39; + num;
                //關(guān)閉定時器
                clearInterval(obj.timer);
                //顯示開始游戲
                go.children[0].innerHTML = &#39;游戲結(jié)束&#39;;
                go.style.display = "block";
            }
            //盒子加速
            if (num % 10 == 0) {
                speed++;
            }
        }
        //松開觸發(fā)停止
        obj.onmouseup = function (event) {
        }
    }, 20)
}

Im vorherigen Artikel haben wir darüber gesprochen, wie man die if-Anweisung verwendet, um den Wert von top zu bestimmen.

Hier erkl?ren wir weiterhin den folgenden Code. Im obigen Code erscheint eine weitere if-Urteilsanweisung. Die if-Anweisung wird hier verwendet, um zu bestimmen, ob die L?nge der Div-?Zeile“ unter ?main“ 6 betr?gt, d Wird verwendet, um zu bestimmen, ob die L?nge jeder Zeile (einschlie?lich 4 Divs) vorhanden ist und ob es ein farbiges Quadrat gibt (Div mit der Klasse ?i“).

Wenn i vorhanden ist, ist das Spiel vorbei. Berechnen Sie dann die Punktzahl und stellen Sie den H?chstwert auf -150 Pixel wieder her. Schlie?en Sie dann den Timer clearInterval (obj.timer) und stellen Sie die Anzeige so ein, dass das Spiel gestartet wird.

Aufgrund der L?nge des Artikels stellen wir Ihnen diesen hier vor. In sp?teren Artikeln werden wir Ihnen weiterhin die Methode zur Umsetzung des ?Nicht auf den wei?en Block treten“ vorstellen Spiel mit nativem js.

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

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