原生JS實現別踩白塊小遊戲（四）

原生JS實現別踩白塊小遊戲的整體思路，在前面的文章中已經給大家簡單的介紹過了。可參考：《原生JS實作別踩白塊小遊戲（三）》

#下面我們就繼續結合原始碼中js程式碼部分，逐一介紹其js方法給大家。

部分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和index。

createElement() 方法透過指定名稱建立一個元素。 （註：所有主要瀏覽器都支援 createElement() 方法）

floor() 方法傳回小於等於x【這裡是：Math.random() * 4】的最大整數。如果傳遞的參數是一個整數，則該值不變。

random() 方法可傳回介於 0 ~ 1 之​​間的一個隨機數。此Math.random()函數傳回0-1範圍內的浮點偽隨機數（包括0，但不包括1），在該範圍內具有近似均勻的分佈，然後你可以將其縮放到所需範圍，它不能被使用者選擇或重置。

那麼這裡產生隨機值index則表示的是別踩別白塊小遊戲中，一行中隨機出現的有顏色的方塊部分。

Div.className則表示設定或傳回class的值，是CDiv方法中傳入的classname參數。

由於篇幅的問題，js方法就先介紹到這裡，在後期的文章中，會繼續跟大家介紹剩餘js部分的實作方法。

以上是原生JS實現別踩白塊小遊戲（四）的詳細內容。更多資訊請關注PHP中文網其他相關文章！