Originally developed for PhotoFlare (http://gecphotoflare.org). For a demo, Will soon be in action on visit http://lifeofnavin.blogspot.com.
USAGE: Just update your HTML/CSS with the needed elements. And add the JS for the listener. Works like a charm! :)
| <!doctype html> | |
| <html> | |
| <!-- Initially make the nyancat div and the audio div invisible --> | |
| <style type='text/css'> | |
| div.kc{ | |
| position:fixed; | |
| display:none; | |
| top:20%; | |
| left:35%; | |
| z-index:9999; | |
| padding:3px 0 0; | |
| } | |
| div.dirtylittlesecret{ | |
| position:fixed; | |
| display:none; | |
| } | |
| </style> | |
| <!-- The JS listener --> | |
| <script charset='utf-8' src='konaminyan.js' type='text/javascript'></script> | |
| </head> | |
| <body onLoad='setupStuff();'> | |
| <!-- setupStuff() activates the listener --> | |
| <!-- The 2 divs in my body... both activated by the Konami code! :) --> | |
| <div class='dirtylittlesecret' id='dirtylittlesecret'></div> | |
| <div class='kc' id='kc'> | |
| <img src='http://dl.dropbox.com/u/19335735/kc.gif'/></div> | |
| </body> | |
| </html> |
| //Long story short: Create a listener that listens for the Konami code, | |
| //then make the element 'dirtylittlesecret' visible and replace the invisible 'dirtylittlesecret' div with | |
| // the music player that plays the song | |
| var isInternetExplorer = navigator.appName.indexOf("Microsoft") != -1; | |
| var bShowing=false; | |
| function showKonami() { | |
| if(bShowing) return; | |
| setTimeout(function() {alert('Haha... You found Nyan! :)');toggleVisibility();},500); | |
| ReplaceContentInContainer('dirtylittlesecret','<audio controls="controls" loop="loop" autoplay="autoplay"><source src="https://www.nyan.cat/music/original.mp3" type="audio/mpeg" /></audio>'); | |
| bShowing=true; | |
| } | |
| var kkeys = []; | |
| var konamiString = "38,38,40,40,37,39,37,39,66,65"; | |
| // up, up, down, down, left, right, left, right, B, A | |
| function setupStuff() { | |
| if (window.addEventListener) { | |
| //alert("firefox"); | |
| window.addEventListener('keydown', function(e) { | |
| kkeys.push(e.keyCode ); | |
| if (kkeys.toString().indexOf(konamiString) >= 0 ) | |
| showKonami(); | |
| }, true) | |
| } | |
| else if(document.body.attachEvent) { | |
| //alert("ie detected"); | |
| document.body.attachEvent('onkeydown', function(e){ | |
| kkeys.push(e.keyCode); | |
| if (kkeys.toString().indexOf(konamiString) >= 0) | |
| showKonami(); | |
| }, true) | |
| } | |
| } | |
| function toggleVisibility() { | |
| document.getElementById("kc").style.display = "block"; | |
| } | |
| function ReplaceContentInContainer(id,content) { | |
| var container = document.getElementById(id); | |
| container.innerHTML = content; | |
| } |