c语言怎么实现躁动的小球,躁动的小球 面向对象实现

在HTML里建一个div，id="wrap"

css样式

*{

margin:0;

padding:0;

}

body,html{

height:100%;

}

#wrap{

height:100%;

background-color:black;

position:relative;

overflow:hidden;

}

.ball{

border-radius:50%;

position:absolute;

}

js代码

//工具函数，产生[min,max)范围内的随机数

functionrandFn(min,max){

returnparseInt(Math.random()*(max-min)+min);

}

//创建构造函数，由构造函数获取小球对象

functionBoll(){

//小球的尺寸：随机数

varwh = randFn(20,50);

this.width= wh; //width不是css中的，只是容器

this.height= wh;

//小球初始坐标点

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

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

//小球颜色：随机

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");

}

//添加绘制小球的方法

Ball.prototype.draw= function(){

this.div.className= "ball";

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;

//把标签拼接进文档流

varwrap = document.querySelector("#wrap");

wrap.appendChild(this.div);

}

Boll.prototype.run= function(){

varself = this;

setInterval(function(){

//this指向window

//判断边界情况

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.οnlοad= function(){

for(vari=0;i<100;i++){

varball = new Ball();

ball.draw();

ball.run();

}

}