Current location: Hot Scripts Forums » General Web Coding » JavaScript » Snowing + Konami

Snowing + Konami

Reply
  #1 (permalink)  
Old 11-18-09, 10:39 AM
donald_nqn donald_nqn is offline
Newbie Coder
 
Join Date: Sep 2009
Posts: 9
Thanks: 2
Thanked 0 Times in 0 Posts
Snowing + Konami

Hello everyone, i've been trying to work this out but it seems i can't get it right.
What i want to do is the following, I found the konami code JS somewhere in the web, and it tells you how to activate it and everything. Now what i want to do is, once Konami Code is activated lunch a snowing script that will make some snow storms.

However I can't get it to lunch when the konami code is input, i can make alerts go but it seems i can't make the snow storm go.


Here is the konami code code:
Code:
<script type="text/javascript">
var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65";
$(document).keydown(function(e) {
  kkeys.push( e.keyCode );
  if ( kkeys.toString().indexOf( konami ) >= 0 ){
    $(document).unbind('keydown',arguments.callee);
    // Launch easter egg here    
$.getScript('URL OF THE JS HERE, Removed for privacy reasons', function(){
  SnowStorm()

});  
  }
});

</script>
Now the JavaScript for the SnowStorm is the following, I know it works right, but i can't get it to work togther with the Konami code:

Code:
/*
   DHTML PNG Snowstorm! OO-style Jascript-based Snow effect
   --------------------------------------------------------
   Version 1.3.20081215 (Previous rev: v1.2.20041121a)
   Dependencies: GIF/PNG images (0 through 4.gif/png)
   Code by Scott Schiller - http://schillmania.com
   --------------------------------------------------------
   Description:
  
   Initializes after body onload() by default (via addEventHandler() call at bottom.)
  
   Properties:
  
   usePNG
   ---------------
   Enables PNG images if supported ("false" falls back to GIF)
  
   flakeTypes
   ---------------
   Sets the range of flake images to use (eg. a value of 5
   will use images ranging from 0.png to 4.png.)
  
   flakesMax
   ---------------
   Sets the maximum number of snowflakes that can exist on
   the screen at any given time.
   
   flakesMaxActive
   ---------------
   Sets the limit of "falling" snowflakes (ie. moving, thus
   considered to be "active".)
  
   vMax
   ---------------
   Defines the maximum X and Y velocities for the storm.
   A range up to this value is selected at random.
  
   flakeWidth
   ---------------
   The width (in pixels) of each snowflake image.
  
   flakeHeight
   ---------------
   Height (pixels) of each snowflake image.
   
   flakeBottom
   ---------------
   Limits the "bottom" coordinate of the snow.

   snowStick
   ---------------
   Allows the snow to "stick" to the bottom of the window.
   When off, snow will never sit at the bottom.
  
   snowCollect
   ---------------
   Enables snow to pile up (slowly) at bottom of window.
   Can be very CPU/resource-intensive over time.
   Also requires snowStick = true.

   followMouse
   ---------------
   Allow the mouse to affect the "wind", left-to-right.

*/

var snowStorm = null;

