<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {
width: 1200px;
height: 700px;
background-color: #000000;
border: 3px solid purple;
margin: 200px auto;
position: relative;
}
.fire {
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
left: 0;
bottom: 0;
}
.smallfire {
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
<script src="move.js">
</script>
<script type="text/javascript">
function Fire(obj) {
this.x = obj.x;
this.y = obj.y;
this.obox = parent.obox;
this.init();
}
Fire.prototype.init = function() {
this.ele = document.createElement("div");
this.ele.className = "fire";
this.ele.style.backgroundColor = randomcolor();
this.ele.style.left = this.x + "px";
this.obox.appendChild(this.ele);
this.animit();
}
Fire.prototype.animit = function() {
move(this.ele, {
top: this.y
}, function() {
this.ele.remove();
this.ceratesmall();
}.bind(this))
}
Fire.prototype.ceratesmall = function() {
var num = random(15, 25)
for(i = 0; i < num; i++) {
let div = document.createElement("div");
div.className = "smallfire";
div.style.left = this.x + "px";
div.style.top = this.y + "px";
div.style.backgroundColor = randomcolor();
this.obox.appendChild(div);
var l = random(0, this.obox.offsetWidth)
var t = random(0, this.obox.offsetHeight)
move(div, {
left: l,
top: t
}, function() {
div.remove()
})
}
}
function randomcolor() {
return "rgb(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ")";
}
function random(a, b) {
return Math.round(Math.random() * (a - b) + b);
}
function getStyle(ele, attr) {
if(ele.currentStyle) {
return ele.currentStyle[attr];
} else {
return getComputedStyle(ele, false)[attr];
}
}
var obox = document.querySelector("#box");
obox.onclick = function(eve) {
var e = eve || window.event;
// console.log(e.offsetX)
new Fire({
x: e.offsetX,
y: e.offsetY,
parent: obox,
})
}
</script>
</html>
