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.

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));
            }
        });
});