function SnowStorm() {

  // PROPERTIES
  // ------------------

  var imagePath = '/images/snow/'; // relative path to snow images (including trailing slash)
  var flakesMax = 128;
  var flakesMaxActive = 64;
  var vMaxX = 8;
  var vMaxY = 4;
  var usePNG = true;
  var flakeBottom = null;        // Integer for fixed bottom, 0 or null for "full-screen" snow effect
  var snowStick = true;
  var snowCollect = false;
  var targetElement = null;      // element which snow will be appended to (document body if undefined)
  var followMouse = true;
  var flakeTypes = 6;
  var flakeWidth = 5;
  var flakeHeight = 5;

  // ------------------

  var zIndex = 0; // CSS stacking order applied to each snowflake
  var flakeLeftOffset = 0; // amount to subtract from edges of container
  var flakeRightOffset = 0; // amount to subtract from edges of container

  // --- End of user section ---

  var addEvent = function(o,evtName,evtHandler) {
    typeof(attachEvent)=='undefined'?o.addEventListener(evtName,evtHandler,false):o.attachEvent('on'+evtName,evtHandler);
  }

  var removeEvent = function(o,evtName,evtHandler) {
    typeof(attachEvent)=='undefined'?o.removeEventListener(evtName,evtHandler,false):o.detachEvent('on'+evtName,evtHandler);
  }

  var classContains = function(o,cStr) {
    return (typeof(o.className)!='undefined'?o.className.indexOf(cStr)+1:false);
  }

  var s = this;
  var storm = this;
  this.timers = [];
  this.flakes = [];
  this.disabled = false;
  this.terrain = [];
  this.active = false;

  var isIE = navigator.userAgent.match(/msie/i);
  var isIE6 = navigator.userAgent.match(/msie 6/i);
  var isOldIE = (isIE && (isIE6 || navigator.userAgent.match(/msie 5/i)));
  var isWin9X = navigator.appVersion.match(/windows 98/i);
  var isiPhone = navigator.userAgent.match(/iphone/i);
  var isBackCompatIE = (isIE && document.compatMode == 'BackCompat');
  var isOpera = navigator.userAgent.match(/opera/i);
  if (isOpera) isIE = false; // Opera (which may be sneaky, pretending to be IE by default)
  var noFixed = (isBackCompatIE || isIE6 || isiPhone);
  var screenX = null;
  var screenX2 = null;
  var screenY = null;
  var scrollY = null;
  var vRndX = null;
  var vRndY = null;
  var windOffset = 1;
  var windMultiplier = 2;
  var pngSupported = (!isIE || (isIE && !isIE6 && !isOldIE)); // IE <7 doesn't do PNG nicely without crap filters
  var docFrag = document.createDocumentFragment();
  this.oControl = null; // toggle element
  if (flakeLeftOffset == null) flakeLeftOffset = 0;
  if (flakeRightOffset == null) flakeRightOffset = 0;

  function rnd(n,min) {
    if (isNaN(min)) min = 0;
    return (Math.random()*n)+min;
  }

  this.randomizeWind = function() {
    vRndX = plusMinus(rnd(vMaxX,0.2));
    vRndY = rnd(vMaxY,0.2);
    if (this.flakes) {
      for (var i=0; i<this.flakes.length; i++) {
        if (this.flakes[i].active) this.flakes[i].setVelocities();
      }
    }
  }

  function plusMinus(n) {
    return (parseInt(rnd(2))==1?n*-1:n);
  }

  this.scrollHandler = function() {
    // "attach" snowflakes to bottom of window if no absolute bottom value was given
    scrollY = (flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop));
    if (isNaN(scrollY)) scrollY = 0; // Netscape 6 scroll fix
    if (!flakeBottom && s.flakes) {
      for (var i=0; i<s.flakes.length; i++) {
        if (s.flakes[i].active == 0) s.flakes[i].stick();
      }
    }
  }

  this.resizeHandler = function() {
    if (window.innerWidth || window.innerHeight) {
      screenX = window.innerWidth-(!isIE?16:2)-flakeRightOffset;
      screenY = (flakeBottom?flakeBottom:window.innerHeight);
    } else {
      screenX = (document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(!isIE?8:0)-flakeRightOffset;
      screenY = flakeBottom?flakeBottom:(document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight);
    }
    screenX2 = parseInt(screenX/2);
  }

  this.resizeHandlerAlt = function() {
    screenX = targetElement.offsetLeft+targetElement.offsetWidth-flakeRightOffset;
    screenY = flakeBottom?flakeBottom:targetElement.offsetTop+targetElement.offsetHeight;
    screenX2 = parseInt(screenX/2);
  }

  this.freeze = function() {
    // pause animation
    if (!s.disabled) {
      s.disabled = 1;
    } else {
      return false;
    }
    for (var i=0; i<s.timers.length; i++) {
      clearInterval(s.timers[i]);
    }
  }

  this.resume = function() {
    if (s.disabled) {
       s.disabled = 0;
    } else {
      return false;
    }
    s.timerInit();
  }

  this.toggleSnow = function() {
    if (!s.flakes.length) {
      // first run
      s.start();
      s.setControlActive(true);
    } else {
      s.active = !s.active;
      if (s.active) {
        s.show();
        s.resume();
        s.setControlActive(true);
      } else {
        s.stop();
        s.freeze();
        s.setControlActive(false);
      }
    }
  }

  this.stop = function() {
    this.freeze();
    for (var i=this.flakes.length; i--;) {
      this.flakes[i].o.style.display = 'none';
    }
    removeEvent(window,'scroll',s.scrollHandler);
    removeEvent(window,'resize',s.resizeHandler);
    if (!isIE) {
      removeEvent(window,'blur',s.freeze);
      removeEvent(window,'focus',s.resume);
    }
    // removeEventHandler(window,'resize',this.resizeHandler,false);
  }

  this.show = function() {
    for (var i=this.flakes.length; i--;) {
      this.flakes[i].o.style.display = 'block';
    }
  }

  this.SnowFlake = function(parent,type,x,y) {
    var s = this;
    var storm = parent;
    this.type = type;
    this.x = x||parseInt(rnd(screenX-20));
    this.y = (!isNaN(y)?y:-rnd(screenY)-12);
    this.vX = null;
    this.vY = null;
    this.vAmpTypes = [2.0,1.0,1.25,1.0,1.5,1.75]; // "amplification" for vX/vY (based on flake size/type)
    this.vAmp = this.vAmpTypes[this.type];

    this.active = 1;
    this.o = document.createElement('img');
    this.o.style.position = 'absolute';
    this.o.style.width = flakeWidth+'px';
    this.o.style.height = flakeHeight+'px';
    this.o.style.fontSize = '1px'; // so IE keeps proper size
    this.o.style.zIndex = zIndex;
    this.o.src = imagePath+this.type+(pngSupported && usePNG?'.png':'.gif');
    docFrag.appendChild(this.o);

    this.refresh = function() {
      s.o.style.left = s.x+'px';
      s.o.style.top = s.y+'px';
    }

    this.stick = function() {
      if (noFixed || (targetElement != document.documentElement && targetElement != document.body)) {
	s.o.style.top = (screenY+scrollY-flakeHeight-storm.terrain[Math.floor(s.x)])+'px';
      } else {
        s.o.style.display = 'none';
	s.o.style.top = 'auto';
        s.o.style.bottom = '0px';
	s.o.style.position = 'fixed';
        s.o.style.display = 'block';
      }
    }

    this.vCheck = function() {
      if (s.vX>=0 && s.vX<0.2) {
        s.vX = 0.2;
      } else if (s.vX<0 && s.vX>-0.2) {
        s.vX = -0.2;
      }
      if (s.vY>=0 && s.vY<0.2) {
        s.vY = 0.2;
      }
    }

    this.move = function() {
      var vX = s.vX*windOffset;
      s.x += vX;
      s.y += (s.vY*s.vAmp);
      if (vX >= 0 && (s.x >= screenX || screenX-s.x < (flakeWidth+1))) { // X-axis scroll check
        s.x = 0;
      } else if (vX < 0 && s.x-flakeLeftOffset<0-flakeWidth) {
        s.x = screenX-flakeWidth-1; // flakeWidth;
      }
      s.refresh();
      var yDiff = screenY+scrollY-s.y-storm.terrain[Math.floor(s.x)];
      if (yDiff<flakeHeight) {
        s.active = 0;
        if (snowCollect && snowStick) {
          var height = [0.75,1.5,0.75];
          for (var i=0; i<2; i++) {
            storm.terrain[Math.floor(s.x)+i+2] += height[i];
          }
        }
        s.o.style.left = (s.x/screenX*100)+'%'; // set "relative" left (change with resize)
        if (!flakeBottom) {
	  if (snowStick) {
            s.stick();
	  } else {
	    s.recycle();
	  }
        }
      }

    }

    this.animate = function() {
      // main animation loop
      // move, check status, die etc.
      s.move();
    }

    this.setVelocities = function() {
      s.vX = vRndX+rnd(vMaxX*0.12,0.1);
      s.vY = vRndY+rnd(vMaxY*0.12,0.1);
    }

    this.recycle = function() {
      s.o.style.display = 'none';
      s.o.style.position = 'absolute';
      s.o.style.bottom = 'auto';
      s.setVelocities();
      s.vCheck();
      s.x = parseInt(rnd(screenX-flakeWidth-20));
      s.y = parseInt(rnd(screenY)*-1)-flakeHeight;
      s.o.style.left = s.x+'px';
      s.o.style.top = s.y+'px';
      s.o.style.display = 'block';
      s.active = 1;
    }

    this.recycle(); // set up x/y coords etc.
    this.refresh();

  }

  this.snow = function() {
    var active = 0;
    var used = 0;
    var waiting = 0;
    for (var i=s.flakes.length; i--;) {
      if (s.flakes[i].active == 1) {
        s.flakes[i].move();
        active++;
      } else if (s.flakes[i].active == 0) {
        used++;
      } else {
        waiting++;
      }
    }
    if (snowCollect && !waiting) { // !active && !waiting
      // create another batch of snow
      s.createSnow(flakesMaxActive,true);
    }
    if (active<flakesMaxActive) {
      with (s.flakes[parseInt(rnd(s.flakes.length))]) {
        if (!snowCollect && active == 0) {
          recycle();
        } else if (active == -1) {
          active = 1;
        }
      }
    }
  }

  this.mouseMove = function(e) {
    if (!followMouse) return true;
    var x = parseInt(e.clientX);
    if (x<screenX2) {
      windOffset = -windMultiplier+(x/screenX2*windMultiplier);
    } else {
      x -= screenX2;
      windOffset = (x/screenX2)*windMultiplier;
    }
  }

  this.createSnow = function(limit,allowInactive) {
    for (var i=0; i<limit; i++) {
      s.flakes[s.flakes.length] = new s.SnowFlake(s,parseInt(rnd(flakeTypes)));
      if (allowInactive || i>flakesMaxActive) s.flakes[s.flakes.length-1].active = -1;
    }
    targetElement.appendChild(docFrag);
  }

  this.timerInit = function() {
    s.timers = (!isWin9X?[setInterval(s.snow,20)]:[setInterval(s.snow,75),setInterval(s.snow,25)]);
  }

  this.init = function() {
    for (var i=0; i<2048; i++) {
      s.terrain[i] = 0;
    }
    s.randomizeWind();
    s.createSnow(snowCollect?flakesMaxActive:flakesMaxActive*2); // create initial batch
    addEvent(window,'resize',s.resizeHandler);
    addEvent(window,'scroll',s.scrollHandler);
    if (!isIE) {
      addEvent(window,'blur',s.freeze);
      addEvent(window,'focus',s.resume);
    }
    s.resizeHandler();
    s.scrollHandler();
    if (followMouse) {
      addEvent(document,'mousemove',s.mouseMove);
    }
    s.timerInit();
  }

  var didInit = false;

  this.start = function(bFromOnLoad) {
	if (!didInit) {
	  didInit = true;
	} else if (bFromOnLoad) {
	  // already loaded and running
	  return true;
	}
    if (typeof targetElement == 'string') {
      targetElement = document.getElementById(targetElement);
      if (!targetElement) throw new Error('Snowstorm: Unable to get targetElement');
    }
	if (!targetElement) {
	  targetElement = (!isIE?(document.documentElement?document.documentElement:document.body):document.body);
	}
    if (targetElement != document.documentElement && targetElement != document.body) s.resizeHandler = s.resizeHandlerAlt; // re-map handler to get element instead of screen dimensions
    s.resizeHandler(); // get bounding box elements
    if (screenX && screenY && !s.disabled) {
      s.init();
      s.active = true;
    }
  }

  if (document.addEventListener) {
	// safari 3.0.4 doesn't do DOMContentLoaded, maybe others - use a fallback to be safe.
	document.addEventListener('DOMContentLoaded',function(){s.start(true)},false);
    window.addEventListener('load',function(){s.start(true)},false);
  } else {
    addEvent(window,'load',function(){s.start(true)});
  }

}



