<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>X Fireworks</title>
<style>
body {
background-color: #000;
}
</style>
<script type="text/javascript"><!--
/*A zhangyx production. Enjoy it!*/
var H = document.documentElement.clientHeight;
var W = document.documentElement.clientWidth;
var G = 3;
var OFFSET_BOTTOM = 50;
var T_STEP = window.ActiveXObject ? 0.5 : 0.3;
var MAIN_BLAZE_SIZE = 15;
var MAIN_BLAZE_LASTS = Math.floor(Math.sqrt(2 * (H - OFFSET_BOTTOM) / G));
var BLAZE_SIZE = 15;
var BLAZE_COUNT = 20;
var BLAZE_ANGLE = 2 * Math.PI / BLAZE_COUNT;
var BLAZE_LASTS = 12;
var BLAZE_MAX_SPEED = 20;
var TRACK_SIZE = 15;
var TRACK_INTERVAL = 2;
var TRACK_LASTS = 4;
var FW_STYLE = [["*", "."], ["^", "."], ["*", "*"], [".", "."], ["o", "."], ["O", "o"]];
var TOTAL_FIREWORKS = 2;
function Fireworks() {
this.engine = new PhysicalEngine();
this.status = Fireworks.INIT;
this.blazes = [];
this.tracks = [];
this.intervalCounter = 0;
}
Fireworks.INIT = 0
Fireworks.RISING = 1;
Fireworks.PRE_BLAZE = 2;
Fireworks.BLAZE = 3;
Fireworks.DEAD = 4;
var textDiv;
var shineBlaze;
Fireworks.prototype = {
step: function() {
switch (this.status) {
case Fireworks.INIT:
this.blazes.push(this.engine.getMainBlaze());
this.status = Fireworks.RISING;
break;
case Fireworks.RISING:
this._commonManagement();
if (this.blazes[0].lasts <= 0) {
this.status = Fireworks.PRE_BLAZE;
}
break;
case Fireworks.PRE_BLAZE:
this.engine.getBlazes(this.blazes);
document.body.removeChild(this.blazes[0]);
this.blazes.shift();
this.status = Fireworks.BLAZE;
shineBlaze = this;
break;
case Fireworks.BLAZE:
this._commonManagement();
if (this.blazes[0].color.r <= 0) {
this.status = Fireworks.DEAD;
}
break;
case Fireworks.DEAD:
if (shineBlaze == this) shineBlaze = null;
var remove = function(con) {
while (con.length != 0) {
document.body.removeChild(con[0]);
con.shift();
}
};
remove(this.blazes);
remove(this.tracks);
break;
}
},
_commonManagement: function() {
this.intervalCounter++;
this.intervalCounter %= TRACK_INTERVAL;
var length = this.blazes.length;
for (var i = 0; i < length; i++) {
var blaze = this.blazes[i];
this.engine.transBlaze(this.blazes[i]);
if (this.intervalCounter == 0) {
this.tracks.push(this.engine.getTrack(blaze));
}
}
var length = this.tracks.length;
for (var i = 0; i < length; i++) {
var track = this.tracks[i];
this.engine.transTrack(track);
if (track.lasts <= 0) {
this.tracks.shift();
length--;
i--;
document.body.removeChild(track);
}
}
}
};
function PhysicalEngine() {
var style = FW_STYLE[Math.round((FW_STYLE.length - 1) * Math.random())];
this.blazeChar = style[0];
this.trackChar = style[1];
}
PhysicalEngine.prototype = {
getMainBlaze: function() {
var blaze = document.createElement("div");
blaze.style.position = "absolute";
blaze.style.zIndex = 100;
blaze.lasts = MAIN_BLAZE_LASTS * (1 + Math.random()) / 2;
blaze.color = {
r: 255 * Math.random(),
g: 255 * Math.random(),
b: 255 * Math.random()
};
blaze.path = {
x: Math.round(W * Math.random()),
y: H - OFFSET_BOTTOM
};
blaze.speed = {
x: 0,
y: - G * blaze.lasts
};
blaze.size = MAIN_BLAZE_SIZE;
blaze.color.rd = blaze.color.r / blaze.lasts * T_STEP;
blaze.color.gd = blaze.color.g / blaze.lasts * T_STEP;
blaze.color.bd = blaze.color.b / blaze.lasts * T_STEP;
blaze.speed.xd = - 0;
blaze.speed.yd = G * T_STEP;
blaze.innerHTML = this.blazeChar;
this._setCSS(blaze);
document.body.appendChild(blaze);
return blaze;
},
getBlazes: function(blazes) {
var mainBlaze = blazes[0];
var speed = (1 + Math.random()) / 2 * BLAZE_MAX_SPEED;
var speedType = Math.round(Math.random());
var accType = Math.round(Math.random());
for (var i = 0; i < BLAZE_COUNT; i++) {
var blaze = document.createElement("div");
blaze.style.position = "absolute";
blaze.style.zIndex = 100;
blaze.lasts = BLAZE_LASTS;
blaze.color = {
r: 255 * Math.random(),
g: 255 * Math.random(),
b: 255 * Math.random()
};
blaze.path = {
x: mainBlaze.path.x,
y: mainBlaze.path.y
};
if (speedType) {
blaze.speed = {
x: speed * Math.cos(BLAZE_ANGLE * i),
y: speed * Math.sin(BLAZE_ANGLE * i)
}
} else {
blaze.speed = {
x: (1 + Math.random()) / 2 * BLAZE_MAX_SPEED * Math.cos(BLAZE_ANGLE * i),
y: (1 + Math.random()) / 2 * BLAZE_MAX_SPEED * Math.sin(BLAZE_ANGLE * i)
}
}
blaze.size = BLAZE_SIZE;
blaze.color.rd = blaze.color.r / BLAZE_LASTS * T_STEP
blaze.color.gd = blaze.color.g / BLAZE_LASTS * T_STEP
blaze.color.bd = blaze.color.b / BLAZE_LASTS * T_STEP
if (accType) {
blaze.speed.xd = blaze.speed.x / BLAZE_LASTS * T_STEP;
blaze.speed.yd = (blaze.speed.y / BLAZE_LASTS + G) * T_STEP;
} else {
blaze.speed.xd = 0;
blaze.speed.yd = 0;
}
blaze.innerHTML = this.blazeChar;
this._setCSS(blaze);
document.body.appendChild(blaze);
blazes.push(blaze);
}
},
getTrack: function(blaze) {
var track = document.createElement("div");
track.style.position = "absolute";
track.style.zIndex = 50;
track.lasts = TRACK_LASTS
track.color = {
r: blaze.color.r,
g: blaze.color.g,
b: blaze.color.b
}
track.path = {
x: blaze.path.x,
y: blaze.path.y
};
track.size = TRACK_SIZE;
track.color.rd = track.color.r / track.lasts * T_STEP;
track.color.gd = track.color.g / track.lasts * T_STEP;
track.color.bd = track.color.b / track.lasts * T_STEP;
track.innerHTML = this.trackChar;
this._setCSS(track);
document.body.appendChild(track);
return track;
},
transBlaze: function(blaze) {
blaze.color.r -= blaze.color.rd;
blaze.color.g -= blaze.color.gd;
blaze.color.b -= blaze.color.bd;
blaze.path.x += blaze.speed.x * T_STEP;
blaze.path.y += blaze.speed.y * T_STEP;
blaze.speed.x += blaze.speed.xd;
blaze.speed.y += blaze.speed.yd;
blaze.lasts -= T_STEP;
this._setCSS(blaze);
},
transTrack: function(track) {
track.color.r -= track.color.rd;
track.color.g -= track.color.gd;
track.color.b -= track.color.bd;
track.lasts -= T_STEP;
},
_setCSS: function(obj) {
var style = obj.style;
style.left = Math.floor(obj.path.x) + "px";
style.top = Math.floor(obj.path.y) + "px";
style.fontSize = obj.size + "px";
style.color = "rgb(" + Math.floor(obj.color.r) + "," + Math.floor(obj.color.g) + "," + Math.floor(obj.color.b) + ")";
}
};
function setOut() {
var container = [];
textDiv = document.getElementById("text");
textDiv.style.left = (W - textDiv.clientWidth) / 2 + "px";
textDiv.style.top = (H - textDiv.clientHeight) / 2 + "px";
for (var i = 0; i < TOTAL_FIREWORKS; i++) {
container.push(new Fireworks());
}
window.setInterval(function() {
for (var i = 0; i < TOTAL_FIREWORKS; i++) {
container[i].step();
if (container[i].status == Fireworks.DEAD) {
container[i].step();
container[i].status = Fireworks.INIT;
}
}
if (shineBlaze)
textDiv.style.color = shineBlaze.blazes[0].style.color;
}, 10);
}
// --></script>
</head>
<body onload="setOut();">
<div id="text" style="position: absolute; font-size: 50px; text-align: center;" mce_style="position: absolute; font-size: 50px; text-align: center;">
Happy 2009!
</div>
</body>
</html>