js面向對象案例--煙花效果

時間  2019-11-21
標籤 面向對象 案例 煙花 效果 欄目 JavaScript 简体版
原文   原文鏈接

分析設計html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#container{
			width: 80%;
			height: 600px;
			border: 2px solid red;
			background: #000;
			margin:20px auto;
			cursor: pointer;
			position: relative;
			left: 0;
			top: 0;
			overflow: hidden;
		}
		.fire{
			width: 10px;
			height:10px;
			position: absolute;
			bottom: 0;
		}
		.small-fire{
			width: 10px;
			height:10px;
			position: absolute;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<div id="container"></div>
</body>
<script>
	// OOA：煙花，點擊出現煙花，運動到某處，炸開小煙花，運動到隨機位置，刪除
		// 1.建立主體煙花，設置樣式，位置
		// 2.開始運動，運動結束
		// 3.刪除主體煙花，建立小煙花
		// 4.當即運動，到終點，刪除小煙花
	// OOD：
	// function Fire(){
	// 	// 。。。
	// 	// 1.建立主體煙花，設置樣式，位置
	// 	this.init()
	// }
	// Fire.prototype.init = function(){
	// 	// 主體煙花，設置樣式，位置
	// 	// 2.開始運動，運動結束
	// 	this.animate()
	// }
	// Fire.prototype.animate = function(){
	// 	// 開始運動。。。
	// 		// 刪除主體煙花
	// 		// 3.建立小煙花
	// 		this.createSmall()
	// }
	// Fire.prototype.createSmall = function(){
	// 	// 建立小煙花,運動，刪掉
	// }

	// OOP:
	function Fire(options){
		this.x = options.x;
		this.y = options.y;
		this.cont = options.parent;

		// 1.建立主體煙花，設置樣式，位置
		this.init()
	}
	Fire.prototype.init = function(){
		// 主體煙花，設置樣式，位置
		this.ele = document.createElement("div");
		this.ele.className = "fire";
		this.ele.style.left = this.x + "px";
		this.ele.style.background = randomColor();
		this.cont.appendChild(this.ele)

		// 2.開始運動，運動結束
		this.animate()
	}
	Fire.prototype.animate = function(){
		// 開始運動。。。
			// 刪除主體煙花
			// 3.建立小煙花
			this.createSmall()
	}
	Fire.prototype.createSmall = function(){
		// 建立小煙花,運動，刪掉
	}


// 範圍隨機數
function random(max,min){
    return Math.round(Math.random()*(max-min)+min);
}

// 隨機顏色
function randomColor(){
    return "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
}


	var ocont = document.getElementById("container");
	ocont.onclick = function(eve){
		var e = eve || window.event;
		new Fire({
			x:e.offsetX,
			y:e.offsetY,
			parent:this
		});
	}

</script>
</html>

　　運動設計-炸開json

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#container{
			width: 80%;
			height: 600px;
			border: 2px solid red;
			background: #000;
			margin:20px auto;
			cursor: pointer;
			position: relative;
			left: 0;
			top: 0;
			overflow: hidden;
		}
		.fire{
			width: 10px;
			height:10px;
			position: absolute;
			bottom: 0;
		}
		.small-fire{
			width: 10px;
			height:10px;
			position: absolute;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<div id="container"></div>
</body>
<script src="../move.js"></script>
<script>

	function Fire(options){
		this.x = options.x;
		this.y = options.y;
		this.cont = options.parent;

		// 1.建立主體煙花，設置樣式，位置
		this.init()
	}
	Fire.prototype.init = function(){
		// 主體煙花，設置樣式，位置
		this.ele = document.createElement("div");
		this.ele.className = "fire";
		this.ele.style.left = this.x + "px";
		this.ele.style.background = randomColor();
		this.cont.appendChild(this.ele)

		// 2.開始運動，運動結束
		this.animate()
	}
	Fire.prototype.animate = function(){
		// 開始運動。。。
		move(this.ele,{
			top:this.y
		},function(){
			// 刪除主體煙花
			this.ele.remove()
			// 3.建立小煙花
			this.createSmall()
		}.bind(this))
	}
	Fire.prototype.createSmall = function(){
		// 建立小煙花,運動，刪掉
		var num = random(10,20);
		console.log(num)
		for(var i=0;i<num;i++){
			let div = document.createElement("div");
			div.className = "small-fire";
			div.style.background = randomColor();
			div.style.left = this.x + "px";
			div.style.top = this.y + "px";
			div.setAttribute("i",i);
			this.cont.appendChild(div);

			// 產生隨機座標
			var l = random(0,this.cont.offsetWidth-div.offsetWidth);
			var t = random(0,this.cont.offsetHeight-div.offsetHeight);

			// 在move的回調函數中，找不到每一個div：
			// 緣由：異步：for循環當即執行，回到函數等待執行，回調函數執行時，循環已經結束多時，div已經被重複覆蓋
			// 解決方案：
				// 1.提早定義數組保存，結束時根據數組刪除
				// 2.使用bind將div強行傳進去
				// 3.使用匿名函數生成新的做用域，保存div：***
				// 4.利用let觸發塊級做用域，保存div：√
			move(div,{
				left:l,
				top:t
			},function(){
				div.remove()
			})
			
		}
	}



	// for(){
	// 	ali[i] = i
	// 	ali[i].onclick = function(){
	// 		this
	// 	}
	// }



// 範圍隨機數
function random(max,min){
    return Math.round(Math.random()*(max-min)+min);
}

// 隨機顏色
function randomColor(){
    return "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
}


	var ocont = document.getElementById("container");
	ocont.onclick = function(eve){
		var e = eve || window.event;
		new Fire({
			x:e.offsetX,
			y:e.offsetY,
			parent:this
		});
	}

</script>
</html>

　　最終代碼數組

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #container {
            width: 80%;
            height: 600px;
            border: 2px solid red;
            background: #000;
            margin: 20px auto;
            cursor: pointer;
            position: relative;
            left: 0;
            top: 0;
            overflow: hidden;
        }
        
        .fire {
            width: 10px;
            height: 10px;
            position: absolute;
            bottom: 0;
        }
        
        .small-fire {
            width: 10px;
            height: 10px;
            position: absolute;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div id="container"></div>
</body>

<script>
    function Fire(options) {
        this.x = options.x;
        this.y = options.y;
        this.cont = options.parent;

        // 1.建立主體煙花，設置樣式，位置
        this.init()
    }
    Fire.prototype.init = function() {
        // 主體煙花，設置樣式，位置
        this.ele = document.createElement("div");
        this.ele.className = "fire";
        this.ele.style.left = this.x + "px";
        this.ele.style.background = randomColor();
        this.cont.appendChild(this.ele)

        // 2.開始運動，運動結束
        this.animate()
    }
    Fire.prototype.animate = function() {
        // 開始運動。。。
        move(this.ele, {
            top: this.y
        }, function() {
            // 刪除主體煙花
            this.ele.remove()
                // 3.建立小煙花
            this.createSmall()
        }.bind(this))
    }
    Fire.prototype.createSmall = function() {
        // 建立小煙花,運動，刪掉
        var num = random(10, 20);

        // 1.隨機的半徑
        var r = random(100, 200);
        console.log(num)
        for (var i = 0; i < num; i++) {
            let div = document.createElement("div");
            div.className = "small-fire";
            div.style.background = randomColor();
            div.style.left = this.x + "px";
            div.style.top = this.y + "px";
            div.setAttribute("i", i);
            this.cont.appendChild(div);

            // 2.利用三角函數，計算出一個圓上面平均分佈的點的座標
            // 注意三角函數的方法接收的是弧度：別忘記角度轉弧度
            var l = parseInt(Math.cos(Math.PI / 180 * (360 / num * i)) * r) + this.x;
            var t = parseInt(Math.sin(Math.PI / 180 * (360 / num * i)) * r) + this.y;

            move(div, {
                left: l,
                top: t
            }, function() {
                div.remove()
            })

        }
    }



    // for(){
    // 	ali[i] = i
    // 	ali[i].onclick = function(){
    // 		this
    // 	}
    // }



    // 範圍隨機數
    function random(max, min) {
        return Math.round(Math.random() * (max - min) + min);
    }

    // 隨機顏色
    function randomColor() {
        return "rgb(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ")";
    }


    var ocont = document.getElementById("container");
    ocont.onclick = function(eve) {
        var e = eve || window.event;
        new Fire({
            x: e.offsetX,
            y: e.offsetY,
            parent: this
        });
    }

    function move(ele, json, callback) {
        clearInterval(ele.t);
        ele.t = setInterval(() => {
            var onoff = true;
            for (var i in json) {
                var iNow = parseInt(getStyle(ele, i));
                var speed = (json[i] - iNow) / 6;
                speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
                if (iNow != json[i]) {
                    onoff = false;
                }
                ele.style[i] = iNow + speed + "px";
            }
            if (onoff) {
                clearInterval(ele.t);
                callback && callback();
            }
        }, 30);
    }

    function getStyle(ele, attr) {
        if (ele.currentStyle) {
            return ele.currentStyle[attr];
        } else {
            return getComputedStyle(ele, false)[attr];
        }
    }
</script>

</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程