我改的[放烟火]，哈哈

最新推荐文章于 2025-08-15 20:44:49 发布
BoolYang
最新推荐文章于 2025-08-15 20:44:49 发布
阅读量628
点赞数
CC 4.0 BY-SA版权
文章标签： function colors null div html 编程
本文链接：https://blog.youkuaiyun.com/alpsboy/article/details/3664696
 
 <!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 = (18 * Math.random()) + "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); 
            pp = 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(); 
    } 
}; 
function ToFire(){ 
    for(var i=0;i<parseInt(Math.random()*3)+3;i++){ 
        new Firework(document.body, false).play(); 
    } 
}; 
window.onload=ToFire; 
window.document.onclick= ToFire;</script> 
</head> 
<body> 
用你的鼠标再次点燃烟火吧~（Click To Fire） 
</body> 
</html> 