Question

Any JavaScript pros out there? I’ve got a div that I’ve managed to fade in after entering the konami code, and a button that you can click to fade out the div, but I have to refresh in order to re-enter the konami code. I want to be able to continually enter in the konami code without having to refresh the page. Ideally, I’d like to remove the button, but I can’t seem to get things to work just using if statements.

Here’s what I have so far:

<script
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" 
  type="text/javascript"></script>

<script type= "text/javascript">
var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65,13";
$(document).keydown(function(e) {
  kkeys.push( e.keyCode );
  if ( kkeys.toString().indexOf( konami ) >= 0 )
  {
    $(document).unbind('keydown',arguments.callee);
    $(document).ready(function()
    {
      $(".konami").fadeIn(1000);
    });
  }
});

</script>
<script type="text/javascript">

$(document).ready(function(){

  $(".btn1").click(function(){

  $(".konami2").fadeOut(1000);

  });
});
</script>

<div class ="konami" style="display: none">
<p class ="konami2">

Hello! Type "bye" to remove!

</p>
<button class="btn1">Fade out</button>
</div>

Answer 1

If you empty your keypress history array when the user has typed in the key, that should allow the process to repeat. So, instead of

$(document).unbind('keydown',arguments.callee);

you could simply do this

kkeys = [];

Of course, you should decide what happens when the user types in the code the second time. Here’s a version that toggles the visibility of your div. Note that I upgraded your jquery version to support the fadeToggle function.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
var kkeys = [];
var konami = "38,38,40,40,37,39,37,39,66,65,13";
$(document).keydown(function(e) {
    kkeys.push(e.keyCode);
    if (kkeys.toString().indexOf(konami) >= 0)
    {
        kkeys = [];
        $(".konami").fadeToggle(1000);
    }
});
</script>

<div class="konami" style="display: none">
    <p class="konami2">
        Hello! Type the code again to remove!
    </p>
</div>