随机方块

最新推荐文章于 2021-03-15 08:42:14 发布

honkaiimpac

最新推荐文章于 2021-03-15 08:42:14 发布

阅读量483

点赞数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #map{
            width: 800px;
            height: 600px;
            background-color: pink;
            position: relative;
            /*小方块要脱离标准本文档流*/
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    //对象: 随机数 , 小方块

    //产生随机数的对象
    ((function () {
        //1.产生随机数的构造函数
        function Random() {
        }
        //2.在原型中添加方法
        Random.prototype.getRandom = function (min,max) {
            return parseInt(Math.random()*(max-min)+min)
        }
        //3.把局部对象暴露给window
        window.Random = Random;

    })());
    var rm = new Random()
    rm.getRandom();

    //产生小方块的对象
    ((function () {

        function Food(width, height, color, x, y) {
            this.width = width || 20;
            this.height = height || 20;// 默认小方块的宽高
            this.color = color || "cyan";
            //  随机产生的
            this.x = x || 0;
            this.y = y|| 0;
            //创建一个div盒子
            this.element = document.createElement("div");
        }
        //设置小方块显示的效果和位置---.显示在地图上
        Food.prototype.init = function (map) {
            //1.储存div元素对象
            var div = this.element;
            //2.设置小方块的样式
            div.style.width = this.width + "px";
            div.style.height = this.height +"px";
            div.style.backgroundColor = this.color;
            div.style.position = "absolute";
            //3.把小方块添加到map中
            map.appendChild(div);

            //设置随机的位置
            this.render(map);
7
        }
        //产生随机的位置-->传地图
        Food.prototype.render = function (map) {
            //  随机数的区间  0-39\
            //随机的坐标  (0-39) * 小方块的宽度
            this.x =  rm.getRandom(0, map.offsetWidth/ this.width) * this.width;
            this.y = rm.getRandom(0, map.offsetHeight / this.height) * this.height;

            this.element.style.left = this.x + "px";
            this.element.style.top = this.y + "px";
        }
        //实例化对象
        var food = new Food();
        food.init(document.getElementById("map"));

    })());



</script>
</body>
</html>

honkaiimpac

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
随机方块

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; #map{ width: 8
复制链接

扫一扫