简易版烟花
Posted wss521
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简易版烟花相关的知识，希望对你有一定的参考价值。
构造函数的最大特点是什么？就是多次new可以创建不同对象
但是烟花，可能会存在多个，每个烟花都是独立的对象，需要在点击的一瞬间被创建
因为，点击时才创建对象，所以点击事件之前的过程不属于面向对象的过程
提前处理好：
选择元素，绑定事件，触发事件时，执行面向对象的启动（new）
***需要用到上一次封装的运动函数
OOA:烟花：点击页面，出现运动的元素到达目的之后，炸开到随机的位置
1.创建主题烟花的元素，设置初始位置，颜色，等信息，插入页面
2.开始运动到鼠标点击的位置
3.到目标之后，删除，然后，创建一堆小烟花，设置位置，颜色，等信息，插入页面
4.小烟花开始运动，运动到随机位置
5.结束之后删除
OOD:
function Fire(){
// 1.执行创建主题烟花的功能
this.init()
}
Fire.prototype.init = function(){
// 定义创建烟花的功能
// 2.执行运动功能
this.move()
}
Fire.prototype.move = function(){
// 定义运动功能
// 3.删除主体烟花，执行创建小烟花的功能
this.smallFire()
}
Fire.prototype.smallFire = function(){
// 定义创建小烟花的功能
// 4.执行小烟花开始运动的功能
this.smallMove()
}
Fire.prototype.smallMove = function(){
// 小烟花开始运动
// 5.结束后，删除所有小烟花
}
整体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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>
var ocont = document.querySelector("#container");
ocont.onclick = function(eve){
var e = eve || window.event;
new Fire({
cont:ocont,
x:e.offsetX,
y:e.offsetY
});
}
function Fire(options){
this.cont = options.cont;
this.x = options.x;
this.y = options.y;
// 1.执行创建主题烟花的功能
this.init()
}
Fire.prototype.init = function(){
// 定义创建烟花的功能
this.f = document.createElement("div");
this.f.className = "fire";
this.cont.appendChild(this.f);
this.f.style.background = randomColor();
this.f.style.left = this.x + "px";
// 2.执行运动功能
this.move();
}
Fire.prototype.move = function(){
// 定义运动功能
move(this.f,{top:this.y},()=>{
// 3.删除主体烟花
this.f.remove();
// 执行创建小烟花的功能
this.smallFire()
})
}
Fire.prototype.smallFire = function(){
var that = this;
// 定义创建小烟花的功能
var num = random(10,20);
var r = random(100,200);
console.log(num);
for(var i=0;i<num;i++){
let s = document.createElement("div");
s.className = "small-fire";
s.style.left = this.x + "px";
s.style.top = this.y + "px";
s.style.background = randomColor();
this.cont.appendChild(s);
s.setAttribute("index",i);
// 计算运动成一个圆的目标值
var target = {
x:parseInt(Math.sin( Math.PI/180 * (360/num*i) ) * r) + this.x,
y:parseInt(Math.cos( Math.PI/180 * (360/num*i) ) * r) + this.y
}
move(s,{
left:target.x,
top:target.y
},function(){
s.remove();
})
}
}
function random(a,b){
return Math.round(Math.random()*(a-b)+b);
}
function randomColor(){
return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
}
function move(ele,data,end){
clearInterval(ele.t);
ele.t = setInterval(() => {
var onoff = true;
for(var i in data){
var iNow = parseInt(getStyle(ele,i));
var speed = (data[i] - iNow)/7;
speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
(data[i] != iNow) && (onoff = false);
ele.style[i] = iNow + speed + "px";
}
if(onoff){
clearInterval(ele.t);
end && end();
}
}, 30);
}
function getStyle(ele,attr){
if(getComputedStyle){
return getComputedStyle(ele,false)[attr];
}else{
return ele.currentStyle[attr];
}
}
</script>
</html>
以上是关于简易版烟花的主要内容，如果未能解决你的问题，请参考以下文章