隨機方塊代碼理解

時間 2021-03-16

標籤 javascript css html java 數組 app dom 函數工具佈局欄目 JavaScript 简体版

原文原文鏈接

一個簡單Js的練習，在div盒子中生成隨機的方塊。這裏能夠將div劃分紅n個方塊，每一個方塊的位置能夠由橫縱座標來肯定，方塊的實際left、top位置就是方塊的橫座標*方塊的寬、縱座標**方塊的高。這樣每次就能夠肯定除隨機方塊出現的位置在哪裏。

這是頁面佈局html：javascript

<body>
     <div class="stage" id="stage">

     </div>

    <script src="js/tools.js"></script>
    <script src="js/block.js"></script>
    <script src="js/quote.js"></script>
    
   
</body>

這是div的css：css

*{
    margin: 0;
    padding: 0;
}
.stage{
    position: relative;
    width: 500px;
    height: 400px;
    background-color: rgba(182, 182, 182, 0.836);
}
.stage div{
    position: absolute;
}

定義一個工具類Js，這個工具JS代碼包含兩個方法，隨機獲取數字getRandom()和隨機獲取顏色getColor()（color顏色是rgb(000，000，000)的形式，因此隨機獲取顏色也就能夠調用上方的getRandom()方法，在0~255之間隨機獲取數字，這樣就實現了隨機獲取顏色的效果了。)html

var Tool = {
    //獲取一個範圍內部的隨機整數,包括兩數在內
    getRandom : function(min,max){
        min = Math.ceil(min);//向上取整
        max = Math.floor(max);//向下取整
        return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
    },
    //獲取隨機顏色
    getColor : function(){
        //rgb(r,g,b)  三個色值 正好是隨機獲取數字 0~255之間
        //調用同方法內部的方法，使用this便可
        var r = this.getRandom(0,255);
        var g = this.getRandom(0,255);
        var b = this.getRandom(0,255);
        //返回顏色值 , 須要注意的是這裏傳的值是字符串形式的  「rgb(r,g,b)」 形式，因此字符串拼接須要注意
        return "rgb(" + r + "," + g + "," + b + ")"; 
    }
};

這是隨機生成方塊的構造函數Block，包括了設置方塊的各類屬性，渲染方塊到頁面，更改方塊位置功能。java

//自定義 隨機生成方塊色構造函數
function Block(parent,option){
    //設置方塊屬性 : 寬度、高度、顏色、定位位置{水平方向位置、垂直方向位置}
    //屬性太多，讓參數傳一個對象進來更方便
    //確保輸入的是一個對象,不論輸入是否爲對象（輸入的是對象或undefined），option最後都取的是對象類型
    option = option || {};
    // this添加 屬性
    this.width = option.width || 20;
    this.height = option.height || 20;
    this.backgroundColor = option.backgroundColor || "pink";
    //定位位置
    this.x = option.x || 0;
    this.y = option.y || 0;
    //存儲本身的父級到對象上
    this.parent = parent;
}

//須要生成隨機方塊對象，渲染render到頁面上， 將這個設置給原型對象
Block.prototype.render = function(){
    //建立一個新的div
    // var ele = document.createElement("div");
    //換成this.ele 這樣就直接給Block添加了一個新屬性，沒有額外增長變量，下面其餘函數也能夠直接使用
    this.ele = document.createElement("div");
    //添加div到指定的父級（id=stage的div）
    this.parent.appendChild(this.ele);
    //給新div添加css屬性
    this.ele.style.width = this.width + "px";
    this.ele.style.height = this.height + "px";
    this.ele.style.backgroundColor = this.backgroundColor;
    this.ele.style.left = this.x + "px";
    this.ele.style.top = this.y + "px";

}

//隨機更改位置的方法
Block.prototype.positionRandom = function(){
    //獲取元素座標（隨機）  clientwidth（border之內的寬度,不含邊框）
    //Tool.getRandom(0,this.parent.clientWidth / this.ele.width - 1)
    // 是隨機的一個方塊（有n -1塊）  用第n塊 乘以 方塊元素的寬高 ，就是新隨機的方塊位置
    this.x = Tool.getRandom(0,this.parent.clientWidth / this.width - 1) * this.width;
    this.y = Tool.getRandom(0,this.parent.clientHeight / this.height - 1) * this.height;
    //賦值給ele樣式，由於這個方法內不能調用另外一個方法內部的變量，因此使用this.ele
    this.ele.style.left = this.x + "px";
    this.ele.style.top = this.y + "px";

}

最後經過一個for循環，給頁面渲染出10個隨機位置的方塊，而後將方塊的位置、顏色信息再存儲再數組中，設置一個定時器，調用隨機更改位置的方法positionRandom()，實現頁面上1s出現隨機方塊（也就是1s的時間方塊顏色、位置發生改變）。數組

//console.log(Tool.getColor());

var stage = document.getElementById("stage");

//生成一個實例
// var block = new Block(stage);
// block.render();

var arr = [];

//循環生成10個方塊
for (var i = 0; i < 10; i++) {
    //block對象的參數一個是父級，另外一個是對象（方塊屬性 : 寬度、高度、顏色、定位位置{水平方向位置、垂直方向位置}）
    var block = new Block(stage, { backgroundColor: Tool.getColor() });
    //隨機生成方塊div，而且獲取到各項屬性值，後期獲取屬性值就能夠直接用這個生成的就好了
    block.render();
    //隨機位置
    block.positionRandom();
    //數組中記錄每一項
    arr.push(block);
}

//添加定時器，用數組arr存儲對象block的值
//數組循環，對對象block的屬性值進行改變
setInterval(function () {
    for (var i = 0; i < arr.length; i++) {
        // arr[i].render();
        arr[i].positionRandom();
    }
}, 1000);