js面向对象实现随机方块效果

客官°小女子只卖身不卖艺 2022-02-02 14:57 176阅读 0赞

先看看效果在看分析：[https://codepen.io/iyouu/pen/MdebQO][https_codepen.io_iyouu_pen_MdebQO]  
首先，分析对象，面向对象写，面向过程是分析如何一步一步实现方块，每一步骤都清晰明了。这里面向对象：  
1、把方块看成一个对象；  
2、工具对象；生成随机数封装成函数。不同功能的函数放到不同的对象中。  
相关面向对象的东西这里就不写了，可以自己去网上搜索。

*  HTML代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<link rel="stylesheet" href="demo.css" />
    	</head>
    	<body>
    		<div id="container">
    			
    		</div>
    		<script type="text/javascript" src="demo.js"></script>
    		<script type="text/javascript" src="main.js"></script>
    		<script>
    			//通过构造函数创建方块对象
    			var parent = document.getElementById('container');
    			var box1 = new Box(parent);
    			
    			//随机生成方块的坐标
    			box1.random();
    		</script>
    	</body>
    </html>

*  CSS代码：

/*
     * author: lixiaoqing;
     * date:  2019.5.5  20:43
     * */
    
    #container{
    	width: 800px;
    	height: 600px;
    	background-color: lightcyan;
    	position: relative;
    }
    *{
    	margin: 0;
    	padding: 0;
    }

*  demo.js代码

/*
     * author: lixiaoqing;
     * date:  2019.5.5  20:43
     * */
    			/*
    			 
    			 * 分析，面向对象方式。
    			 * 把方块看作一个对象，工具对象；生成随机数封装成函数。不同功能的函数放到不同的对象中。
    			 * 
    			 * 
    			 * */
    //1.创建对象
    var Tools = {
    	getRandom: function(min, max){
    		return Math.floor(Math.random() * (max - min + 1)) + min;//范围取到含最大值，含最小值 
    	}
    }
    console.log(Tools.getRandom(0,10));//[0,10]
    
    //通过构造函数来创建方块对象
    //2.1构造函数
    function Box(parent, options){
    	options = options || {};//如果传入了options对象直接返回这个对象，如果没有传入这个对象就是undefined,回false,最后返回空对象。
    	//设置对象的属性
    	this.backgroundColor = options.backgroundColor || 'red';
    	this.width = options.width || 20;
    	this.height = options.height || 20;
    	this.x = options.x || 0;
    	this.y = options.y || 0;
    	
    	//创建对应的div
    	this.div = document.createElement('div');
    	parent.appendChild(this.div);
    	this.parent = parent;
    	//调用样式对象
    	this.init();
    }
    
    //设置div的样式
    Box.prototype.init = function(){
    	var div = this.div;
    	div.style.backgroundColor = this.backgroundColor;
    	div.style.width = this.width + 'px';
    	div.style.height = this.height + 'px';
    	div.style.left = this.x + 'px';
    	div.style.top = this.y + 'px';
    	//脱离文档流
    	div.style.position = 'absolute';
    }
    //随机生成方块的位置
    Box.prototype.random = function(){
    	//父容器的宽度-方块的宽度=总共能放多少方块
    	var x = Tools.getRandom(0, this.parent.offsetWidth / this.width -1) * this.width;
    	var y = Tools.getRandom(0, this.parent.offsetHeight / this.height -1) * this.height;
    	this.div.style.left = x + 'px';
    	this.div.style.top = y + 'px';
    }

*  main.js代码

/*
     * author: lixiaoqing;
     * date:  2019.5.5  20:43
     * 入口文件
     * */
    //生成10个方块
    //获取容器
    var container = document.getElementById('container');
    //存储方块对象
    var arr = [];
    for(var i = 0; i < 10; i ++){
    	var r = Tools.getRandom(0, 255);
    	var g = Tools.getRandom(0, 255);
    	var b = Tools.getRandom(0, 255);
    	
    	var box = new Box(container, {
    		backgroundColor: 'rgb('+ r +','+ g +','+ b +')'
    	});
    	//把创建好的方块对象添加到数组中
    	arr.push(box);
    }
    //设置随机位置，开启定时器
    setInterval(randomBox,600);
    randomBox();//页面加载就生成坐标方块
    function randomBox(){
    	//坐标
    	for(var i = 0; i < arr.length; i ++){
    		var box1 = arr[i];
    		box1.random();
    	}
    }

过程不是太难，但是是对面向对象的开发思维的小练习。

[https_codepen.io_iyouu_pen_MdebQO]: https://codepen.io/iyouu/pen/MdebQO