js编写烟花效果

js编写烟花效果

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%;
}

body部分
div id=“container”></div

// OOA
// 1.选中元素,点击事件,记录鼠标位置
// 2.创建主体烟花
// 3.初始化主体烟花
// 4.主体烟花运动

// OOD
// 选中元素,点击事件,记录鼠标位置
// var ocont = document.getElementById(“container”);
// ocont.onclick = function(){
// //记录鼠标位置
// new Fire();
// }
//
// function Fire(){
创建主体烟花
// this.init()
// }
//
// Fire.prototype.init