【编程游戏】贺岁放礼花。（点燃续帖1-172楼yonghengdexingxing的焰火）

本文链接：https://blog.youkuaiyun.com/zswang/article/details/3680519

本编程游戏通过JavaScript实现动态模拟烟花效果。利用不同颜色、位置和速度参数创建烟花绽放动画，通过重力加速度模拟真实物理效果，并在特定时间爆炸分解成更小的粒子。

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

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] src="http://vote.youkuaiyun.com/VotePostSimple.aspx?voteid=855" marginheight="0" marginwidth="0" scrolling="no" width="100%" frameborder="0" height="400">

<html>
<head>
    
<style type="text/css">
body{
    background:#000000;
}

.FireWork{
    height:3px;
    width:3px;
    overflow:hidden;
}
</style>

//Velocity Class
//========================================
function Velocity(vx,vy){
    this.Vx = vx;
    this.Vy = vy;    
}

//FallingBody Class
//========================================
function FallingBody(color,initPosition,initVelocity,initTime,lifeSpan,domNode,explodable){
    this.InitPosition = initPosition;
    this.InitVelocity = initVelocity;
    this.InitTime = initTime;
    this.LifeSpan = lifeSpan;
    this.DomNode = domNode;
    this.Explodable = explodable;
    this.Color = color;
}

FallingBody.prototype.Show = function(){
    var interval = Environment.Clock - this.InitTime;
    if(interval < 0) return true;
    if(this.LifeSpan <= interval){
        if(this.Explodable) this.Explode(250,0.4);
        this.Dispose();
        return false;
    }
    
    var x = Math.ceil(this.InitPosition.X + this.InitVelocity.Vx * interval);
    var y = Math.ceil(this.InitPosition.Y + this.InitVelocity.Vy * interval - Environment.Gravity * interval * interval / 2.0 );
    if(!this.Explodable) this.DomNode.style.filter = "alpha(opacity=" + (1-interval/this.LifeSpan)*100 + ")";
    this.DomNode.style.display = "block";
    this.DomNode.style.left = x;
    this.DomNode.style.top = y;
    return true;
}

FallingBody.prototype.Dispose = function(){
    this.InitPosition = null;
    this.InitVelocity = null;
    this.InitTime = null;
    this.LifeSpan = null;
    Environment.Screen.removeChild(this.DomNode);
    this.DomNode = null;
}

FallingBody.prototype.Explode = function(velocity,timeSpan){
    var interval = Environment.Clock - this.InitTime;
    var vx = this.InitVelocity.Vx;
    var vy = this.InitVelocity.Vy - Environment.Gravity * interval;
    var x = Math.ceil(this.InitPosition.X + this.InitVelocity.Vx * interval);
    var y = Math.ceil(this.InitPosition.Y + this.InitVelocity.Vy * interval - Environment.Gravity * interval * interval / 2.0 );
    for(var i=0;i<25;i++){
        var angle = Math.random()*360;
        Environment.AddFireWork(this.Color,new Position(x,y),new Velocity(vx+velocity*Math.cos(angle),vy+velocity*Math.sin(angle)),Environment.Clock,timeSpan,false);
    }
}

//Init Envirment
//========================================
var Environment = new Object();

Environment.Colors = ["#ff0000","#00ff00","#000aff","#ff00ff","#ffa500","#ffff00","#00ff00","#ffffff","#fffff0","#ffa500","#55ff66","#ac9dfc","#fff000","#fffff0"];

Environment.AddFireWork = function(color,initPosition,initVelocity,initTime,lifeSpan,explodable){
    var div = document.createElement("div");
    div.style.position = "absolute";
    div.style.display = "none";
    Environment.Screen.appendChild(div);
    div.className = "FireWork";
    div.style.background = color;
    var fallingBody = new FallingBody(color,initPosition,initVelocity,initTime,lifeSpan,div,explodable);
    Environment.FireWorkArray.push(fallingBody);
}

Environment.ClockTick = function(){
    Environment.Clock += Environment.Interval/1000.0;
    for(var i=Environment.FireWorkArray.length;i>0;i--){
        if(!Environment.FireWorkArray[i-1].Show()) Environment.FireWorkArray.splice(i-1,1);
    }
    if(Environment.FireWorkArray.length>0) setTimeout(Environment.ClockTick,Environment.Interval);
    else{
        Environment.Generate();
        setTimeout(Environment.ClockTick,Environment.Interval);    
    }
}

Environment.Generate = function(){
    //Environment.AddFireWork(Environment.Colors[Math.floor(Math.random()*Environment.Colors.length)],new Position(300+600*Math.random(),600),new Velocity(100,-330),Environment.Clock,1+Math.random()*0.3,true);
    //Environment.AddFireWork(Environment.Colors[Math.floor(Math.random()*Environment.Colors.length)],new Position(300+600*Math.random(),600),new Velocity(0,-300),Environment.Clock,1+Math.random()*0.3,true);
    for(var k=0;k<3;k++) Environment.AddFireWork(Environment.Colors[Math.floor(Math.random()*Environment.Colors.length)],new Position(300+2*Math.random(),600),new Velocity(20*Math.random(),-360+100*Math.random()),Environment.Clock,1-Math.random()*0.3,true);
    for(var k=0;k<3;k++) Environment.AddFireWork(Environment.Colors[Math.floor(Math.random()*Environment.Colors.length)],new Position(600+2*Math.random(),600),new Velocity(20*Math.random(),-360+100*Math.random()),Environment.Clock,1-Math.random()*0.3,true);
}

window.onload = function(){
    Environment.Gravity = -10.0;
    Environment.Clock = 0.0;
    Environment.Interval = 10; // 0.1 Seconds
    Environment.Screen = document.getElementsByTagName("body")[0];
    Environment.FireWorkArray = new Array();
    Environment.Generate();
    setTimeout(Environment.ClockTick,Environment.Interval);
}
</script>
</head>
<body>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]