林俊海的博客

超級大菜鳥，每天要自強！

寫了個 JavaScript 煙花

在 CSDN 看到个 "【编程游戏】贺岁放礼花" 的 JavaScript 活动。
http://topic.csdn.net/u/20090104/17/db61e39c-7aed-46e0-8a0f-b571497f087c.html
看了人家好多个漂亮的作品，自己也想练练。

胡乱写了一个简单点的，投上去。当是记录自己的学习历程。
“【编程游戏】贺岁放礼花。（点燃续帖2-8楼wcwtitxu的焰火）” 就是我投的。
运行起来，执行效率较低。还得多学学...
效果预览
代码如下:

<html>
<head><title>新年快樂 萬事如意</title>
<style>
body{ background:#000; padding:0; margin:0; overflow:hidden; }
.ptr{ width:2px; height:2px; overflow:hidden; position: absolute; }
</style>
<script>
function setColor(p) {
    p.r=Math.floor(p.r/2); p.g=Math.floor(p.g/2); p.b=Math.floor(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 Firework(mx, my) {
    this.mx = mx;
    this.my = my;
    this.cy=document.body.clientHeight||document.documentElement.clientHeight;
}
Firework.prototype.fire = function() {
    if (this.cy <= this.my) return this.expansion();
    new Point(this.mx, this.cy, 0x40, 0x40, 0x40);
    this.cy -= 10;
    var self = this;
    setTimeout(function(){self.fire();}, 50);
};
Firework.prototype.init = function() {
    this.fs = [];
    var r1 = Math.random()*256;
    var g1 = Math.random()*256;
    var b1 = Math.random()*256;
    for (var x=0; x<20; x++) {
        var o = {r:r1,g:g1,b:b1};
        var d = Math.random() * 6.283;
        var d1 = Math.random();
        o.vx = Math.sin(d) * d1 * 8;
        o.vy = Math.cos(d) * d1 * 8;
        o.l = Math.floor(Math.random() * 5) + 5;
        this.fs[x] = o;
        o.x = this.mx;
        o.y = this.my;
    }
};
Firework.prototype.expansion = function() {
    if (!this.fs) this.init();
    for (var x=0; x<20; x++) {
        var o = this.fs[x];
        if (o===null) continue;
        if (o.l < 0) {
            this.fs[x] = null;
            continue;
        }
        o.vy += 0.03;
        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.expansion(); }, 100);
};
window.onload = function() {
    if (Math.random() < 0.3) {
      var h=document.body.clientHeight||document.documentElement.clientHeight;
      var w=document.body.clientWidth||document.documentElement.clientWidth;
      new Firework(0.2*w+0.6*w*Math.random(),h/2+30-h/2*Math.random()).fire();
    }
    setTimeout(arguments.callee, 500);
};
</script></head><body></body></html>

posted on 2009-01-05 17:40 林俊海閱讀(132) 評論(0) 編輯收藏

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理

Blog Stats

News

隨筆分類(28)

文章分類(4)

隨筆檔案(53)

文章檔案(4)

相冊

相關鏈接

林俊海的博客