javascript實現隨機小方塊小案例(原型)

程式碼在路上發表於2020-11-30
JavaScript隨機原型
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .map{
           width:800px;
           height:600px;
           background-color:#ccc;
           position:relative;
        }
    </style>
</head>
<body>
<div class="map"></div>
<script>
    //產生隨機數物件
    (function(window){
        function Random(){
        }
        Random.prototype.getRandom=function(min,max){
            reutrn Math.floor(Math.random()*(max-min)+min);
        };
        //把區域性物件暴露給window頂級物件，就成了全域性物件
        window.Random=new Random();
    })(window);

    //產生小方塊物件
    (function(window){
        //選擇器的方式來獲取元素
        var map=document.querySelector(".map");

        //小方塊的建構函式
        function Food(width,height,color){
           this.width=width||20;//後面是預設小方塊的寬
           this.height=height||20;//後面是預設小方塊的高
           this.x=0;//橫座標是隨機產生的
           this.y=0;//縱座標是隨機產生的
           this.color=color;//小方塊的背景顏色
           this.element=document.createElement("div");//小方塊元素
        }
        //初始化小方塊的顯示效果及位置----顯示在地圖上
        Food.prototype.init=function(map){
           //設定小方塊的樣式
           var div=this.element;
           div.style.position="absolute";
           div.style.width=this.width+"px";
           div.style.height=this.height+"px";
           div.style.backgroundColor=this.color;
           //把小方塊加到map地圖中
           map.appendChild(div);
           this.render(map);
        };
        //產生隨機位置
        Food.prototype.render=function(map){
            //隨機產生橫縱座標
            var x=Random.getRandom(0,map.offsetWidth/this.width)*this.width;
            var y=Random.getRandom(0,map.offsetHeight/this.height)*this.height;
            this.x=x;
            this.y=y;
            var div=this.element;
            div.style.left=this.x+"px";
            div.style.top=this.y+"px";
        };
        var fd=new Food(20,20,"red");
        fd.init(map);
    })(window);
</script>
</body>
</html>

相關文章