snowStorm = new SnowStorm();

If anyone could help me, that would be great.
Thank You.
donald_nqn
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #2 (permalink)  
Old 11-18-09, 10:14 PM
wirehopper's Avatar
wirehopper wirehopper is offline
Community Liaison
 
Join Date: Feb 2006
Posts: 2,046
Thanks: 9
Thanked 65 Times in 63 Posts
Are you using a javascript or AJAX library? If so, which one?

If not - what are the $ in the javascript for?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #3 (permalink)  
Old 11-19-09, 08:50 AM
donald_nqn donald_nqn is offline
Newbie Coder
 
Join Date: Sep 2009
Posts: 9
Thanks: 2
Thanked 0 Times in 0 Posts
To be honest, i don't know.
I took the script from here.

Does Your Site have the Konami Code?
Does Your Site Have The Konami Code?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #4 (permalink)  
Old 11-19-09, 03:15 PM
wirehopper's Avatar
wirehopper wirehopper is offline
Community Liaison
 
Join Date: Feb 2006
Posts: 2,046
Thanks: 9
Thanked 65 Times in 63 Posts
It looks like the code from SitePoint is jQuery - so you could add jQuery to your site, or you could Google around until you find a straight javascript version - which is probably your best bet.

Of find a site that has the snow and do view source, or use FireBug to inspect the snow element (may not be possible).
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
  #5 (permalink)  
