ネイティブJSで白いブロックを踏まないゲームを実装 (5)

## ネイティブJSを利用した「白いブロックを踏まないでください」ゲームの実装方法については、引き続き内容を説明していきます。前回の記事「

白いブロックを踏まないゲームのネイティブ JS 実装 (4)」を参考に、CDiv メソッドでの具体的なコード分析をお届けします。

「白いブロックを踏まないでください」ゲームのソース コード内の関連する js 部分は次のとおりです:

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

このコードでは、 for ループ本体では、変数 iDiv が document.createElement('div') を通じて定義され、子要素 iDiv が、appendChild() メソッドを通じて以前に動的に作成された Div に循環的に追加されます。

ここで動的に作成された Div はゲーム内の行を表し、追加された iDiv は行内の 4 つの正方形を表します。

次に、if 判定ステートメントを使用して、main の下に子要素があるかどうかを確認します。存在しない場合は、appendChild メソッドを使用して子ノードを追加し、既存の子ノードの前に新しい子ノードを挿入します。子ノードから insertBefore まで。

最後に、乱数を生成することで、連続したブロックに背景色をランダムに追加し、クラスを「i」として追加します。ここでは変数colsを4色として定義します。

注:

appendChild()

メソッドはノードの子ノード リストに追加できます 新しい子の追加最後にノード。

insertBefore()

メソッドは、指定した既存の子ノードの前に新しい子ノードを挿入します。 このセクションでは、「Don't Step on White Blocks」ゲームの CDiv メソッドについて詳しく説明します。記事が長いため、残りの js コードについては後の記事で分析していきます。

以上がネイティブJSで白いブロックを踏まないゲームを実装 (5)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。