Js simulated bubble screensaver effect code _ Other Special Effects

Use JavaScript to simulate the screen saver effect code of bubbles, including the Collision Effect of bubbles. For more information, see. Core code:

The Code is as follows:

Var T $ = function (id) {return document. getElementById (id );}
Var $ extend = function (des, src) {for (var p in src) {des [p] = src [p]} return des ;}
Var Bubble = function (){
// Random ball style
Var clss = ['ball _ one', 'ball _ two', 'ball _ three ', 'ball _ four', 'ball _ five ', 'ball _ six'];
Var Ball = function (radius, clsname ){
Var ball = document. createElement ('P ');
Ball. className = clsname;
With (ball. style ){
Width = height = (radius | 10) + 'px '; position = 'absolute ';
}
Return ball;
};
// Screen Saver main class
Var Screen = function (cid, config ){
Var self = this;
If (! (Self instanceof Screen )){
Return new Screen (cid, config );
}
Self. container = T $ (cid );
If (! Self. container) return;
Config = $ extend (Screen. Config, config || {});
// Configure attributes
Self. ballsnum = config. ballsnum;
Self. diameter = 55;
Self. radius = self. diameter/2;
Self. bounce = config. bounce;
Self. spring = config. spring;
Self. gravity = config. gravity;
Self. bballs = [];
Self. timer = null;
// Upper, lower, and left borders
Self. T_bound = 0;
Self. B _bound = self. container. clientHeight;
Self. L_bound = 0;
Self. R_bound = self. container. clientWidth;
};
// Static attributes
Screen. Config = {
Ballsnum: 5, // Number of balls
Spring: 0.8, // elastic Acceleration
Bounce:-0.95, // Rebound
Gravity: 0.1 // gravity
};
Screen. prototype = {
Initialize: function (){
Var self = this;
// Generate a ball
Self. createbils ();
// Listen for collision
Self. timer = setInterval (function (){
Self. hitTest ();
}, 32 );
},
Createbils: function (){
Var self = this, num = self. ballsnum, I = 0;
Var frag = document. createDocumentFragment ();
For (; I <num; I ++ ){
Var ball = new Ball (self. diameter, clss [Math. floor (Math. random () * (clss. length-1)]);
Ball. radius = self. radius;
Ball. diameter = self. diameter;
Ball. style. left = (Math. random () * self. B _bound) + 'px ';
Ball. style. top = (Math. random () * self. R_bound) + 'px ';
Ball. vx = Math. random () * 6-3;
Ball. vy = Math. random () * 6-3;
Frag. appendChild (ball );
Self. bils [I] = ball;
}
Self. container. appendChild (frag );
},
// Collision Detection
HitTest: function (){
Var self = this, num = self. ballsnum, bballs = self. bballs;
For (var I = 0; I <num-1; I ++ ){
Var ball0 = bils [I];
Ball0.x = ball0.offsetLeft + ball0.radius;
Ball0.y = ball0.offsetTop + ball0.radius;
For (var j = I + 1; j <num; j ++ ){
Var ball1 = bils [j];
Ball1.x = ball1.offsetLeft + ball1.radius;
Ball1.y = ball1.offsetTop + ball1.radius;
Var dx = ball1.x-ball0.x;
Var dy = ball1.y-ball0.y;
Var dist = Math. sqrt (dx * dx + dy * dy );
Var misDist = ball0.radius + ball1.radius;
If (dist <misDist ){
Var angle = Math. atan2 (dy, dx );
Var tx = ball0.x + Math. cos (angle) * misDist;
Var ty = ball0.y + Math. sin (angle) * misDist;
Var ax = (tx-ball1.x) * self. spring;
Var ay = (ty-ball1.y) * self. spring;
Ball0.vx-= ax;
Ball0.vy-= ay;
Ball1.vx + = ax;
Ball1.vy + = ay;
}
}
}
For (var I = 0; I <num; I ++ ){
Self. move (bils [I]);
}
},
// Bubble Motion
Move: function (ball ){
Var self = this;
Ball. vy + = self. gravity;
Ball. style. left = (ball. offsetLeft + ball. vx) + 'px ';
Ball. style. top = (ball. offsetTop + ball. vy) + 'px ';
// Border detection
Var T = self. T_bound, B = self. B _bound, L = self. L_bound, R = self. R_bound, BC = self. bounce;
If (ball. offsetLeft + ball. diameter> R ){
Ball. style. left = R-ball. diameter + 'px ';
Ball. vx * = BC;
} Else if (ball. offsetLeft <L ){
Ball. style. left = L + 'px ';
Ball. vx * = BC;
}
If (ball. offsetTop + ball. diameter> B ){
Ball. style. top = B-ball. diameter + 'px ';
Ball. vy * = BC;
} Else if (ball. offsetTop <T ){
Ball. style. top = T + 'px ';
Ball. vy * = BC;
}
}
};
Return {Screen: Screen}
}();
Window. onload = function (){
Var SC = null;
T $ ('start'). onclick = function (){
Document. getElementById ('inner '). innerHTML = '';
SC = Bubble. Screen ('inner ', {ballsnum: 5, spring: 0.8, bounce:-0.95, gravity: 0.1 });
SC. initialize ();
};
T $ ('stop'). onclick = function () {clearInterval (SC. timer );}
Var bound = false
T $ ('change'). onclick = function (){
If (! Bound ){
T $ ('screen'). style. backgroundImage = 'url ("http://demo.jb51.net/js/bubbling/o_bg1.jpg ")';
Bound = true;
} Else {
T $ ('screen'). style. backgroundImage = 'url ("http://demo.jb51.net/js/bubbling/o_bg2.jpg ")';
Bound = false;
}
}
}

[Description]
There is a major bottleneck in program efficiency. There are still many optimizations to be done. Time to continue improving.
In addition, I would like to thank Luo xiaoyaoqun for their support for images.
[Source code download]
Http://www.jb51.net/jiaoben/28295.html