【编程游戏】贺岁放礼花。（点燃78楼lsc1202001的焰火）

最新推荐文章于 2019-08-11 13:08:29 发布

王集鹄

最新推荐文章于 2019-08-11 13:08:29 发布

阅读量4.5k

点赞数

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

本文链接：https://blog.csdn.net/zswang/article/details/3616924

版权

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

39 篇文章 0 订阅

订阅专栏

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

<!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" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>【编程游戏】贺岁放礼花。</title>
<style>
   div.fire{
       position:absolute;
       font-size:6px;
       width:6px;
       height:6px;
   }
   span{
       position:absolute;
       font-size:0px;
       width:1px;
       height:1px;
   }
</style>
</head>
<body style="margin:0px;">
<div id="container" style="background:#000;width:900px;height:700px;"></div>
<script type="text/javascript">
    var imgChar = "●";
    var fireColor = ["red", "orange", "yellow", "pink", "cyan"];
    var container = document.getElementById("container");

var FireMain = function(){
        var self = this;
        this.inUse = false;
        this.timer;
        this.left;
        this.top;
        this.speed;
        
        this.color;
        this.fireDiv = document.createElement("div");
        this.fireSpan = [];
        this.riseCount = 0;
        this.blastCount = 0;
        this.blastRadius = 2;
        this.blastTotal = 40;
        this.blastLength = 6;

for(var i=0; i<16; i++){
            this.fireSpan[i] = [];
            for(var j=0; j<this.blastLength; j++){
                this.fireSpan[i][j] = document.createElement("span");
            }
        }
        
        this.init = function(left, top, speed, color){
            this.left = left;
            this.top = top;
            this.speed = speed;
            this.color = color;
            this.riseCount = 0;
            this.blastCount = 0;
        }

this.start = function(){
            this.fireDiv.className = "fire";
            this.fireDiv.innerHTML = imgChar;
            this.fireDiv.style.left = this.left + "px";
            this.fireDiv.style.top = this.top + "px";
            this.fireDiv.style.color = this.color;
            container.appendChild(this.fireDiv);

this.timer = window.setInterval(
                function(){ 
                    self.rise(); 
                }
            , 20);
        }

this.rise = function(){
            this.riseCount++;
            if(this.riseCount % 10 == 0){
                this.speed--;
            }

this.top -= this.speed;
            this.fireDiv.style.top = this.top + "px";

if(this.speed <= 1){
                window.clearInterval(this.timer);
                container.removeChild(this.fireDiv);
                this.fire();
            }
        }

this.fire = function(){
            for(var i=0; i<16; i++){
                for(var j=0; j<this.blastLength; j++){
                    this.fireSpan[i][j].style.background = this.color;
                    this.fireSpan[i][j].style.left = this.left + 3 + "px";
                    this.fireSpan[i][j].style.top = this.top + 3 + "px";
                    if(this.fireSpan[i][j].parentNode == container){
                        this.fireSpan[i][j].style.display = "";
                    }else{
                        container.appendChild(this.fireSpan[i][j]);
                    }
                }
            }

this.timer = window.setInterval(
                function(){ 
                    self.blast(); 
                }
            , 20);
        }

this.blast = function(){
            this.blastCount++;
            for(var i=0; i<16; i++){
                var sin = Math.abs(Math.sin(i * Math.PI / 8));
                var cos = Math.abs(Math.cos(i * Math.PI / 8));
                var xP = (i<=4 || i>=12)?1:-1;
                var yP = i<=8?-1:1;
                
                this.fireSpan[i][this.blastCount%this.blastLength].style.left = this.left + 3 + xP * this.blastCount * this.blastRadius * cos + "px";
                this.fireSpan[i][this.blastCount%this.blastLength].style.top = this.top + 3 + yP * this.blastCount * this.blastRadius * sin + this.blastCount/3 + "px";
            }

if(this.blastCount >= this.blastTotal){
                window.clearInterval(this.timer);
                for(var i=0; i<16; i++){
                    for(var j=0; j<this.blastLength; j++){
                        this.fireSpan[i][j].style.display = "none";
                    }
                }
                this.inUse = false;
            }
        }
    }

var FireControl = function(interval, poolSize){
        var self = this;
        this.timer;
        this.interval;
        this.firePool = [];
        for(var i=0; i<poolSize; i++){
            this.firePool[i] = new FireMain();
        }

this.fire = function(){
            var left = 150 + Math.floor(Math.random()*600);
            var top = 700 - 12;
            var speed = 8 + Math.floor(Math.random()*3);
            var color = fireColor[Math.floor(Math.random() * fireColor.length)];
            
            var fireMain = this.instance();
            fireMain.inUse = true;
            fireMain.init(left, top, speed, color);
            fireMain.start();
        }
        
        this.instance = function(){
            for(var i=0; i<this.firePool.length; i++){
                if(!this.firePool[i].inUse){
                    return this.firePool[i];
                }
                if(i == this.firePool.length - 1){
                    this.firePool.push(new FireMain());
                    return this.firePool[i + 1];
                }
            }
        }
        
        this.start = function(){
            this.fire();
            this.timer = window.setInterval(
                function(){ 
                    self.fire(); 
                }
            , interval);
        }
    }

var freq = document.all?600:2500;
        var fireControl = new FireControl(freq, 1);
    fireControl.start();
</script>
</body>
</html>

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

王集鹄

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
32
评论
【编程游戏】贺岁放礼花。（点燃78楼lsc1202001的焰火）

function viewPage(html) { var page = window.open(, , ); page.opener = null; page.document.write(html); page.document.close();}【编程游戏】贺岁放礼花。（第一名奖励10000可用分）作者：点燃 [Ctrl+
复制链接

扫一扫