在论坛中看到朋友用js做得放烟花效果,把它整理下来,以备以后不时之需~~~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML> <HEAD> <TITLE>【编程游戏】--贺岁放礼花-- </TITLE>
<STYLE type=text/css>
BODY {
MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋体"
}
.STYLE1 {
color: #FF0000;
font-size: 16pt;
font-weight: bold;
}
</STYLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.3790.3959" name=GENERATOR> </HEAD>
<BODY bgColor=#000000>
<table width="100%" height="600">
<tr>
<td valign="middle" align="center">
<p class="STYLE1">祝CSDN全体会员2009年新年快乐! </p>
</td>
</tr>
</table>
<!--[if IE ]>
<STYLE type=text/css>BODY {
OVERFLOW: hidden
}
v/:* {
BEHAVIOR: url(#default#VML)
}
</STYLE>
<![endif]-->
<!--[if IE ]>
<SCRIPT language=JavaScript>
colors = new Array();
// Define your own color combinations
colors[0] = new Array('red', 'fuchsia');
colors[1] = new Array('yellow', 'lime');
colors[2] = new Array('yellow', 'red');
colors[3] = new Array('silver', 'purple');
colors[4] = new Array('purple', 'white');
colors[5] = new Array('blue', 'silver');
colors[6] = new Array('silver', 'green')
colors[7] = new Array('silver', 'blue');
// Define the maximum number of fire arrows
maximum = 1000;
vmlobj='';
for(i = 0; i < 12; i++){
vmlobj += ' <div id="ster'+i+'" style="position:absolute; left:-50px; top-50px; visibility:hidden; z-index:50;">';
vmlobj += ' <v:shape style="width:15px; height:15px;" fillcolor="yellow" coordorigin="0,0" coordsize="200 200">';
vmlobj += ' <v:path v="m 8,65 l 72,65, 92,11, 112,65, 174,65, 122,100, 142,155,92,121, 42,155, 60,100 x e"/>';
vmlobj += ' <v:stroke on="false" /> </v:shape> </div>';
}
document.write(vmlobj); vmlobj = null;
aantal = 0;
function begin()
{
try {
if(aantal == maximum){ return;}
kleurschema = Math.floor(Math.random() * colors.length);
posLinks = Math.floor(Math.random() * (document.body.clientWidth - 180));
posLinks = (posLinks < 170)? 170: posLinks;
posBoven = Math.floor(Math.random() * (document.body.clientHeight - 180));
posBoven = (posBoven < 170)? 170: posBoven;
straal = 0; uiteen = true; teller = 1; flikkereffect = false;
for(var i = 0; i < 12; i++){
document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][0]);
document.getElementById('ster'+i).style.visibility = 'hidden'; // 5.0 fix
document.getElementById('ster'+i).style.left = posLinks;
document.getElementById('ster'+i).style.top = posBoven;
}
document.getElementById('ster0').style.top = (document.body.clientHeight - 20);
document.getElementById('ster0').style.visibility = 'visible';
omhoog();
} catch(e){}
}
function omhoog()
{
try {
positie = parseInt(document.getElementById('ster0').style.top);
if(positie > posBoven){
document.getElementById('ster0').style.top = (positie - 25);
setTimeout('omhoog()', 50);
} else {
for(i = 1; i < 12; i++){
document.getElementById('ster'+i).style.top = positie;
document.getElementById('ster'+i).style.visibility = 'visible';
}
uiteenspatten();
}
} catch(e){}
}
function uiteenspatten()
{
try {
if(straal > 120 && straal % 10 == 0){
flikkereffect = true;
teller = (teller == colors[kleurschema].length)? 0: (teller+1);
}
for(var i = 0; i < 12; i++){
var hoek = i * 30;
var piHoek = Math.PI - Math.PI / 180 * hoek;
var links = posLinks + Math.round(straal * Math.sin(piHoek));
var boven = positie + Math.round(straal * Math.cos(piHoek));
document.getElementById('ster'+i).style.left = links;
document.getElementById('ster'+i).style.top = boven;
if(flikkereffect){
document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][teller]);
}
}
if(straal < 160 && uiteen){
straal += (straal < 120)? 10: 5;
setTimeout('uiteenspatten()', 50);
}
else if(straal > 120){
uiteen = false; straal -= 5;
setTimeout('uiteenspatten()', 50);
}
else if(straal <= 120){
for(var i = 0; i < 12; i++){
document.getElementById('ster'+i).style.visibility = 'hidden';
}
aantal++;
setTimeout('begin()', 300);
}
} catch(e) {}
}
window.οnlοad=begin;
</SCRIPT>
<![endif]-->
</BODY> </HTML>
<2>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>【编程游戏】贺岁放礼花 -- freewind</title>
<style type="text/css">
body{background:#000; height:100%; margin:0px; padding:0px;color:#FFF;}
.ball{color:#FF0000; position:absolute; font-size:16px;}
.star{color:#FF0000; position:absolute; font-size:4px;}
</style>
<script type="text/javascript">
function Firework(sky, loop){
this.sky = sky;
this.skyWidth = document.body.clientWidth || document.documentElement.clientWidth;
this.skyHeight= document.body.clientHeight || document.documentElement.clientHeight;
this.x = this.y = 0;
this.step = 20;
this.delay = 30;
this.stars = [];
this.r = 10;
this.step2 = 7;
this.radius = 80;
this.angle = 45;
this.num = 16;
this.loop = loop;
}
Firework.prototype = {
init : function(){
this.x = parseInt(this.skyWidth/2 * Math.random()) + this.skyWidth / 4;
this.y = this.skyHeight;
this._y = parseInt((this.skyHeight / 4) * Math.random()) + this.skyHeight / 5;
},
show : function(){
var b = document.createElement("div");
b.innerHTML = "●";
b.className = "ball";
b.style.left = this.x + "px";
b.style.top = this.y + "px";
this.ball = b;
this.sky.appendChild(this.ball);
},
hide : function(){
this.sky.removeChild(this.ball);
this.ball = null;
},
hideStars : function(){
for(var i=1; i<=this.num; i++){
this.sky.removeChild(this.stars[i]);
this.stars[i] = null;
}
if(this.loop){
this.play();
}
},
setStarPos : function(){
for(var i=1; i<=this.num; i++){
var p = parseInt(this.r / this.radius * 10);
this.stars[i].style.left = this.x - parseInt(this.r * Math.sin(i * this.angle)) + "px";
this.stars[i].style.top = this.y - parseInt(this.r * Math.cos(i * this.angle)) + "px";
this.stars[i].style.fontSize = 4 + p + "px";
}
},
showStars : function(){
var angles = [15, 30, 45, 60];
var maxs = [20, 12, 6, 10];
var colors = ['#FF0000','#FF00FF','#00FF00','#00FFFF','#FFFFF0'];
var rand = parseInt(Math.random() * maxs.length);
this.r = 10;
this.num = maxs[rand];
this.angle = angles[rand];
for(var i=1; i<=this.num; i++){
this.stars[i] = document.createElement("div");
this.stars[i].innerHTML = "★";
this.stars[i].className = "star";
this.stars[i].style.color = colors[parseInt(Math.random()*colors.length)];
this.sky.appendChild(this.stars[i]);
}
},
moveStars : function(){
var self = this;
if(this.r < this.radius){
var p = this.step2 - parseInt(this.r / this.radius * 5);
p = p < 1 ? 1 : p;
this.r += p;
this.setStarPos();
setTimeout(function(){self.moveStars();}, this.delay);
}else{
setTimeout(function(){self.hideStars();}, 300 * Math.random());
}
},
fire : function(){
this.hide();
this.showStars();
this.moveStars();
},
move : function(){
var self = this;
if(this.y > this._y){
var p = parseInt((this.skyHeight - this.y) / (this.skyHeight - this._y)*10);
this.y -= (this.step - p * 1.6);
this.ball.style.fontSize = 16 - p + "px";
this.ball.style.top = this.y + "px";
setTimeout(function(){self.move();}, this.delay);
}else{
this.fire();
}
},
play : function(){
this.init();
this.show();
this.move();
}
};
window.onload = function(){
new Firework(document.body, true).play();
new Firework(document.body, true).play();
new Firework(document.body, true).play();
};
</script>
</head>
<body>
</body>
</html>
《3》
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>【编程游戏】贺岁放礼花。</title>
<style>
div.fire{
position:absolute;
font-size:12px;
width:12px;
height:12px;
}
span{
position:absolute;
width:1px;
height:1px;
}
</style>
</head>
<body style="margin:0px;">
<div id="container" style="background:#000;width:900px;height:700px;"></div>
<script type="text/javascript">
var imgChar = "●";
var fireColor = ["red", "orange", "yellow", "pink", "cyan"];
var container = document.getElementById("container");
var FireMain = function(){
var self = this;
this.inUse = false;
this.timer;
this.left;
this.top;
this.minTop;
this.speed;
this.color;
this.fireDiv = document.createElement("div");
this.fireSpan = [];
this.blastCount = 0;
this.blastRadius = 2;
this.blastTotal = 40;
this.blastLength = 6;
for(var i=0; i<16; i++){
this.fireSpan[i] = [];
for(var j=0; j<this.blastLength; j++)
this.fireSpan[i][j] = document.createElement("span");
}
this.init = function(left, top, speed, minTop, color){
this.left = left;
this.top = top;
this.minTop = minTop;
this.speed = speed;
this.color = color;
this.blastCount = 0;
}
this.start = function(){
this.fireDiv.className = "fire";
this.fireDiv.innerHTML = imgChar;
this.fireDiv.style.left = this.left + "px";
this.fireDiv.style.top = this.top + "px";
this.fireDiv.style.color = this.color;
container.appendChild(this.fireDiv);
this.timer = window.setInterval(
function(){
self.rise();
}
, 20);
}
this.rise = function(){
this.top -= this.speed;
this.fireDiv.style.top = this.top + "px";
if(this.top <= this.minTop){
window.clearInterval(this.timer);
container.removeChild(this.fireDiv);
this.fire();
}
}
this.fire = function(){
for(var i=0; i<16; i++){
for(var j=0; j<this.blastLength; j++){
this.fireSpan[i][j].style.background = this.color;
this.fireSpan[i][j].style.left = this.left + 6;
this.fireSpan[i][j].style.top = this.top + 6;
if(this.fireSpan[i][j].parentNode == container){
this.fireSpan[i][j].style.display = "";
}else{
container.appendChild(this.fireSpan[i][j]);
}
}
}
this.timer = window.setInterval(
function(){
self.blast();
}
, 20);
}
this.blast = function(){
this.blastCount++;
for(var i=0; i<16; i++){
var sin = Math.abs(Math.sin(i * Math.PI / 8));
var cos = Math.abs(Math.cos(i * Math.PI / 8));
var xP = (i<=4 || i>=12)?1:-1;
var yP = i<=8?-1:1;
this.fireSpan[i][this.blastCount%6].style.left = this.left + 6 + xP * this.blastCount * this.blastRadius * cos + "px";
this.fireSpan[i][this.blastCount%6].style.top = this.top + 6 + yP * this.blastCount * this.blastRadius * sin + this.blastCount/3 + "px";
}
if(this.blastCount >= this.blastTotal){
window.clearInterval(this.timer);
for(var i=0; i<16; i++){
for(var j=0; j<this.blastLength; j++)
this.fireSpan[i][j].style.display = "none";
}
this.inUse = false;
}
}
}
var FireControl = function(interval, poolSize){
var self = this;
this.timer;
this.interval;
this.firePool = [];
for(var i=0; i<poolSize; i++){
this.firePool[i] = new FireMain();
}
this.fire = function(){
var left = 150 + Math.floor(Math.random()*600);
var top = 700 - 12;
var speed = 4 + Math.floor(Math.random()*3);
var minTop = 150 + Math.floor(Math.random()*300);
var color = fireColor[Math.floor(Math.random() * fireColor.length)];
var fireMain = this.instance();
fireMain.inUse = true;
fireMain.init(left, top, speed, minTop, color);
fireMain.start();
}
this.instance = function(){
for(var i=0; i<this.firePool.length; i++){
if(!this.firePool[i].inUse){
return this.firePool[i];
}
if(i == this.firePool.length - 1){
this.firePool.push(new FireMain());
return this.firePool[i + 1];
}
}
}
this.start = function(){
this.fire();
this.timer = window.setInterval(
function(){
self.fire();
}
, interval);
}
}
var fireControl = new FireControl(1000, 5);
fireControl.start();
</script>
</body>
</html>