Permalink
Browse files

Initial commit for fire

  • Loading branch information...
0 parents commit 6ea545bbfcecf03e5174f308e02c3eba69254704 @AndrewRayCode committed Sep 17, 2012
No changes.
@@ -0,0 +1,25 @@
+body {
+ margin:0;
+ padding:0;
+ font-family:Arial, sans-serif;
+ font-size:11pt;
+ height:1640px;
+ border-bottom:5px solid #FF8544;
+ background:#0F1B1C;
+}
+
+.thing {
+ padding:10px 30px 30px;
+ overflow:hidden;
+ position:relative;
+ margin:20px;
+ height:190px;
+ width:400px;
+ opacity:1;
+ background:#fff;
+}
+h1 {
+ color:#FF8548;
+ font-size:30pt;
+ font-weight:bold;
+}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,23 @@
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+ <title>Kill it with fire!</title>
+ <link rel="stylesheet" type="text/css" href="css/fire.css">
+ </head>
+ <body>
+ <div class="thing">
+ <h1>Hi! How are all the things?</h1>
+ <br />I won't be around for long!
+ <br />It was nice knowing you!
+ </div>
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script>
+ <script type="text/javascript" src="js/fire.js"></script>
+ <script>
+ $(function() {
+ var $thing = $('.thing').killWithFire(function() {
+ console.log('done!');
+ });
+ });
+ </script>
+ </body>
+</html>
@@ -0,0 +1,132 @@
+(function() {
+
+var sp = 'images/',
+ animations = [],
+ MOTION = {'Normal':1, 'Smooth':2}, // AS3 like motion types. Used for tweening
+ INTERVAL = {'Tween':10, 'Animation':20};// Intervals in milliseconds for setTimeout calls. Defaults are Tween:10, Animation:1
+
+$.fn.killWithFire = function(callback) {
+ var elem = this.get(0), me = this;
+ this.css('overflow', 'hidden');
+ var offset = {
+ y: parseInt(elem.offsetTop, 10),
+ x: parseInt(elem.offsetLeft, 10)
+ };
+ var height = parseInt(elem.clientHeight, 10);
+ var steps = Math.round(parseInt(elem.clientWidth, 10) / 50);
+
+ // Steps are how many explosion "lines" there are. Creates new line from right to left every 500 ms.
+ for(var x=steps; x > 0; x--) {
+ setTimeout((function(i){ return function(){
+ explosion(((i*50)+offset.x)-128, offset.y+(height/2)-20, elem);
+ }}(x)) , 450*(Math.abs(x-steps)));
+ }
+
+ setTimeout(function() {
+ me.fadeOut().promise().then(function() {
+ me.remove();
+ if(callback) {
+ callback();
+ }
+ });
+ }, 450 * steps);
+
+ return this;
+};
+
+// Create an explosion at point x,y. Generations are how many "tails" the explosion creates before dying out completely. Each explosion has 2 tails in
+// the next generation, so it's exponential. Default generations is 3 ... 5 lags pretty badly ... 10 almost crashed my computer, but it was nice to look at.
+function explosion(x, y, parent, generations) {
+ var offset = {
+ x: parseInt(parent.offsetLeft, 10),
+ y: parseInt(parent.offsetTop, 10)
+ };
+ var circle = $('<div></div>')
+ .appendTo(parent)
+ .css({'background':'transparent url('+sp+'circle_eat.png) top left no-repeat', 'position':'absolute',
+ 'top':(y - offset.y - 36)+'px', 'left':(x - offset.x - 36)+'px', 'width':'200px', 'height':'200px'});
+ var ap = false;
+ if(generations === undefined) {generations = 2;} // THE FASTER YOUR COMPUTER, THE HIGHER THIS CAN BE
+ if(generations == 1) {
+ // Make the second to last explosion the smaller one. Looks nice that way for some reason
+ animations.push(new SpriteAnimation(ap ? sp+'checkers.png' : sp+'explosion_sprite_4.png', 64, 64, 256, 256, x, y, document.body));
+ } else {
+ animations.push(new SpriteAnimation(ap ? sp+'checkers.png' : sp+'explosion_sprite_'+randInt(1,3)+'.png', 128, 128, 512, 512, x, y, document.body));
+ }
+ if(animations.length == 1) { animationLoop(); }
+ if(generations > 0) {
+ setTimeout(function () {
+ explosion(x, (y+20)-randInt(0,80), parent, generations-1); // top
+ }, randInt(100, 220));
+ setTimeout(function () {
+ explosion((x-45)+randInt(0,90), (y+50)-randInt(0,100), parent, generations-1); // bottom right
+ }, randInt(30, 90));
+ }
+}
+
+
+// This implementation of sprite based animation uses the time tested method of a spritesheet that is cut
+// into each frame in a grid image. See the containing folder for example images. This creates a div that will
+// show one frame, sticks it in a parent, and launches "callback" on animation finish
+function SpriteAnimation(sourceImage, width, height, sprite_width, sprite_height, x, y, parent, callback) {
+ this.bg_x = 0; this.bg_y = 0;
+ this.sprite_width = sprite_width;
+ this.sprite_height = sprite_height;
+ this.width = width;
+ this.height = height;
+ this.animation = $('<div></div>')
+ .appendTo(parent)
+ .css({'position':'absolute', 'background':'transparent url('+sourceImage+') top left no-repeat scroll',
+ 'height':height+'px', 'width':width+'px', 'top':y+'px', 'left':x+'px', 'z-index':'9999'})
+
+ // Remove the animation from the stack
+ this.destroy = function() {
+ animations.remove(this);
+ this.animation.remove();
+ if(callback) {
+ callback();
+ }
+ }
+ return this;
+}
+
+// Where the animation magic happens. Basically shifts the background position of a SpriteAnimation every 20 ms
+function animationLoop() {
+ for(var i=0; i<animations.length; i++) {
+ animations[i].bg_x++;
+ if(animations[i].bg_x * animations[i].width == animations[i].sprite_width) {
+ animations[i].bg_x = 0;
+ animations[i].bg_y++;
+ }
+ if(animations[i].bg_y * animations[i].height > animations[i].sprite_height) {
+ animations[i].destroy();
+ break;
+ } else {
+ animations[i].animation.css('background-position', (-(animations[i].bg_x * animations[i].width))+'px '+(-(animations[i].bg_y * animations[i].height))+'px');
+ }
+ }
+ if(animations.length > 0) {
+ setTimeout(animationLoop,INTERVAL.Animation);
+ }
+}
+
+// Generate a random integer with bounds
+function randInt(min, max) {
+ if (!arguments.length) {
+ min = 0; max = 100;
+ }
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+// Remove a specific element from an array
+Array.prototype.remove = function(item) {
+ for(var x=0; x<this.length; x++) {
+ if(this[x] == item) {
+ this.splice(x, 1);
+ return item;
+ }
+ }
+ return false;
+}
+
+}());

0 comments on commit 6ea545b

Please sign in to comment.