Old 11-26-09, 08:42 AM
Jcbones Jcbones is offline
Coding Addict
 
Join Date: Mar 2009
Location: North Carolina, USA
Posts: 356
Thanks: 4
Thanked 15 Times in 15 Posts
javascript Code:
  1. // check to make sure that the browser can handle window.addEventListener
  2. if (window.addEventListener) {
  3.     // create the keys and konami variables
  4.     var keys = [],
  5.         konami = "38,38,40,40,37,39,37,39,66,65";
  6.  
  7.     // bind the keydown event to the Konami function
  8.     window.addEventListener("keydown", function(e){
  9.         // push the keycode to the 'keys' array
  10.         keys.push(e.keyCode);
  11.  
  12.         // and check to see if the user has entered the Konami code
  13.         if (keys.toString().indexOf(konami) >= 0) {
  14.             // add Easter Egg here:
  15.  
  16.             // and finally clean up the keys array
  17.             keys = [];
  18.         };
  19.     }, true);
  20. };

Found at:

Matt Kirman / How to recreate the Konami code in Javascript
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Share on FacebookShare on Stumble UponShare on Twitter
Reply With Quote
Reply

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Forum Jump


All times are GMT -5. The time now is 05:56 AM.
vBulletin® Copyright ©2000 - 2010, Jelsoft Enterprises Ltd.