Javascript Konami Code, FadeIn/FadeOut Div

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 but开发者_开发问答ton, 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>

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>

I gave it a try I hope this is helpful:

$(document).ready(function(){
    //why do you need to press enter btw? "13" keyCode
    var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65,13";
    var bkeys = []; var bye = "66,89,69";
    $(this).keydown(function(e) {
            // if konami
            kkeys.push( e.keyCode );
            if ( kkeys.toString().indexOf( konami ) >= 0 ) 
            {
                $(".konami").fadeIn(1000);
                kkeys = [];
            }

            // "bye"
            bkeys.push( e.keyCode );
            if ( bkeys.toString().indexOf( bye ) >= 0 ) 
            {                       
                $(".konami").fadeOut(1000);
                bkeys = [];
            }
    });

    // manual fade out using button click
    // no need to type to hide stuff
    $(".btn1").click(function(){
        $(".konami").fadeOut(1000);
    });
});

All these solutions have some major design flaws. First off, because the kkey array is not emptied after a wrong input, it's impossible to complete the sequence when there was any keypress beforehand. Secondly, the array keeps storing every single user keystroke for the rest of the user session. This is a serious performance issue.

$(document).ready(function() {
  var matchedIndex = 0,
      // fixed it, correct code is ↑↑↓↓←→←→ab
      keySequence = [38, 38, 40, 40, 37, 39, 37, 39, 65, 66];
  $(".konami").fadeOut(1000);
  $(this).on('keydown', function(e) {
    // if key matches current sequence index
    // iterate index by one, if not reset and restart
    matchedIndex = (event.keyCode === keySequence[matchedIndex]) ? matchedIndex + 1 : 0;
    if (matchedIndex === keySequence.length) {
      $(".konami").fadeIn(1000);
      // unsubscribe, fun is over
      $(this).off('keydown');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="konami">Yeah!</div>