-
很长时间来学习javaｓｃｒｉｐｔ，做一些小的例子，最难的是10个球随机碰撞的效果，这个没有，翻起来和大家分享一下，我相信很多像我在这个系列的时候开始菜鸟编程的时候会有很多的困惑，希望能给一些人带来帮助。
效果要求：10个球在页面中随意移动，窗口或其他球的边框会反弹。
思想:
1和10个球都是10分
2、触摸窗口反弹，定义为VX VY球移动变量和弹性变量反弹（负值）。当球触及窗边，VX VY乘以反弹，它改变了方向的球移动。
3、球碰撞反弹，简单的说，当两球中心的距离小于可变区的最小值（移动方向的半径）来改变球的反弹
那么，代码如下：
HTML和js是独立的文档。
的test.html文件如下：
{体
保证金：0；
填充：0；
文本对齐：中心；
}
#屏幕{宽度：800px；身高：640px；位置：相对；背景：# ccccff；保证金：0汽车；垂直对齐：顾问
#内{位置：绝对；左：0px；顶部：0px；宽度：100%；高度：100%；}
#屏幕P {颜色：白色；字体：黑体14px；}
。一个{背景图像：URL（‘泡沫。png）；背景位置：- 66px - 58px；}
。两{背景图像：URL（‘泡沫。png）；背景位置：- 66px - 126px；}
三{背景图像：URL（‘泡沫。png）；背景位置：- 66px - 194px；}
四{背景图像：URL（‘泡沫。png）；背景位置：- 66px - 263px；}
五{背景图像：URL（‘泡沫。png）；背景位置：- 66px - 331px；}
六{背景图像：URL（‘泡沫。png）；背景位置：- 66px - 399px；}
七{背景图像：URL（‘泡沫。png）；背景位置：- 66px - 194px；}
八{背景图像：URL（‘泡沫。png）；背景位置：- 66px - 263px；}
九{背景图像：URL（‘泡沫。png）；背景位置：- 66px - 331px；}
十{背景图像：URL（‘泡沫。png）；背景位置：- 66px - 399px；}
嗨，测试一下！
的test.js文件如下：
无功getflag =功能（ID）{
返回document.getelementbyidx_x（ID）； / /获取元素参考
}
函数（DES，SRC）{
对于（p在SRC）{
des }；
}
返回DES；
}
无功课= {，，，四，五，七，有6、8，'nine，间'也要十}；
Var Ball =功能（直径、班）{
VaR球= document.createelement_x（div）；
球。类名=分类；
与（球，风格）{
宽度=高度=直径+ 'px；位置=绝对的；
}
回球；
}
var屏幕=函数（CID，配置）{
首先创建一个类属性
var =；
如果（！（自是屏幕））{
返回新屏幕（CID，配置）
}
配置=延长（screen.config，config） / / configj是扩展类的一个实例
自我。集装箱= getflag（CID）； / /窗口对象
Self.ballsnum=config.ballsnum;
直径= 56；直径
半径= 2；
自我。春天= config.spring； / /碰撞弹跳的球
自我。反弹= config.bounce； / /球打在窗边后反弹
自我。重力= config.gravity； / /重力球
自动生成的球被放置在数组变量中。
时间ID生成的调用函数
自我。l_bound = 0； / /容器的边界
r_bound = self.container.clientwidth自我；
自t_bound = 0；
b_bound = self.container.clientheight自我；
}；
属性初始化
Ballsnum：10，
春季：0.8，
弹跳力：- 0.9，
比重：0.05
}；
屏幕。原型= {
初始化：函数（）{
var =；
Self.createBalls（）；
自我。定时器= setInterval（函数（）{ self.hitballs（）}，30）
}，
CreateBalls：函数（）{
VaR自=，= self.ballsnum num；
Var（破片=文件。createdocumentfragment）； / /创建一个文件片段，避免反复刷新
对于（i = 0；i <数字；i + +）{
var =新球球（self.diameter，CLSS { math.floor（Math.random（）Num））））
球的直径为self.diameter；
球半径= self.radius；
球。风格。左=（数学，随机self.r_bound）*（+ 'px '）； / /球的初始位置，
球。风格。=（Math.random（）*自我。b_bound）+ 'px；
球。VX = Math.random（）* 6-3；
球。vy = Math.random（）* 6-3；
frag.appendchild（球）；
自我，球{ } =球；
}
Self.container.appendChild（片段）；
}，
hitballs：函数（）{
VaR自=，= = self.balls self.ballsnum num，球；
为（i = 0；i < num-1；i++）{
无功ball1 =自我。球{我}；
ball1。x = ball1。offsetleft + ball1.radius； / /球的中心坐标
ball1。Y = ball1 offsettop + ball1.radius；
对于（j = i + 1；j <数字；j + +）{
VaR算=自我。球{，}；
算，算offsetleft + ball2.radius x =；
算，算offsettop + ball2.radius y =；
DX =球游戏。x-ball1。X； / /两边缘对应的直角两球中心距离
DY =球游戏。y-ball1。Y；
VaR的距离= math.sqrt（DX DX + * *镝Dy）； / /两直角边和中心距
无功misdist = ball1。半径+ ball2.radius； / /最小中心距
如果（距离< misdist）{
碰撞后，球/假设会根据原来的方向做一些运动，这被定义为
功角= math.atan2（dy，dx）；
只是当 / /碰撞，即距离= misdist，Tx = ballb。X，即ballb。Y
Tx =巴拉。x + math.cos（角）* misdist；
即巴拉。Y + math.sin（角）* misdist；
有 / /运动后，TX > ballb。X，TY > ballb。Y，斧头啊，所以记录的值
AX =（TX ballb。x）* self.spring；
AY =（TY ballb。y）* self.spring；
一个球减去斧头，另一个是反弹。
巴拉。VX - = AX；
巴拉。vy =是的；
Ballb。VX + = AX；
Ballb。vy + =是的；
}
}
}
对于（i = 0；i <数字；i + +）{
Self.moveBalls（球{我}）；
}
}，
moveballs：功能（球）{
var =；
球。vy + = self.gravity；
球。风格。左=（球。offsetleft +球。VX）+ 'px；
球。风格。=（球。offsettop +球。vy）+ 'px；
判断球和窗口的边界以简化变量名。
var = self.l_bound，R = self.r_bound，T = self.t_bound，B = self.b_bound，BC = self.bounce；
如果（ball.offsetleft＜L）{
球。风格。左= L；
球。VX * = BC；
}
如果（ball.offsetleft + ball.diameter > R）{
球。风格。左=（R-球直径）+ 'px；
球。VX * = BC；
}
如果（ball.offsettop < T）{
球。风格；
球。vy＝BC；
}
如果（ball.offsettop + ball.diameter > B）{
球。风格。=（篮球。直径）+ 'px；
球。vy＝BC；
}
}
}
窗口。指针函数（）{
var = null；
getflag（开始的）。Onclick =函数（）{
document.getelementbyidx_x（内）.innerHTML =；
SC =新的屏幕（内心的，{ ballsnum：10、春季：0.8、反弹：0.9，比重：0.05 }）；
sc.initialize（）；
}
getflag（停止'）。Onclick =函数（）{
ClearInterval（sc.timer）；
}
}
经过测试，效果非常好，你可能觉得代码很长，但思路相当清晰：
首先，我们创建屏幕类，并给出各种属性变量如ballsnum、弹簧、弹跳、重力等在屏幕的构造函数。
然后我们使用原型样机给相应的功能，如创建球，createballs，球碰撞hitballs，球移动moveballs，和每个功能添加相应的功能。
最后，使用按钮单击事件调用该函数，仅此。
希望本文能对大家的javaｓｃｒｉｐｔ程序设计有所帮助。