本文实例讲述了javascript实现10个球随机运动、碰撞的方法。分享给大家供大家参考。具体如下：
学了一段时间的javascript了，做过一些小案例，目前最有难度的就是10个小球随机碰撞效果，这不，把它上上来与大家分享一下，相信不少和我一样的菜鸟在开始上手编程时都会有不少的困惑，希望它能给一些人带来帮助。
效果要求：10个小球在页面随机移动，碰到窗口边界或其他小球都会反弹
思路：
1、10个小球是10个div;
2、碰窗口反弹，定义vx vy为小球的移动变量，以及一个弹力变量bounce(负值),小球碰窗口边界时，vx vy分别乘以bounce，则改变了小球移动方向
3、小球相碰反弹，说简单点，当两个小球的圆心距变量dist小于其最小值（半径之和）则改变球的移动方向，实现反弹
好了，代码如下：
html和js是分开的文件哟
test.html文件如下：
body { margin:0; padding:0; text-align: center; } #screen { width: 800px; height: 640px; position: relative; background: #ccccff;margin: 0 auto;vertical-align: bottom} #inner { position: absolute; left:0px; top:0px; width:100%; height:100%; } #screen p {color:white;font:bold 14px;} .one { background-image:url('bubble.png'); background-position: -66px -58px; } .two { background-image:url('bubble.png'); background-position: -66px -126px;} .three { background-image:url('bubble.png'); background-position: -66px -194px; } .four { background-image:url('bubble.png'); background-position: -66px -263px; } .five { background-image:url('bubble.png'); background-position: -66px -331px; } .six { background-image:url('bubble.png'); background-position: -66px -399px; } .seven { background-image:url('bubble.png'); background-position: -66px -194px; } .eight { background-image:url('bubble.png'); background-position: -66px -263px; } .nine { background-image:url('bubble.png'); background-position: -66px -331px; } .ten{ background-image:url('bubble.png'); background-position: -66px -399px; } hi test it!
test.js文件如下：
var getFlag=function (id) {
return document.getElementByIdx_x(id); //获取元素引用
}
var extend=function(des, src) {
for (p in src) {
des[p]=src[p];
}
return des;
}
var clss=['one','two','three','four','five','six','seven','eight','nine','ten'];
var Ball=function (diameter,classn) {
var ball=document.createElement_x("div");
ball.className=classn;
with(ball.style) {
width=height=diameter+'px';position='absolute';
}
return ball;
}
var Screen=function (cid,config) {
//先创建类的属性
var self=this;
if (!(self instanceof Screen)) {
return new Screen(cid,config)
}
config=extend(Screen.Config, config) //configj是extend类的实例
self.container=getFlag(cid); //窗口对象
self.ballsnum=config.ballsnum;
self.diameter=56; //球的直径
self.radius=self.diameter/2;
self.spring=config.spring;//球相碰后的反弹力
self.bounce=config.bounce;//球碰到窗口边界后的反弹力
self.gravity=config.gravity; //球的重力
self.balls=[]; //把创建的球置于该数组变量
self.timer=null; //调用函数产生的时间id
self.L_bound=0; //container的边界
self.R_bound=self.container.clientWidth;
self.T_bound=0;
self.B_bound=self.container.clientHeight;
};
Screen.Config={ //为属性赋初值
ballsnum:10,
spring:0.8,
bounce:-0.9,
gravity:0.05
};
Screen.prototype={
initialize:function () {
var self=this;
self.createBalls();
self.timer=setInterval(function (){self.hitBalls()}, 30)
},
createBalls:function () {
var self=this, num=self.ballsnum;
var frag=document.createdocumentFragment(); //创建文档碎片，避免多次刷新
for (i=0;i ballb.x, ty > ballb.y,所以用ax、ay记录的是运动A的值
ax=(tx-ballb.x) * self.spring;
ay=(ty-ballb.y) * self.spring;
//一个球减去ax、ay，另一个加上它，则实现反弹
balla.vx-=ax;
balla.vy-=ay;
ballb.vx+=ax;
ballb.vy+=ay;
}
}
}
for (i=0;i R) {
ball.style.left=(R-ball.diameter)+'px';
ball.vx*=BC;
}
else if (ball.offsetTop < T) {
ball.style.top=T;
ball.vy*=BC;
}
if (ball.offsetTop + ball.diameter > B) {
ball.style.top=(B-ball.diameter)+'px';
ball.vy*=BC;
}
}
}
window.onload=function() {
var sc=null;
getFlag('start').onclick=function () {
document.getElementByIdx_x("inner").innerHTML='';
sc=new Screen('inner',{ballsnum:10, spring:0.8, bounce:-0.9, gravity:0.05});
sc.initialize();
}
getFlag('stop').onclick=function() {
clearInterval(sc.timer);
}
}
测试后的效果还是很不错的，各位也许会觉得代码挺长，但是其思路还是蛮清晰的：
首先创建Screen类，并在Screen的构造函数中给出了球移动、碰撞所需的各种属性变量，如ballsnum、spring、bounce、gravity等等
然后用原型prototype给出相应的函数，如创建球，createBalls，球碰撞hitBalls，球移动moveBalls，给每个函数添加相应的功能、
最后用按钮点击事件调用函数，仅此而已。
希望本文所述对大家的javascript程序设计有所帮助。
