Skip to content

Instantly share code, notes, and snippets.

@jakiestfu
Created October 10, 2017 21:41
Show Gist options
  • Save jakiestfu/6f5b724031fcf61147aaf3385abe6a6a to your computer and use it in GitHub Desktop.
Save jakiestfu/6f5b724031fcf61147aaf3385abe6a6a to your computer and use it in GitHub Desktop.
(function() {
// Shim with setTimeout fallback
window.requestAnimationFrame = function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(f) {
window.setTimeout(f, 1e3 / 60)
}
}();
function num_between(n1, n2) {
return Math.random() * (n2 - n1) + n1;
}
var canvas = $('<canvas class="skrimp-canvas" />').css({
position: 'fixed',
pointerEvents: 'none',
top: 0, right: 0,
bottom: 0, left: 0,
zIndex: 9999999
}).appendTo('body')[0];
var ctx = canvas.getContext('2d');
var W = canvas.width = window.innerWidth;
var H = canvas.height = window.innerHeight;
var gravity = 0.3;
var skrimp_count = 50;
var image = new Image();
image.src = 'http://i.imgur.com/odq0tWh.png';
function Skreeyump(opts) {
this.radius = num_between(10, 30);
this.x = opts.x;
this.y = opts.y;
this.show = true;
this.vx = num_between(-5, 5);
this.vy = num_between(-14, -7) //Math.random() * -14 - 7;
this.draw = function() {
ctx.drawImage(image, this.x, this.y, this.radius, this.radius);
};
}
var skrimps = [];
var isComplete = false;
var skrimper;
function renderSkrimps() {
skrimper = requestAnimationFrame(renderSkrimps);
// Clearing screen to prevent trails
ctx.clearRect(0, 0, W, H);
// Update values
var shownSkrimps = false;
skrimps.forEach(function(skrimp) {
skrimp.vy += gravity;
skrimp.x += skrimp.vx;
skrimp.y += skrimp.vy;
// Reset position/velocity
if (
skrimp.x > W ||
skrimp.x < -(skrimp.radius) ||
skrimp.y > H
) {
skrimp.show = false;
} else {
shownSkrimps = true;
}
if (skrimp.show) skrimp.draw();
});
if (!shownSkrimps) {
//cancelAnimationFrame(skrimper);
}
}
function skrimpBlast(data) {
for (var i = 0; i < skrimp_count; i++) {
var skrimp = new Skreeyump({
x: data.x,
y: data.y
});
skrimps.push(skrimp);
}
}
window.skrimpReady = window.skrimpReady || [];
window.skrimpBlast = skrimpBlast;
renderSkrimps();
var mousedown = false;
$(document)
.on('mousedown', function(e) {
mousedown = true;
skrimpBlast({
x: e.clientX,
y: e.clientY
});
})
.on('mousemove', function(e) {
if (mousedown) {
skrimpBlast({
x: e.clientX,
y: e.clientY
});
}
})
.on('mouseup', function(e) {
mousedown = false;
});
$.each(window.skrimpReady || [], function (i, fn) {
return fn();
});
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment