您好,欢迎来到二三娱乐。
搜索
您的当前位置:首页使用面向对象实现--躁动的小球(经典案例)

使用面向对象实现--躁动的小球(经典案例)

来源:二三娱乐

         废话不多说,直接开工,用大脑和代码说话。

      躁动的小球效果展示          其实是个动态的页面,我也不知道怎么截取动态图片,不好意思,各位。


                 思路分析加代码

为了让各位读者更加清晰的明白整个制作过程,我采用边分析边写代码的形式来给大家呈现。

1、搭建模块:

其实我们的模块只有两个,一个背景,一个是小球。

<body>

              <div  id="wrap">   </div>  

</body>

//这个div是什么呢?就是我们需要放置小球的区域,也是我们的背景区域。我给他一个起了名字叫做wrap

2、给我们搭建的模块添加应有的属性

<style>

//全局模式,去掉所有的内边距和外边距

*{

padding: 0 ;  

margin: 0 ;

}

// 给html和body的高度设定100%是为了可以使我们的效果不会因为窗口的大小而受到影响

也是为了我们创建的div好赋值。

html,bady{

height:100%;

}

//给创建的div添加属性。

#wrap{height:100%;

background-color:black;

position:relative;

overflow:hidden;

}

//  给小球添加属性

.boll{

border-radius:50%;

position:absolute;

}

</style>

好了,准备工作已经做好了,下面我们要开始JS的代码操作了。

3、js实现动态的效果

<script  type="text/javascript">

//思路分析、我们要创建的小球需要他有什么效果呢?

1、随机产生在任意的地方

2、随机的大小  

3、随机的颜色

4、随机的运动速度

5、随机的运动方向

//OK,以上可以看出,它具备五个随机的属性,那么我就定义一个随机函数放在那,以后随时用到随时调用,已达到结构的最优化。

// 定义一个随机数,产生(min,max)范围内的随机数

function  randFn (min,max){

return  parseInt(Math.random()*(max-min)+min)

}

//  下面我们需要创建构造函数,由构造函数获取小球对象

function  Boll (){

// 小球的尺寸(大小)

var wh = ranFn(20,50);

this.width = wh;

this.height = wh;

//  小球的初始坐标,即从哪个地方出现小球

this.left = randFn(0,document.body.offsetWidth-wh);

this.top = randFn(0,document.body.offsetHeight-wh);

//有人可能对上面的“document.body.offsetWidth-wh”代码不是很明白 。document.bady.offsetWidth是什么意思呢?就是拿页面可视距离(边框的距离)减去小球的距离就是允许小球出现的距离。附图一张,上下距离一样的理解方式。

// 我们继续构造小球对象  下面是随机颜色。注意,获取随机颜色一定要用rgbaXXXX的样式来获取。还要注意拼接不有漏了加号或引号和逗号。

this.color = 'rgba('+randFn(0,256)+','+randFn(0,256)+','+randFn(0,256)+','+Math.random()+')';

//小球的运动随机速度

this.speedX = randFn(-10,10)   //横向移动  加载时可以随机的向左或向右移动

this.speedY = randFn(-10,10)  //纵向移动   加载时可以随机的向上或向下移动

//  开辟属性,保存创建出来的DOM节点

this.div = document.createElement('div');

}

// 添加绘制小球的方法

Boll.prototype.draw = function(){

this.div.className = 'boll';

this.div.style.width = this.width+'px';

this.div.style.height = this.height+'px';

this.div.style.left = this.left+'px';

this.div.style.top = this.top+'px';

this.div.style.backgroundColor = this.color;

//下面把创建好的标签拼接到文档流里去

var wrap = document.querySelector('#wrap');

wrap.appendChild(this.div);

}

// 设置定时器,设置判断条件,让小球在条件内运动

Boll.prototype.run = function(){

var self = this;

setInterval(function(){

//架设if判断边界情况

if(self.div.offsetLeft+self.div.offsetWidth>=document.body.offsetWidth || self.div.offsetLeft<0){

self.speedX *=-1;

}

if(self.div.offsetTop+self.div.offsetHeight>=document.body.offsetHeight||self.div.offsetTop<0){

self.speedY *=-1;

}

self.div.style.left = self.div.offsetLeft+self.speedX+'px'

self.div.style.top = self.div.offsetTop+self.speedY+'px'

},10)

}

//  好了 调用起来  试试吧

window.onload = function(){

for(var i= 0;i<100;i++{

var boll = new Boll()

boll.draw()

boll.run()

}

}

</script>

辛苦各位客官,谢谢。

Copyright © 2019- yule263.com 版权所有 湘ICP备2023023988号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务