【编程游戏】贺岁放礼花。（点燃续帖2-8楼wcwtitxu的焰火）

最新推荐文章于 2009-01-18 18:37:00 发布

最新推荐文章于 2009-01-18 18:37:00 发布 · 92 阅读

文章标签：

本编程游戏通过JavaScript实现动态放礼花效果，玩家可通过修改代码调整礼花样式及行为，体验编程乐趣的同时享受视觉盛宴。

点燃[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] <iframe src="http://vote.youkuaiyun.com/VotePostSimple.aspx?voteid=874" marginheight="0" marginwidth="0" scrolling="no" width="100%" frameborder="0" height="400"></iframe> <html> <head><title>ialvin.cn</title> <style> body{ background:#000; padding:0; margin:0; overflow:hidden; } .ptr{ width:2px; height:2px; overflow:hidden; position: absolute; } </style> <script> /*var winHeight; function mouseX(event) { event=event||window.event; return (event.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft))||event.pageY; } function mouseY(event) { event=event||window.event; return (event.clientY+(document.documentElement.scrollTop||document.body.scrollTop))||event.pageY; } function getWindowHeight() { return window.innerHeight || document.body.clientHeight; } window.onload = function(e) { winHeight = getWindowHeight(); }; */ function setColor(p) { p.r=parseInt(p.r/2); p.g=parseInt(p.g/2); p.b=parseInt(p.b/2); if (p.r==0 && p.g==0 && p.b==0) return document.body.removeChild(p.ptr); p.ptr.style.background = "rgb("+p.r+","+p.g+","+p.b+")"; setTimeout(function(){setColor(p);}, 150); } function Point(x, y, r, g, b) { this.ptr = document.createElement("DIV"); this.ptr.className = "ptr"; document.body.appendChild(this.ptr); this.ptr.style.left = x + "px"; this.ptr.style.top = y + "px"; this.r = 2*r; this.g = 2*g; this.b = 2*b; var p = this; setTimeout(function(){setColor(p)}, Math.random()*200); } function Fireworks(mx, my) { this.mx = mx; this.my = my; this.cx = mx; //this.cy = winHeight; this.cy = document.body.clientHeight || document.documentElement.clientHeight; } Fireworks.prototype.run = function() { if (this.cy <= this.my) return this.flash(); new Point(this.cx, this.cy, 0x40, 0x40, 0x40); this.cy -= 10; var self = this; setTimeout( function(){self.run();}, 50); }; Fireworks.prototype.init = function() { this.fs = []; for (var i=0; i<20; i++) { // 下面三行从循环外,移到循环内 var r1 = 128+Math.random()*128; var g1 = 128+Math.random()*128; var b1 = 128+Math.random()*128; var o = {r:r1,g:g1,b:b1}; var d = Math.random() * 2 * Math.PI; var d1 = Math.random(); o.vx = Math.sin(d) * d1 * 8; o.vy = Math.cos(d) * d1 * 8; o.l = parseInt(Math.random() * 5) + 5; this.fs[i] = o; o.x = this.mx; o.y = this.my; } }; Fireworks.prototype.flash = function() { if (!this.fs) this.init(); for (var i=0; i<20; i++) { var o = this.fs[i]; if (o===null) continue; if (o.l < 0) { this.fs[i] = null; continue; } o.vy += 0.02; o.x += o.vx; o.y += o.vy; o.l -= 1; new Point(o.x, o.y, o.r, o.g, o.b); } var me = this; setTimeout(function() { me.flash(); }, 100); }; setInterval(function() { if (Math.random() < 0.3) { var h = document.body.clientHeight || document.documentElement.clientHeight; var w = document.body.clientWidth || document.documentElement.clientWidth; new Fireworks(w * Math.random(), h / 3 - h / 3 * Math.random()).run() } }, 500); /* function mclick(event) { new Fireworks(mouseX(event), mouseY(event)).run(); }*/ </script> </head><body></body></html>
点燃[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]