【编程游戏】贺岁放礼花。（点燃60楼Free_Wind22的焰火）

最新推荐文章于 2025-12-15 15:15:21 发布

最新推荐文章于 2025-12-15 15:15:21 发布 · 92 阅读

文章标签：

本文介绍了一个使用HTML和JavaScript实现的编程游戏——贺岁放礼花。通过创建动态效果模拟烟花绽放的过程，包括烟花上升、爆炸并散开成星星等细节。

点燃[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] <iframe src="http://vote.youkuaiyun.com/VotePostSimple.aspx?voteid=810" marginheight="0" marginwidth="0" scrolling="no" width="100%" frameborder="0" height="400"></iframe> <!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=utf-8" /> <title>【编程游戏】贺岁放礼花 -- freewind</title> <style type="text/css"> html, 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>
点燃[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]