【编程游戏】贺岁放礼花。(第一名奖励10000可用分)
【编程游戏】贺岁放礼花。(第一名奖励10000可用分)(续2)
【编程游戏】贺岁放礼花。(第一名奖励10000可用分)(续1)
【编程游戏】贺岁放礼花。(第一名奖励10000可用分)
博客
说明:
2009年新年即将到来,让我们一起用代码点燃属于程序员的礼花!
这个活动是我个人发起的,简单的说:就是用程序模拟燃放礼花的过程,色彩、轨迹等自由发挥,娱乐为主。
要求:
单一的html文件,8000字内(能一次贴出来);
尽量不含图片;
兼容IE6/7/8、FF2/3。
考评:
动画效果 50%
可读性/代码简洁 30%
运行效率 20%
奖项:
一等奖一名(100专家分、税前10000可用分)
二等奖一名(50专家分、税前2000可用分)
截止日期:
2009春节
祝福大家新年快乐
集中燃放点:(实时更新)
【编程游戏】贺岁放礼花。(点燃续帖2-142楼sharp_ice的焰火)
【编程游戏】贺岁放礼花。(点燃续帖2-141楼sharp_ice的焰火)
【编程游戏】贺岁放礼花。(点燃续帖2-133楼langtse的焰火)(修改自169楼Free_Wind22)
【编程游戏】贺岁放礼花。(点燃续帖2-132楼dh20156的焰火)
【编程游戏】贺岁放礼花。(点燃续帖2-123楼dh20156的焰火)
【编程游戏】贺岁放礼花。(点燃续帖2-8楼wcwtitxu的焰火)
【编程游戏】贺岁放礼花。(点燃续帖2-6楼lshdic的焰火)
【编程游戏】贺岁放礼花。(点燃续帖2-5楼zswang的焰火)
【编程游戏】贺岁放礼花。(点燃续帖1-194楼lshdic的焰火)
【编程游戏】贺岁放礼花。(点燃续帖1-188楼zswang的焰火)
【编程游戏】贺岁放礼花。(点燃续帖1-172楼yonghengdexingxing的焰火)
【编程游戏】贺岁放礼花。(点燃续帖1-164楼lshdic的焰火)
【编程游戏】贺岁放礼花。(点燃续帖1-145楼KiteGirl的焰火)
【编程游戏】贺岁放礼花。(点燃续帖1-143楼KiteGirl的焰火)
【编程游戏】贺岁放礼花。(点燃续帖1-142楼KiteGirl的焰火)
【编程游戏】贺岁放礼花。(点燃续帖1-141楼YH_Random的焰火)
【编程游戏】贺岁放礼花。(点燃续帖1-131楼lshdic的焰火)
【编程游戏】贺岁放礼花。(点燃续帖1-123楼cicadu的焰火)
【编程游戏】贺岁放礼花。(点燃续帖1-116楼cgisir的焰火)
【编程游戏】贺岁放礼花。(点燃续帖1-106楼cgisir的焰火)
【编程游戏】贺岁放礼花。(点燃续帖1-77楼muxrwc的焰火)
【编程游戏】贺岁放礼花。(点燃续帖1-58楼froole的焰火)
【编程游戏】贺岁放礼花。(点燃续帖1-56楼hongmaohouzi的焰火)(请在IE下运行)
【编程游戏】贺岁放礼花。(点燃续帖1-47楼0009的焰火)
【编程游戏】贺岁放礼花。(点燃续帖1-37楼muxrwc的焰火)
【编程游戏】贺岁放礼花。(点燃续帖1-36楼cgisir的焰火)
【编程游戏】贺岁放礼花。(点燃续帖1-24楼KiteGirl的焰火)
【编程游戏】贺岁放礼花。(点燃续帖1-18楼Free_Wind22的焰火)
【编程游戏】贺岁放礼花。(点燃201楼KiteGirl的焰火)
【编程游戏】贺岁放礼花。(点燃200楼KiteGirl的焰火)
【编程游戏】贺岁放礼花。(点燃190楼lshdic的焰火)(请在IE下运行)
【编程游戏】贺岁放礼花。(点燃175楼web_show的焰火)(修改自169楼Free_Wind22)
【编程游戏】贺岁放礼花。(点燃169楼Free_Wind22的焰火)
【编程游戏】贺岁放礼花。(点燃106楼zhanghezheng的焰火)(请在IE下运行)
【编程游戏】贺岁放礼花。(点燃78楼lsc1202001的焰火)
【编程游戏】贺岁放礼花。(点燃60楼Free_Wind22的焰火)
【编程游戏】贺岁放礼花。(点燃46楼dh20156的焰火)
【编程游戏】贺岁放礼花。(点燃34楼zjsfdxbao的焰火)
【编程游戏】贺岁放礼花。(点燃17楼dh20156的焰火)
已经加入投票,请大家参与评分。
[解决办法]
顶啊
[解决办法]
js小菜飘过~~
[解决办法]
顶。。。
[解决办法]
关注
[解决办法]
顶
[解决办法]
关注!
[解决办法]
^_^
[解决办法]
路过
[解决办法]
呵呵
[解决办法]
这个题目对于俺属于比较难...关注、学习
[解决办法]
APPLET版
import java.applet.Applet;import java.applet.AudioClip;import java.awt.*;import java.awt.image.MemoryImageSource;import java.util.Random;public class jhanabi extends Applet implements Runnable{private int m_nAppX;private int m_nAppY;private int m_centerX;private int m_centerY;private int m_mouseX;private int m_mouseY;private int m_sleepTime;private boolean isError;private boolean m_isPaintFinished;boolean isRunning;boolean isInitialized;Thread runner;int pix0[];MemoryImageSource offImage;Image dbImg;int pixls;int pixls2;Random rand;int bits;double bit_px[];double bit_py[];double bit_vx[];double bit_vy[];int bit_sx[];int bit_sy[];int bit_l[];int bit_f[];int bit_p[];int bit_c[];int bit_max;int bit_sound;int ru;int rv;AudioClip sound1;AudioClip sound2;public jhanabi(){m_mouseX = 0;m_mouseY = 0;m_sleepTime = 5;isError = false;isInitialized = false;rand = new Random();bits = 10000;bit_px = new double[bits];bit_py = new double[bits];bit_vx = new double[bits];bit_vy = new double[bits];bit_sx = new int[bits];bit_sy = new int[bits];bit_l = new int[bits];bit_f = new int[bits];bit_p = new int[bits];bit_c = new int[bits];ru = 50;rv = 50;}public void init(){String s =getParameter("para_bits");if(s != null){bits = Integer.parseInt(s);}s = getParameter("para_max");if(s != null){bit_max = Integer.parseInt(s);}s = getParameter("para_blendx");if(s != null){ru = Integer.parseInt(s);}s = getParameter("para_blendy");if(s != null){rv = Integer.parseInt(s);}s = getParameter("para_sound");if(s != null){bit_sound =Integer.parseInt(s);}m_nAppX = size().width;m_nAppY = size().height;m_centerX = m_nAppX / 2;m_centerY = m_nAppY / 2;m_mouseX = m_centerX;m_mouseY = m_centerY;resize(m_nAppX, m_nAppY);pixls = m_nAppX * m_nAppY;pixls2 = pixls - m_nAppX * 2;pix0 = new int[pixls];offImage = new MemoryImageSource(m_nAppX, m_nAppY, pix0, 0, m_nAppX);offImage.setAnimated(true);dbImg = createImage(offImage);for(int i = 0; i < pixls; i++){pix0[i] = 0xff000000;}sound1 =getAudioClip(getDocumentBase(), "firework.au");sound2 = getAudioClip(getDocumentBase(), "syu.au");for(int j = 0; j < bits; j++){bit_f[j] = 0;}isInitialized = true;start();}public void run(){while(!isInitialized) {try{Thread.sleep(200L);}catch(InterruptedException interruptedexception) { }}do{for(int i = 0; i < pixls2; i++){int j = pix0[i];int k = pix0[i + 1];int l = pix0[i + m_nAppX];int i1 = pix0[i + m_nAppX + 1];int j1 = (j & 0xff0000) >> 16;int k1 = ((((k & 0xff0000) >> 16) - j1) * ru >> 8) + j1;j1 = (j & 0xff00) >> 8;int l1 = ((((k & 0xff00) >> 8) - j1) * ru >> 8) + j1;j1 = j & 0xff;int i2 = (((k & 0xff) - j1) * ru >> 8) + j1;j1 = (l & 0xff0000) >> 16;int j2 = ((((i1 & 0xff0000) >> 16) - j1) * ru >> 8) + j1;j1 = (l & 0xff00) >> 8;int k2 = ((((i1 & 0xff00) >> 8) - j1) * ru >> 8) + j1;j1 = l & 0xff;int l2 = (((i1 & 0xff) - j1) * ru >> 8) + j1;int i3 = ((j2 - k1) * rv >> 8) + k1;int j3 = ((k2 - l1) * rv >> 8) + l1;int k3 = ((l2 - i2) * rv >> 8) + i2;pix0[i] = i3 << 16 | j3 << 8 | k3 | 0xff000000;}rend();offImage.newPixels(0, 0, m_nAppX, m_nAppY);try{Thread.sleep(m_sleepTime);}catch(InterruptedException interruptedexception1) { }} while(true);}public void update(Graphics g){paint(g);}public void paint(Graphics g){g.drawImage(dbImg, 0, 0, this);}public void start(){if(isError){return;}isRunning = true;if(runner == null){runner = new Thread(this);runner.start();}}public void stop(){if(runner != null){runner.stop();runner = null;}}public boolean mouseMove(Event event, int i, int j){m_mouseX = i;m_mouseY = j;return true;}public boolean mouseDown(Event event, int i, int j){m_mouseX = i;m_mouseY = j;int k = (int)(rand.nextDouble() * 256D);int l = (int)(rand.nextDouble() * 256D);int i1 = (int)(rand.nextDouble() * 256D);int j1 = k << 16 | l << 8 | i1 | 0xff000000;int k1 = 0;for(int l1 = 0; l1 < bits; l1++){if(bit_f[l1] != 0){continue;}bit_px[l1] = m_mouseX;bit_py[l1] = m_mouseY;double d = rand.nextDouble() * 6.2800000000000002D;double d1 = rand.nextDouble();bit_vx[l1] = Math.sin(d) * d1;bit_vy[l1] = Math.cos(d) * d1;bit_l[l1] = (int)(rand.nextDouble() * 100D) + 100;bit_p[l1] = (int)(rand.nextDouble() * 3D);bit_c[l1] = j1;bit_sx[l1] = m_mouseX;bit_sy[l1] = m_nAppY - 5;bit_f[l1] = 2;if(++k1 == bit_max){break;}}if(bit_sound > 1){sound2.play();}return true;}public boolean mouseExit(Event event, int i, int j){m_mouseX = i;m_mouseY = j;return true;}void rend(){boolean flag = false;boolean flag1 = false;boolean flag2 = false;for(int i = 0; i < bits; i++){switch(bit_f[i]){default:break;case 1: // '\001'bit_vy[i] += rand.nextDouble() / 50D;bit_px[i] += bit_vx[i];bit_py[i] += bit_vy[i];bit_l[i]--;if(bit_l[i] == 0 || bit_px[i] < 0.0D || bit_py[i] < 0.0D || bit_px[i] > (double)m_nAppX || bit_py[i] > (double)(m_nAppY - 3)){bit_c[i] = 0xff000000;bit_f[i] = 0;} elseif(bit_p[i] == 0){if((int)(rand.nextDouble() * 2D) == 0){bit_set((int)bit_px[i], (int)bit_py[i], -1);}} else{bit_set((int)bit_px[i], (int)bit_py[i], bit_c[i]);}break;case 2: // '\002'bit_sy[i] -= 5;if((double)bit_sy[i] <= bit_py[i]){bit_f[i] = 1;flag2 = true;}if((int)(rand.nextDouble() * 20D) == 0){int j = (int)(rand.nextDouble() * 2D);int k = (int)(rand.nextDouble() * 5D);bit_set(bit_sx[i] + j, bit_sy[i] + k, -1);}break;}}if(flag2 && bit_sound > 0){sound1.play();}}void bit_set(int i, int j, int k){int l = i + j * m_nAppX;pix0[l] = k;}}
[解决办法]
雏形先:
<!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-Language" content="zh-CN" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>【编程游戏】贺岁放礼花。</title></head><body><script type="text/javascript">var powder = function(sky,spattern,scolor,astart,aend){ this.sky = sky; this.size = 50; this.color = scolor; this.start = astart; this.end = aend; this.times = 20; this.steps = 100; this.innerHTML = spattern||'●'; this.style.cssText = 'position:absolute;font-weight:bold;font-family:arial;color:'+scolor+';left:'+this.start[0]+'px;top:'+this.start[1]+';font-size:'+this.size+'px;'; this.go = function(){ var op = this,sky = this.sky;color = this.color,size = this.size,startX = this.start[0],startY = this.start[1],endX = this.end[0],endY = this.end[1],steps = this.steps; var dx = endX - startX; var dy = endY - startY; var curStep = 0; var flash = function(){ if(!sky){return;} var sbg = sky.style.background = color; window.setTimeout(function(){sky.style.background = 'black';sky.removeChild(op);}); }; var move = function(){ curStep++; if(curStep>steps){ window.clearInterval(timer); flash(); return; } var sx = dx*curStep/steps,sy = dy*curStep/steps,ss = size*curStep/steps; op.style.left = (startX + sx) + "px"; op.style.top = (startY + sy) + "px"; op.style.fontSize = (size - ss) + "px"; } var timer = window.setInterval(move,this.times); };};var flash = function(sky){ this.sky = sky;};flash.prototype = { fire:function(){ var sky = this.sky; var pf = function(){ var rsx = parseInt(Math.random()*1000),rey = parseInt(Math.random()*10); var astart = [rsx,800],aend = [rsx,rey]; var x = document.createElement("div"); sky.appendChild(x); powder.call(x,sky,'●','red',astart,aend); x.go(); }; window.setInterval(pf,1000); }, init:function(){ if(!this.sky){return;} this.sky.style.cssText = 'background:black;padding:0;border:0;width:100%;height:100%;overflow:hidden;'; }};var xmas_flash = new flash(document.body);xmas_flash.init();xmas_flash.fire();</script></body></html>
[解决办法]
静观其变
[解决办法]
学习中
[解决办法]
小弟,js不够强大,顶zs了
[解决办法]
功夫不够,顶。
[解决办法]
关注...
[解决办法]
啊啊啊,羡慕 ,
不会啊
接分行不啊
王老大
[解决办法]
只能关注
[解决办法]
mark
[解决办法]
留名先
------解决方案--------------------
有做的程序,没有做的网页,嘿嘿……帮你顶起来
[解决办法]
..... 一个个点的描绘..... js 的绘图,没概念
[解决办法]
税前分数很诱人,平安夜晚安。=_=睡觉了
[解决办法]
先这样吧,明天再改
<html><head><title></title></head><body><script>var FireColor = ["red","blue","yellow","orange","pink"];var FireStyle = ["¤","●","○","◎","▲"];var StarStyle = ["☆","★","※","∵","◆"];function xo(){ this.x=0;this.y=0;this.power=Math.floor(Math.random()*arguments[0]+arguments[1]);}function star(c){ var handle=this; xo.call(this,100,0); this.star=StarStyle[Math.floor(Math.random()*4)]; this.angle=2*Math.PI*Math.random()+1; this.o=document.createElement("span"); document.body.appendChild(this.o); this.o.innerHTML=this.star; this.style=this.o.style; this.color=c; this.exist=false; with(this.style) { visibility="hidden"; position="absolute"; color=this.color; } this.move=function() { if(this.y<this.power) { this.y+=2; with(this.style) { top=this.y; left=this.x+this.y*Math.sin(this.angle); } }else { this.clear(); } } this.burn=function(x,y) { this.style.left=this.x=x; this.style.top=this.y=y; } this.shine=function(x,y) { this.burn(x,y); this.style.visibility="visible"; this.gogo=setInterval(function(){handle.move()},17); } this.clear=function() { this.o.parentNode.removeChild(this.o); clearInterval(this.gogo); }}function Firework(){ var handle=this; xo.call(this,10,25); this.color=FireColor[Math.floor(Math.random()*4)]; this.shape=FireStyle[Math.floor(Math.random()*4)]; this.starnum=Math.floor(Math.random()*7)+5; this.star = new Array(); this.exist=true; for(var i=0;i<this.starnum;i++) { this.star[i]=new star(this.color); } this.starnum=Math.floor(Math.random()*4)+4; this.o = document.createElement("span"); document.body.appendChild(this.o); this.o.innerHTML=this.shape; this.style=this.o.style; this.style.color=this.color; this.style.position="absolute"; this.setX=function(x){this.style.left=x+"px";this.x=x;} this.setY=function(y){this.style.top=y+"px";this.y=y;} this.move=function() { this.y -=this.power/3; if(this.y>this.power) this.style.top=this.y + "px"; else { if(this.exist)this.clear(); } } this.fire=function() { this.gogo=setInterval(function(){handle.move()},17); }; this.clear=function() { this.o.parentNode.removeChild(this.o); clearInterval(this.gogo); this.exist=false; for(var i=0,j=this.star.length;i<j;i++) { this.star[i].shine(this.x,this.y); } }}function FireScene(n){ this.num=n; this.SceneWidth=document.body.clientWidth; this.SceneHeight=document.body.clientHeight; this.step=Math.floor(this.SceneWidth/this.num); this.firework=new Array(); for(var i=0;i<this.num;i++) { this.firework[i]=new Firework(); this.firework[i].setX(this.step*i); this.firework[i].setY(this.SceneHeight-50); } this.fire=function() { for(var i=0,j=this.firework.length;i<j;i++) { this.firework[i].fire(); } }}window.onload=function(){ document.body.style.backgroundColor = "Black"; new FireScene(8).fire() setInterval("new FireScene(8).fire()",2000);}</script></body></html>
[解决办法]
<html><head> <style> * {margin:0px 0px; border:0px; background:#000; text-align:center;} img {top:48%; position:absolute;} </style></head><body> <img src="http://www.dabaoku.com/gif/shehui/004/002b.gif" /></body></html>
[解决办法]
就这样了,不弄了,心情8好,唉!
<!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-Language" content="zh-CN" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>【编程游戏】贺岁放礼花。</title></head><body><script type="text/javascript">var powder = function(sky,spattern,scolor,isize,astart,aend){ this.sky = sky; this.color = scolor; this.start = astart; this.fsize = isize; this.end = aend; this.times = 20; this.steps = 100; this.innerHTML = spattern||'●'; this.style.cssText = 'position:absolute;font-weight:bold;font-family:arial;color:'+scolor+';left:'+this.start[0]+'px;top:'+this.start[1]+';font-size:'+this.size+'px;'; this.go = function(){ var op = this,sky = this.sky;color = this.color,size = 50,fsize = this.fsize,startX = this.start[0],startY = this.start[1],endX = this.end[0],endY = this.end[1],steps = this.steps; var dx = endX - startX; var dy = endY - startY; var curStep = 0,dtimer = null; var down = function(l){ if(!l){window.clearTimeout(dtimer);sky.style.background = 'black';sky.removeChild(op);return;} var x = parseInt(op.style.left),y = parseInt(op.style.top); op.style.color = (l%2)?color:'black'; sky.style.background = (l%20)?'black':color; op.style.fontSize = parseInt(op.style.fontSize)+10+'px'; op.style.left = x-2+'px'; op.style.top = y-3+'px'; dtimer = window.setTimeout(function(){down(--l);}); }; var flash = function(){ if(!sky){return;} var x = parseInt(op.style.left)-200,y = parseInt(op.style.top)-250; op.style.fontSize = fsize+'px'; op.style.left = x+'px'; op.style.top = y+'px'; down(op.times); }; var move = function(){ curStep++; if(curStep>steps){ window.clearInterval(timer); flash(); return; } var sx = dx*curStep/steps,sy = dy*curStep/steps,ss = size*curStep/steps; op.style.left = (startX + sx) + "px"; op.style.top = (startY + sy) + "px"; op.style.fontSize = (size - ss) + "px"; } var timer = window.setInterval(move,this.times); };};var flash = function(sky){ this.sky = sky;};flash.prototype = { fire:function(){ var sky = this.sky; var pf = function(){ var asize = [100,250,350,500]; var acolor = ['#ff0000','#A0088F','#FFD02A','#1285BE']; var rsx = parseInt(Math.random()*1000),rey = parseInt(Math.random()*10); var astart = [rsx,800],aend = [rsx,rey],ssize = asize[0],scolor = acolor[0]; if(!(rey%2)){ssize = asize[1];scolor = acolor[1];} if(!(rey%3)){ssize = asize[2];scolor = acolor[2];} if(!(rey%5)){ssize = asize[3];scolor = acolor[3];} var x = document.createElement("div"); sky.appendChild(x); powder.call(x,sky,'●',scolor,ssize,astart,aend); x.go(); }; window.setInterval(pf,1000); }, init:function(){ if(!this.sky){return;} this.sky.style.cssText = 'background:black;padding:0;border:0;width:100%;height:100%;overflow:hidden;'; }};var xmas_flash = new flash(document.body);xmas_flash.init();xmas_flash.fire();</script></body></html>
[解决办法]
来混点积分 呵呵
<!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.onload=begin;
</SCRIPT>
<![endif]-->
</BODY></HTML>
[解决办法]
我电脑上只有IE6和FF3,可以运行,不知道其他浏览器能用不...
<!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>
[解决办法]
小子献丑 准备再改成抛物线
<!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:2px; height:2px; }</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(left, top, speed, minTop, color){ var self = this; this.timer; this.left = left; this.top = top; this.minTop = minTop; this.speed = speed; this.color = color; this.fireDiv = document.createElement("div"); this.fireSpan = []; this.blastCount = 0; this.blastRadius = 2; this.blastTotal = 40; 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 -= 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++){ this.fireSpan[i] = document.createElement("span"); this.fireSpan[i].style.background = this.color; this.fireSpan[i].style.left = this.left + 6; this.fireSpan[i].style.top = this.top + 6; container.appendChild(this.fireSpan[i]); } 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].style.left = this.left + 6 + xP * this.blastCount * this.blastRadius * cos + "px"; this.fireSpan[i].style.top = this.top + 6 + yP * this.blastCount * this.blastRadius * sin + "px"; } if(this.blastCount == this.blastTotal){ window.clearInterval(this.timer); for(var i=0; i<16; i++){ container.removeChild(this.fireSpan[i]); } } } } var FireControl = function(interval){ var self = this; this.timer; this.interval; 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 = new FireMain(left, top, speed, minTop, color); fireMain.start(); } this.start = function(){ this.timer = window.setInterval( function(){ self.fire(); } , interval); } } var fireControl = new FireControl(1500); fireControl.start();</script></body></html>
[解决办法]
改进了下 增加对象池 适当抛物线处理
<!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>
[解决办法]
改为FF下放的频率比IE慢
<!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:6px; width:6px; height:6px; } span{ position:absolute; font-size:0px; 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.speed; this.color; this.fireDiv = document.createElement("div"); this.fireSpan = []; this.riseCount = 0; 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, color){ this.left = left; this.top = top; this.speed = speed; this.color = color; this.riseCount = 0; 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.riseCount++; if(this.riseCount % 10 == 0){ this.speed--; } this.top -= this.speed; this.fireDiv.style.top = this.top + "px"; if(this.speed <= 1){ 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 + 3 + "px"; this.fireSpan[i][j].style.top = this.top + 3 + "px"; 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%this.blastLength].style.left = this.left + 3 + xP * this.blastCount * this.blastRadius * cos + "px"; this.fireSpan[i][this.blastCount%this.blastLength].style.top = this.top + 3 + 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 = 8 + Math.floor(Math.random()*3); var color = fireColor[Math.floor(Math.random() * fireColor.length)]; var fireMain = this.instance(); fireMain.inUse = true; fireMain.init(left, top, speed, 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 freq = document.all?600:2500; var fireControl = new FireControl(freq, 1); fireControl.start();</script></body></html>