js随机创建方块

最新推荐文章于 2023-03-22 15:53:48 发布

欧阳小坏

最新推荐文章于 2023-03-22 15:53:48 发布

阅读量304

点赞数

分类专栏：学习记录文章标签：前端

本文链接：https://blog.csdn.net/ou24689/article/details/100659762

版权

学习记录专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #map {
            width: 800px;
            height: 600px;
            background-color: rgb(173, 216, 230);
            margin: 10px auto;
            position: relative;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <button onclick="snap()" style="margin-left: 50%">灭霸响指</button>
    <script>

        window.onload = function () {
            for (var i = 0; i < randomNum(20, 40); i++) {
                cube()
            }

        }

        function randomNum(min, max) {//随机数
            var lastNum = Math.floor(Math.random() * (max - min) + min);
            return lastNum
        }
        function randomColor() { //随机颜色

            var color1 = randomNum(0, 255)
            var color2 = randomNum(0, 255)
            var color3 = randomNum(0, 255)
            var thisColor = [color1, color2, color3]
            return String(thisColor)
        }
        function randomWidth() { //随机宽度
            var widthSize = randomNum(15, 20)
            return widthSize
        }
        function randomHeight() { //随机高度
            var heightSize = randomNum(15, 20)
            return heightSize
        }


        //产生小方块的对象
        function cube() {
            var map = document.getElementById("map");
            //小方块的构造函数
            function Food(width, height, color, x, y) {
                this.width = randomWidth();//设置默认的小方块的宽度
                this.height = randomHeight();
                this.color = randomColor();

                //需要随机产生的left和top值
                this.x = randomNum(0, map.offsetWidth / this.width) * this.width;
                this.y = randomNum(0, map.offsetHeight / this.height) * this.height;

                //创建一个div盒子-->即小方块
                this.element = document.createElement("div");
            }
            //初始化小方块
            Food.prototype.init = function () {
                //1.设置小方块的样式

                var div = this.element;
                div.className="human";
                div.style.width = this.width + "px";
                div.style.height = this.height + "px";
                div.style.backgroundColor = 'rgb(' + this.color + ')';
                div.style.position = "absolute";
                div.style.left = this.x + "px";
                div.style.top = this.y + "px";
                //2.把小方块添加到map中
                map.appendChild(div);

            }

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

        }


function snap(){
    var allHuman=document.getElementsByClassName("human");
    for(var l=0;l<parseInt(allHuman.length);l++){
       allHuman[l].remove()
    }
}



    </script>
</body>

</html>

就是简单地运用随机数

欧阳小坏

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #map { width: 800px; ...
复制链接

扫一扫