【编程游戏】贺岁放礼花。（点燃106楼zhanghezheng的焰火）（请在IE下运行）-优快云博客

本篇博客介绍了一个简单的编程游戏——贺岁放礼花。通过JavaScript实现烟花效果，包括烟花上升、爆炸等动画过程。游戏使用了HTML和CSS进行页面布局与样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点燃[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] <iframe src="http://vote.youkuaiyun.com/VotePostSimple.aspx?voteid=812" marginheight="0" marginwidth="0" scrolling="no" width="100%" frameborder="0" height="400"></iframe> <html> <style type="text/css"> .divStyle0 { color:FFFFFF; position:absolute; top:450px; left:900px; } .divStyle1 { color:FFFFFF; position:absolute; top:500px; left:200px; } .divStyle2 { color:FFFFFF; position:absolute; top:500px; left:100px; } .divStyle3 { color:FFFFFF; position:absolute; top:400px; left:800px; } .divStyle4 { color:FFFFFF; position:absolute; top:400px; left:700px; } .divStyle5 { color:FFFFFF; position:absolute; top:550px; left:750px; } .divStyle6 { color:FFFFFF; position:absolute; top:500px; left:920px; } .divStyle7 { color:FFFFFF; position:absolute; top:450px; left:400px; } .divStyle8 { color:FFFFFF; position:absolute; top:400px; left:350px; } .divStyle9 { color:FFFFFF; position:absolute; top:500px; left:650px; } .spanStyle { color:FFFFFF; position:absolute; top:0px; left:0px; display:block ; } </style> <body bgcolor="000000" style="filter:Alpha(Opacity=50)"> <script> var nid = new Array() ;//传id var interval = new Array() ;//传div interval值 var spanInterval = new Array() ;//传span interval值 function create(){ //var sharp = ["■","◆","▲","●","★","【","】","§","α","β"] ; var sharp = ["|","|","|","|","|","|","|","|","|","|"] ; var num = Math.floor(Math.random()*10) ;//随机的div id var div1 = document.createElement("div") ; div1.setAttribute("id","div"+num) ; div1.setAttribute("className","divStyle"+num) ; div1.innerText = sharp[num] ; document.body.appendChild(div1) ; } function up(){ var divs = document.getElementsByTagName("div") ; for(var i =0 ; i < divs.length ; i++) { divs[i].style.posTop = divs[i].offsetTop ; divs[i].style.posLeft = divs[i].offsetLeft ; nid[i] = divs[i].getAttribute("id") ; var divId = nid[i] ; var intervalId = i; interval[intervalId] = setInterval(function(){move_up(divId,intervalId);},50) ; } } function move_up(divId,intervalId){ obj = document.getElementById(divId) ; if(obj.style.posTop > 100) { obj.style.posTop -= 10 ; } else { clearInterval(interval[intervalId]) ; burst(divId,intervalId) ; document.body.removeChild(obj) ; //create() ; //up() ; } } function burst(nid,intervalId){ var obj = document.getElementById(nid) ; var bur1 = "*" ; var bur2 = "*-*" ; var bur3 = "* * *" ; var bur4 = "* * * *" ; var bur5 = "* * * * *" ; var bur6 = "* * * * * *" ; var bur7 = "* * * * *" ; var bur8 = "* * * *" ; var bur9 = "* * *" ; var bur10 = "* *" ; var bur11 = "*" ; var startTop = 30 ; var startLeft = obj.style.posLeft - 40 ; var span = document.createElement("span") ; span.setAttribute("id","span"+intervalId) ; span.setAttribute("className","spanStyle") ; span.style.posTop = startTop ; span.style.posLeft = startLeft ; span.innerHTML = bur1+" <br>"+bur2+" <br>"+bur3+" <br>"+bur4+" <br>"+bur5+" <br>"+bur6+" <br>"+bur7+" <br>"+bur8+" <br>"+bur9+" <br>"+bur10+" <br>"+bur11 ; document.body.appendChild(span) ; spanInterval[intervalId] = setInterval(function(){flash(intervalId);},500) ; var span = document.getElementById("span"+intervalId) ; setTimeout(function(){clearInterval(spanInterval[intervalId]) ;document.body.removeChild(span) ;},3000) ; //document.body.removeChild(span) ; span.style.display = "none" ; } function flash(num){ var obj = document.getElementById("span"+num) ; //alert(obj.style.display) if(obj != undefined){ if(obj.style.display == "none"){ obj.style.display = "block" ; }else{ obj.style.display = "none" } } } window.onload = function() { setInterval(function(){ create() ; up() ; },4000); } //obj.prototype. </script> </body> </html>
点燃[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]