ネイティブJSで白いブロックを踏まないゲームを実装 (4)-HTMLの知識-php.cn

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

藏色散人

リリース： 2019-01-09 13:18:07

オリジナル

5737 人が閲覧しました

ネイティブ JS を使用して「白いブロックを踏まないでください」ゲームを実装する全体的なアイデアは、前の記事で簡単に紹介しました。参考：「白いブロックを踏まないゲームのネイティブJS実装 (3)」

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

引き続きjsを組み合わせてみましょうソースコードのコード部分については、その js メソッドを 1 つずつ紹介します。

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)
        Div.className = classname
        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>

ログイン後にコピー

このコードでは、CDiv メソッドを使用して div を動的に作成します。このメソッドでは、変数 Div とインデックスを定義します。

createElement() メソッドは、名前を指定して要素を作成します。 (注: すべての主要なブラウザは createElement() メソッドをサポートしています)

floor() メソッド x 以下の最大の整数を返します [ここでは Math.random() * 4] 。渡されたパラメータが整数の場合、値は変更されません。

random() メソッド は、0 ～ 1 の範囲の乱数を返すことができます。 Math.random() 関数は、0 ～ 1 の範囲 (0 を含むが 1 は除く) の浮動小数点疑似乱数を返し、その範囲内でほぼ一様な分布を持ちます。この乱数は、必要な範囲にスケールできますが、それはできません。ユーザーが選択またはリセットできます。

ここで生成されるランダム値インデックスは、「白いブロックを踏まないでください」ミニゲームでランダムに連続して表示される色付きの四角形を表します。

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