js实现随机生成小方块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #map{
            width: 800px;
            height: 600px;
            background-color: lightblue;
            margin: 10px auto;
            /*因为小方块要脱标*/
            position: relative;
        }
    </style>
</head>
<body>
<div id="map"></div>

<script>
    //1.产生随机数的对象
    (function () {
        function Random() {
        }
        Random.prototype.getRandom = function (min, max) {
            return Math.floor(Math.random() * (max - min) + min);
        }
        window.random = new Random();

    })();
    console.log(random.getRandom(0,40));
    
    //2.产生小方块的对象
    (function () {
        var map = document.getElementById("map");
        //小方块的构造函数
        function Food(width,height, color, x, y) {
            this.width = width || 20;//设置默认的小方块的宽度
            this.height = height ||20;
            this.color = color || "pink";
            //需要随机产生的left和top值
            this.x = x || 0;
            this.y = y || 0;

            //创建一个div盒子-->即小方块
            this.element = document.createElement("div");
        }
        //初始化小方块显示的位置
        Food.prototype.init = function () {
            //1.设置小方块的样式
            console.log(this.element);
            var div = this.element;
            div.style.width = this.width + "px";
            div.style.height = this.height + "px";
            div.style.backgroundColor = this.color;
            div.style.position = "absolute";
            //2.把小方块添加到map中
            map.appendChild(div);
            //3.位置随机
            this.render();
        }
        //添加位置随机的方法
        Food.prototype.render = function () {
            // 0-40  --->随机区间0-39
            this.x = random.getRandom(0,map.offsetWidth/this.width )* this.width;
            this.y = random.getRandom(0,map.offsetHeight/this.height )* this.height;
            //设置小方块的left和top值
            this.element.style.left = this.x + "px";
            this.element.style.top = this.y + "px";
        }

        window.food = new Food();
        //food.init();

    })();

    food.init();




</script>
</body>
</html>
js实现随机生成小方块

猜你喜欢
