jQuery detect keystrokes and set variables accordingly

Question

I have created a rudimentary EasterEgg within my code to activate when the following keystrokes are made (not simultaneously) Enter + c + o + l + o + r + s with the following code:

isEnter = 0; isC = 0; isO = 0; isL = 0; isR = 0; isS = 0;
$(window).keydown(function(e){
    if(e.which==13) isEnter = 1; if(e.which==67) isC = 1; if(e.which==79) isO = 1; 
    if(e.which==76) isL = 1; if(e.which==82) isR = 1; if(e.which==83) isS = 1;
    ColorMap();
});

function ColorMap(){
  if(isEnter==1 && isC==1 && isO==1 && isL==1 && isR==1 && isS==1){
     //DO FUNCTION//
     isEnter = 0; isC = 0; isO = 0; isL = 0; isR = 0; isS = 0; //SET VARS BACK TO 0
  };
};

I need to add reset functionality to the keydown function to reset all variables if something other than those keys are pressed... that way they have to press Enter + c + o + l + o + r + s or the statement gets reset and they have to start again...(this will make the 'EasterEgg' harder to get to [or at least less likely to get to by fluke or random keystrokes]).

Answer 1

You want to check for these in order, as well. Right now, you could push the keys in any order and still activate the Easter Egg. Enter + lorocs for example.

I'd store the values you are looking for in order, like this:

//       Enter, c, o, l, o, r, s
var keys = [13,67,79,76,79,82,83];

Then, you can just keep track of where the user is in the sequence:

var nextKey = 0;
$(window).keydown(function(e){
    var key = e.which;
    if (key === keys[nextKey])
        nextKey++;

    ColorMap();
});

This will increment nextKey every time you match the next key that you are looking for in the sequence. The nextKey variable starts at the 0 index, which means we start looking for Enter. Now, we need to check for the end condition in the ColorMap function.

function ColorMap() {
  var maxKeyIndex = keys.length - 1;
  if(nextKey >= maxKeyIndex) {
     //DO FUNCTION//

     nextKey = 0;
  }
}

This solution should allow you to change the special sequence in the keys variable without requiring a change elsewhere in the code.

EDIT: If you want the answer to be contiguous, as you probably do, then you can reset the nextKey variable when the match fails.

if (key === keys[nextKey])
    nextKey++;
else
    nextKey = 0;

For extra credit, you could switch this to use a string to hold the easter egg, then String.fromCharCode to convert it to the character code that e.which returns.

Answer 2

I answered a similar easter egg question recently, so I'll just point you to that one.

It takes a different approach that what you're doing, and it doesn't need to be reset.

http://stackoverflow.com/questions/2297524/javascript-jquery-keypress-logging/

EDIT: Here's an updated version that keeps the key history from getting too long.

$(document).ready(function() {

    var easterEgg = 'egg';
    var eggLength = easterEgg.length;
    var keyHistory = '';
    var match;
        $(document).keypress(function(e) {
            keyHistory += String.fromCharCode(e.which)
            match = keyHistory.match(easterEgg); 
            if(match) {
                alert(match);
                keyHistory = match = '';
            } else if (keyHistory.length > 30) {
                keyHistory = keyHistory.substr((keyHistory.length - eggLength - 1));
            }
        });
});

Answer 3

Well currently you're going to let your users press the magic keys in any order, which wouldn't be very much fun. I'd put the magic sequence into an array, and as successful keystrokes match you move forward in the array. If you get to the end, then it's Egg time.

edit exactly as @EndangeredMassa wrote.

Answer 4

Here's another approach:

<script type="text/javascript">
$(function() {
  $(window).keypress(function(e) {
    var input = $("#input");
    input.val(function(i, v) { return v + String.fromCharCode(e.which) });

    if(input.val().indexOf('colors') > -1) {
      alert('Easter Egg');
      input.val('');
    } 
    else if('colors'.indexOf(input.val())) {
      //Clear value, they've hit another key
      input.val('');
    }        
  });
 });
</script>
<input id="input" type="text" />

It keeps track of the current portion of colors you've typed in a textbox easy for debugging, just add a style="display: none;" when you're done testing.