c语言怎么实现躁动的小球,使用面向对象实现--躁动的小球（经典案例）

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

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

思路分析加代码

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

1、搭建模块：

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

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

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

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

*{

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;

}

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

3、js实现动态的效果

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

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()

}

}

辛苦各位客官，谢谢。