javascript_面向对象系列_03弹力球（ES3）

最新推荐文章于 2024-10-09 11:19:11 发布

田江

最新推荐文章于 2024-10-09 11:19:11 发布

阅读量281

点赞数

分类专栏： JavaScript从入门到精通文章标签： javascript web前端开发 web应用 web开发面向对象

本文链接：https://blog.csdn.net/jiang7701037/article/details/78954570

版权

JavaScript从入门到精通专栏收录该内容

147 篇文章 80 订阅

订阅专栏

解释：

以下代码的写法，没有使用prototype属性，把所有的成员函数都写在了构造函数里，这样会造成内存浪费：每次new一个对象时，内存中都会有所有成员函数的代码，当new第一个对象时，内存中会有所有成员函数的代码，当new第二个对象时，内存中又会有所有成员函数的代码，这样就出现了，在内存中出现了重复的代码，多new一个对象，就多重复这些成员函数的代码。

后续中，会加上prototype属性的写法。

效果图：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin:0; 
				padding:0;
				list-style: none
			}
		</style>
	</head>
	<body  style="height:1000px;">
	
	</body>
</html>

<script type="text/javascript">

function $(id){
	return document.getElementById(id);
}

//1、定义类（型）
function Ball(width,height,bgColor,left,top,leftInc,topInc,timespace,leftDirection,topDirection){
	//1）、属性（有什么）
	this.domObj = null;
	//宽高
	this.width = width;
	this.height = height;
	//颜色
	this.bgColor = bgColor;
	//当前位置
	this.left = left;
	this.top = top;
	//速度（增量和时间间隔）
	this.leftInc = leftInc;//增量没有正负
	this.topInc = topInc;
	this.timespace = timespace;
	//方向
	this.leftDirection = leftDirection;
	this.topDirection = topDirection;
	
	//定时器；
	this.myTimer = null;
	
	//2）、方法（能干什么）	
	//产生外观（初始化外观）
	this.initUI = function(){
		//1、动态产生div（球球）
		this.domObj = document.createElement("div");
		this.domObj.style.cssText = "position:absolute;border-radius:50%;";
		this.domObj.style.left=this.left+"px";
		this.domObj.style.top=this.top+"px";
		this.domObj.style.width=this.width+"px";
		this.domObj.style.height=this.height+"px";
		this.domObj.style.backgroundColor=this.bgColor;
		document.body.appendChild(this.domObj);
	}
	//走
	this.go = function(){
		this.myTimer = setInterval(()=>{
			//1、改变球球的当前位置：left和top的值（javascript中的数据）；
			this.left= this.left+this.leftInc*this.leftDirection;
			this.top = this.top+this.topInc*this.topDirection;
			
			let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
			let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
			let clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
			
			//2、left和top的合法性判断（判断边缘）；
			if(this.left-scrollLeft<=0){
				//this.leftInc = Math.abs(this.leftInc);
				//碰到左边缘时，改变方向
				this.leftDirection = 1;
			//}else if(top-横向滚动掉的距离>可视区域的宽度-球球的宽度){
			}else if(this.left-scrollLeft>clientWidth-this.domObj.offsetWidth){
				//碰到右边缘时，改变方向
				this.leftDirection = -1;
			}
			if(this.top-scrollTop<=0){
				this.topDirection = 1;
			//}else if(top-纵向滚动掉的距离>可视区域的高度-球球的高度){
			}else if(this.top-scrollTop>clientHeight-this.domObj.offsetHeight){
				this.topDirection = -1;
			}
			//3、改变外观（UI）
			this.domObj.style.left = this.left+"px";			
			this.domObj.style.top = this.top+"px";			
		},this.timespace);
	}
}
//编写函数获得随机的颜色字符串（#20cd4f）
function getColor(){
	//分别随机r g b的值
	var r = parseInt(Math.random()*256);
	var g = parseInt(Math.random()*256);
	var b = parseInt(Math.random()*256);
	return "#"+r.toString(16)+g.toString(16)+b.toString(16);
}


window.onload = function(){    
	for(let i=0;i<100;i++){
		let width = parseInt(Math.random()*80)+20;
		//let height = parseInt(Math.random()*80)+20;
		let left = parseInt(Math.random()*1000);
		let top = parseInt(Math.random()*700);
		let leftInc = parseInt(Math.random()*10)+1;
		let topInc = parseInt(Math.random()*10)+1;
		let timespace = parseInt(Math.random()*45)+5;
		let leftDirection = parseInt(Math.random()*2)*2-1;//-1 和 1  0 2
		let topDirection = parseInt(Math.random()*2)*2-1;//-1 和 1  0 2
		
		//domObj,width,height,bgColor,left,top,leftInc,topInc,timespace,leftDirection,topDirection
		var b1 =new Ball(width,width,getColor(),left,top,leftInc,topInc,timespace,leftDirection,topDirection);
		b1.initUI();
		b1.go();
	}
}

</script>