java小球碰撞界面设计_JavaScript实现小球碰撞特效

JavaScript实现小球碰撞特效。类似自由落体运动。实现原理非常简单，就是动态的改变每个元素的坐标。使用radius属性将图片圆角化。使用left，top属性动态的改变小球的位置。碰撞反弹球，当碰撞到容器的边缘后，进行反弹，反向改变坐标。

首先创建Screen类，并在Screen的构造函数中给出了球移动、碰撞所需的各种属性变量，如ballsnum、spring、bounce、gravity等等  然后用原型prototype给出相应的函数，如创建球，createBalls，球碰撞hitBalls，球移动moveBalls，给每个函数添加相应的功能、

最后用按钮点击事件调用函数，仅此而已。只是我这里把点击的效果注释掉了，直接刷新页面就会随机改变。

运行效果如下：

html代码如下：html>

业余草：www.xttblog.com

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:url('images/QP1.png') no-repeat; background-size: 100% auto;}

.two { background:url('images/QP2.png') no-repeat; background-size: auto 100%;}

.three { background:url('images/QP3.png') no-repeat; background-size: auto 100%; }

.four { background:url('images/QP4.png') no-repeat; background-size: auto 100%;}

.five { background:url('images/QP5.png') no-repeat; background-size: auto 100%;}

.six { background:url('images/QP6.png') no-repeat; background-size: auto 100%;}

.s