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

王集鹄

于 2008-12-31 17:17:00 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：【编程游戏】贺岁放礼花。文章标签：编程游戏 colors function html div

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

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

【编程游戏】贺岁放礼花。专栏收录该内容

39 篇文章

订阅专栏

一款使用HTML、CSS和JavaScript编写的交互式烟花效果编程游戏，玩家可通过修改代码来调整烟花绽放的效果。

【编程游戏】贺岁放礼花。（第一名奖励10000可用分）
作者：

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

<!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=gb2312" />
<title>老韩 - 烟花</title>
<style>
    html{height:100%; overflow:hidden}
    body{background:black; height:100%}
    /*
    .top{border-top-color:red}
    .right{border-right-color:red}
    .bottom{border-bottom-color:red}
    .left{border-left-color:red}
    
    div.par div{border:3px solid white; position:absolute; overflow:hidden; width:0; height:0; left:50%; top:50%}
    */
    div.par div { position:absolute; overflow:hidden; font-size:6px; color:red}
    div.par {height:20px; width:20px; position:absolute; width:400px; height:400px}
    .pointer{position:absolute; overflow:hidden; width:3px; height:10px; background:red}
</style>

<script type="text/javascript">
    Function.prototype.bind=function(){
        var o = this, ars = Array.prototype.slice.call(arguments), obj = ars.shift();
        return function(){
            o.apply(obj, ars);
        }
    }
    var Browser ={
        IE:     !!(window.attachEvent && !window.opera)
    }
    Object.extend = function(destination, source) {
      for (var property in source)
        destination[property] = source[property];
      return destination;
    }
    var Element = {
        setOpacity: function(val){
            if(Browser.IE){
                this.style.filter = 'alpha(opacity='+val+')';
            }else{
                this.style.opacity = parseFloat(val/100);
            }
        }
    }
    
    var colors = ['yellow', '#0f9','#FFFF85', 'red'];
    var xx = document.documentElement.scrollWidth-150, yy = document.documentElement.scrollHeight;
    function get_yh(x,y){
        //if(arguments.callee.yh) return arguments.callee.yh.cloneNode(true);
        //var colors = ['left','right', 'top', 'bottom'];
        var m = document.createElement('div');
            m.className = 'par';
            m.cs = [];
            d = document.createElement('div');
        for(var i=0; i<60; i++){
            var c = d.cloneNode(true);
                c.r = Math.floor(Math.random()*50-35);
                c.innerHTML = '●';
                c.style.color = colors[Math.floor(Math.random()*4)];
            m.cs.push(c);
            m.appendChild(c);
        }

m.play = function(x,y){
            this.style.left = x - this.offsetWidth/2+'px';
            this.style.top = y - this.offsetHeight/2 +'px';
            this.x = this.offsetWidth/2;
            this.y = this.offsetHeight/2 + 120;
            this.len = 120;
            this.r = 0;
            this.t = setInterval(play.bind(this),15);
        }
        Object.extend(m, Element);
        document.body.appendChild(m);
        m.play(x,y);
        //arguments.callee.yh = m;
        //return m;
    }

function play(){
            if(this.len<0){
                clearInterval(this.t);
                document.body.removeChild(this);
                get_point();
            }
            this.r+=(120-this.r)*0.11;
            var arr = this.cs, angel = 6;
            for(var i=0; i<arr.length; i++){
                arr[i].style.color = colors[Math.floor(Math.random()*4)];
                arr[i].style.left = this.x - parseInt((arr[i].r+this.r)*Math.sin(angel*i*2*Math.PI/360))+ 'px';
                arr[i].style.top = this.y - parseInt((arr[i].r+this.r)*Math.cos(angel*i*2*Math.PI/360)) - this.len+ 'px';
            }
            this.len--;
            this.setOpacity(this.len);
        }

function get_point(){
            
            var d = document.createElement('div');
                d.className = 'pointer';
                d.style.top = yy+'px';
                d.style.left= Math.floor(Math.random()*xx)+70+'px';
                document.body.appendChild(d);
                d.top = d.offsetTop;
                d.topend = yy/2-Math.floor(Math.random()*500);
                            
                d.play = function(){
                    this.t=setInterval(ps.bind(this), 15);
                }
                d.h = 100;
                d.play();
        }
        
        function ps(){
            this.h--;
            this.style.height = this.h/10+'px';
            this.top -= (this.offsetTop-this.topend)*0.05;
            this.style.top = this.top + 'px';
            this.style.background = colors[Math.floor(Math.random()*4)];
            if(this.offsetTop<(this.topend+70)){
                clearInterval(this.t);
                get_yh(this.offsetLeft, this.offsetTop);
                document.body.removeChild(this);
            }
        }

onload = function(){
        get_point();
        setTimeout(get_point, 2000);
        setTimeout(get_point, 5000);
        setTimeout(get_point, 7000);
        setTimeout(get_point, 10000);

var zf = document.getElementById('zf');
        setInterval(function(){
            zf.style.borderColor=colors[Math.floor(Math.random()*3)];
        },1000);
    }
</script>
</head>
<body>
<div id="zf" style="position:absolute; z-index:999; border:2px solid #666; height:68px; width:300px; left:50%; top:50%; margin-left:-150px; margin-top:-100px; text-align:center; font-size:27px; line-height:68px; font-weight:bold; color:red">
新年快乐! 万事如意!
</div>
</body>
</html>

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

评论 2

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。