JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>‾‾\/‾‾</title>
<link rel="stylesheet" media="screen" href="http://www.jsvine.com/txtbirds/txtbirds.css"/>
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA1BMVEV/y+Bw0/5KAAAADElEQVQImWNgIA0AAAAwAAFDlLdnAAAAAElFTkSuQmCC" />
<!-- flock here: https://github.com/jsvine/txtbirds -->
</head>
<body><div style="position:absolute;z-index: 1000;">Score: <span id="score">0</span></div>
<div id="gyre"></div>
</body>
</html>
CSS
.falcon{
cursor:pointer;
}
JavaScript
(function () {
var root = this;
var g = root.document.getElementById("gyre");
var Falcon = function (gyre) {
this.flaps = [ '------', '/‾\\/‾\\', '‾‾\\/‾‾' ];
this.flap_i = 0;
this.flap_rate = 230;
this.veer_rate = 500;
this.veer_coefficient_vertical = 75;
this.veer_coefficient_horizontal = 50;
this.lifespan = 15 * 1000;
this.timers = [];
this.gyre = gyre;
};
Falcon.prototype = {
hatch: function () {
var _this = this;
this.el = root.document.createElement("span");
this.el.className = "falcon";
[ "top", "left" ].forEach(function (s) {
_this.el.style[s] = (50 + (root.Math.random() < 0.5 ? -1 : 1) * root.Math.random() * 80) + "%";
});
this.gyre.appendChild(this.el);
return this;
},
flap: function () {
this.el.innerHTML = this.flaps[this.flap_i++ % this.flaps.length];
},
veer: function () {
this.el.style.marginTop = root.Math.random() * this.veer_coefficient_vertical / root.Math.log(this.flap_i + 1) + "px";
this.el.style.marginLeft = root.Math.random() * this.veer_coefficient_horizontal / root.Math.log(this.flap_i + 1) + "px";
},
fly: function () {
var _this = this;
root.setTimeout(function () { _this.el.className += " flying"; }, 10);
this.timers.push(root.setInterval(function () { _this.flap.call(_this); }, this.flap_rate));
this.timers.push(root.setInterval(function () { _this.veer.call(_this); }, this.veer_rate));
root.setTimeout(function () { _this.vanish.call(_this); }, this.lifespan);
return this;
},
vanish: function () {
this.timers.forEach(function (t) { root.clearInterval(t); });
this.gyre.removeChild(this.el);
return this;
}
};
var...