德州企业认证网站建设,厦门建设官网,网络规划设计师(高级),手机把网站做成软件有哪些JavaScript实现小球碰撞特效。类似自由落体运动。实现原理非常简单#xff0c;就是动态的改变每个元素的坐标。使用radius属性将图片圆角化。使用left#xff0c;top属性动态的改变小球的位置。碰撞反弹球#xff0c;当碰撞到容器的边缘后#xff0c;进行反弹#xff0c;反…JavaScript实现小球碰撞特效。类似自由落体运动。实现原理非常简单就是动态的改变每个元素的坐标。使用radius属性将图片圆角化。使用lefttop属性动态的改变小球的位置。碰撞反弹球当碰撞到容器的边缘后进行反弹反向改变坐标。首先创建Screen类并在Screen的构造函数中给出了球移动、碰撞所需的各种属性变量如ballsnum、spring、bounce、gravity等等 然后用原型prototype给出相应的函数如创建球createBalls球碰撞hitBalls球移动moveBalls给每个函数添加相应的功能、最后用按钮点击事件调用函数仅此而已。只是我这里把点击的效果注释掉了直接刷新页面就会随机改变。运行效果如下html代码如下html业余草www.xttblog.combody {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%;}.seven { background:url(images/QP7.png) no-repeat; background-size: auto 100%; }.eight { background:url(images/QP8.png) no-repeat; background-size: auto 100%; }.nine { background:url(images/QP9.png) no-repeat; background-size: auto 100%;}.ten{ background:url(images/QP10.png) no-repeat; background-size: auto 100%;}hi test it!相关js代码如下var getFlagfunction (id) {return document.getElementById(id); //获取元素引用}var extendfunction(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 Ballfunction (diameter,classn) {var balldocument.createElement(div);ball.classNameclassn;with(ball.style) {widthheightdiameterpx;positionabsolute;}return ball;}var Screenfunction (cid,config) {//先创建类的属性var selfthis;if (!(self instanceof Screen)) {return new Screen(cid,config)}configextend(Screen.Config, config) //configj是extend类的实例 self.containergetFlag(cid); //窗口对象self.containergetFlag(cid);self.ballsnumconfig.ballsnum;self.diameter80; //球的直径self.radiusself.diameter/2;self.springconfig.spring; //球相碰后的反弹力self.bounceconfig.bounce; //球碰到窗口边界后的反弹力self.gravityconfig.gravity; //球的重力self.balls[]; //把创建的球置于该数组变量self.timernull; //调用函数产生的时间idself.L_bound0; //container的边界self.R_boundself.container.clientWidth; //document.documentElement.clientWidth || document.body.clientWidth 兼容性self.T_bound0;self.B_boundself.container.clientHeight;};Screen.Config{ //为属性赋初值ballsnum:10,spring:0.8,bounce:-0.9,gravity:0.05};Screen.prototype{initialize:function () {var selfthis;self.createBalls();self.timersetInterval(function (){self.hitBalls()}, 30)},createBalls:function () {var selfthis,numself.ballsnum;var fragdocument.createDocumentFragment(); //创建文档碎片避免多次刷新for (i0;ivar ballnew Ball(self.diameter,clss[i]);//var ballnew Ball(self.diameter,clss[ Math.floor(Math.random()* num )]);//这里是随机的10个小球的碰撞效果ball.diameterself.diameter;ball.radiusself.radius;ball.style.left(Math.random()*self.R_bound)px; //球的初始位置ball.style.top(Math.random()*self.B_bound)px;ball.vxMath.random() * 6 -3;ball.vyMath.random() * 6 -3;frag.appendChild(ball);self.balls[i]ball;}self.container.appendChild(frag);},hitBalls:function () {var selfthis,numself.ballsnum,ballsself.balls;for (i0;ivar ball1self.balls[i];ball1.xball1.offsetLeftball1.radius; //小球圆心坐标ball1.yball1.offsetTopball1.radius;for (ji1;jvar ball2self.balls[j];ball2.xball2.offsetLeftball2.radius;ball2.yball2.offsetTopball2.radius;dxball2.x-ball1.x; //两小球圆心距对应的两条直角边dyball2.y-ball1.y;var distMath.sqrt(dx*dx dy*dy); //两直角边求圆心距var misDistball1.radiusball2.radius; //圆心距最小值if(dist //假设碰撞后球会按原方向继续做一定的运动将其定义为运动Avar angleMath.atan2(dy,dx);//当刚好相碰即distmisDist时txballb.x, tyballb.ytxball1.xMath.cos(angle) * misDist;tyball1.yMath.sin(angle) * misDist;//产生运动A后tx ballb.x, ty ballb.y,所以用ax、ay记录的是运动A的值ax(tx-ball2.x) * self.spring;ay(ty-ball2.y) * self.spring;//一个球减去ax、ay另一个加上它则实现反弹ball1.vx-ax;ball1.vy-ay;ball2.vxax;ball2.vyay;}}}for (i0;iself.moveBalls(balls[i]);}},moveBalls:function (ball) {var selfthis;ball.vyself.gravity;ball.style.left(ball.offsetLeftball.vx)px;ball.style.top(ball.offsetTopball.vy)px;//判断球与窗口边界相碰把变量名简化一下var Lself.L_bound, Rself.R_bound, Tself.T_bound, Bself.B_bound, BCself.bounce;if (ball.offsetLeft ball.style.leftL;ball.vx*BC;}else if (ball.offsetLeft ball.diameter R) {ball.style.left(R-ball.diameter)px;ball.vx*BC;}else if (ball.offsetTop ball.style.topT;ball.vy*BC;}if (ball.offsetTop ball.diameter B) {ball.style.top(B-ball.diameter)px;ball.vy*BC;}}}window.οnlοadfunction() {var scnull;document.getElementById(inner).innerHTML;scnew Screen(inner,{ballsnum:10, spring:0.3, bounce:-0.9, gravity:0.01});sc.initialize();getFlag(start).οnclickfunction () {document.getElementById(inner).innerHTML;scnew Screen(inner,{ballsnum:10, spring:0.3, bounce:-0.9, gravity:0.01});sc.initialize();}getFlag(stop).οnclickfunction() {clearInterval(sc.timer);}}看起来很简单吧
