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

In Bezug auf die Methode zur Implementierung des Don't Step on White Blocks-Minispiels mit nativem JS werden wir fortfahren mit dem Inhalt des vorherigen Artikels „Native JS implementiert das Don’t Step on White Blocks Game (4) 》, um Ihnen die spezifische Codeanalyse in der CDiv-Methode zu bieten.

Der relevante js-Teil im Quellcode des Spiels „Don't Step on White Blocks“ lautet wie folgt:

<script>
    var main = document.getElementById(&#39;main&#39;)
    go = document.getElementById(&#39;go&#39;)
    count = document.getElementById(&#39;count&#39;);
//设置四种颜色
    cols = [&#39;#1AAB8A&#39;, &#39;#E15650&#39;, &#39;#121B39&#39;, &#39;#80A84E&#39;];
//动态创建div
    function CDiv(classname) {
        var Div = document.createElement(&#39;div&#39;)
        //生成随机数
        index = Math.floor(Math.random() * 4)
        //添加class
        Div.className = classname
        //循环创建div为块
        for (var i = 0; i < 4; i++) {
            var iDiv = document.createElement(&#39;div&#39;)
            Div.appendChild(iDiv)
        }
        if (main.children.length == 0) {
            main.appendChild(Div);
        } else {
            main.insertBefore(Div, main.children[0]);
        }
 
        Div.children[index].style.backgroundColor = cols[index];
        Div.children[index].className = "i";
    }
</script>

In diesem Code sind wir Im for-Schleifenkörper wird eine Variable iDiv über document.createElement('div') definiert, und dann wird das untergeordnete Element iDiv über die Methode appendChild() zyklisch zum zuvor dynamisch erstellten Div hinzugefügt.

Das hier dynamisch erstellte Div stellt die Reihen im Spiel dar, und das hinzugefügte iDiv stellt die vier Quadrate in einer Reihe dar.

Verwenden Sie dann die if-Beurteilungsanweisung, um festzustellen, ob unter main ein untergeordnetes Element vorhanden ist. Wenn es nicht vorhanden ist, fügen Sie den untergeordneten Knoten über die appendChild-Methode hinzu untergeordneter Knoten durch insertBefore.

Fügen Sie schließlich durch die Generierung von Zufallszahlen zufällig eine Hintergrundfarbe zu den Blöcken in einer Reihe hinzu und fügen Sie eine Klasse von „i“ hinzu. Hier definieren wir die Variable cols als vier Farben.

Hinweis: Die Methode

appendChild() kann an die untergeordnete Knotenliste des Knotens anhängen. Neues untergeordnetes Element hinzufügen Knoten am Ende. Die Methode

insertBefore() fügt einen neuen untergeordneten Knoten vor dem vorhandenen untergeordneten Knoten ein, den Sie angeben.

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