js面向对象案例--烟花效果

时间 2019-11-21

原文原文链接

分析设计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>