JS Simulation Bubble Screensaver Effect Code _ other special effects

Core code:

Copy Code code as follows:

var t$ = function (ID) {return document.getElementById (ID);}
var $extend = function (DES, SRC) {for (var p. src) {des[p] = src[p]} return des;
var Bubble = function () {
Ball random Style
var clss = [' Ball_one ', ' ball_two ', ' ball_three ', ' ball_four ', ' ball_five ', ' ball_six '];
var Ball = function (radius, clsname) {
var ball = document.createelement (' div ');
Ball.classname = Clsname;
With (Ball.style) {
width = height = (Radius | |) + ' px '; Position = ' absolute ';
}
return ball;
};
Screen saver main class
var screen = function (cid, config) {
var self = this;
if (!) ( Self instanceof screen)) {
Return to New screen (CID, config);
}
Self.container = t$ (CID);
if (!self.container) return;
Config = $extend (screen.config, config | | {});
Configuration Properties
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.balls = [];
Self.timer = null;
Upper and lower left and right border
Self. T_bound = 0;
Self. B_bound = Self.container.clientHeight;
Self. L_bound = 0;
Self. R_bound = Self.container.clientWidth;
};
Static properties
Screen.config = {
Ballsnum:5,//Ball number
spring:0.8,//elastic acceleration
Bounce:-0.95,//Bounce
gravity:0.1//Gravity
};
Screen.prototype = {
Initialize:function () {
var self = this;
Generate pellets
Self.createballs ();
Listening for collisions
Self.timer = setinterval (function () {
Self.hittest ();
}, 32);
},
Createballs: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.balls[i] = ball;
}
Self.container.appendChild (Frag);
},
Collision detection
Hittest:function () {
var self = this, num = self.ballsnum, balls = self.balls;
for (var i = 0; i < num-1; i++) {
var ball0 = balls[i];
ball0.x = Ball0.offsetleft + Ball0.radius;
BALL0.Y = Ball0.offsettop + Ball0.radius;
for (var j = i + 1; J. < Num; j + +) {
var ball1 = balls[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 (Balls[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 ';
Boundary 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 (' yun_qi_img/o_bg1.jpg ') ';
bound = true;
} else {
t$ (' Screen '). style.backgroundimage = ' url (' yun_qi_img/o_bg2.jpg ') ';
bound = false;
}
}
}

Description
There is a big bottleneck in the efficiency of the program. There are a lot of optimizations to be done. Sometimes it continues to improve.
Another: Thank Louvre Hang Qunyu Carefree Ginou and pride of the picture support.
"Source Download"
Http://www.jb51.net/jiaoben/28295.html