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]).

@sadmicrowave - I added a solution below where you don't need to worry about character codes at all, you can use any string pretty easily. — Nick Craver, Mar 02 '10 at 15:28

EndangeredMassa · Accepted Answer · 2010-03-02T16:53:24.123

13

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.

edited Mar 02 '10 at 16:53

answered Mar 02 '10 at 15:14

EndangeredMassa

17,208
8
55
79

You could force the Easter Egg keys to have to be contiguous by setting the nextKey counter back to zero if the character doesn't match. – Pointy Mar 02 '10 at 15:45
Certainly. I intended to do that at first, but forgot. – EndangeredMassa Mar 02 '10 at 16:41
@EndangeredMassa - this is exactly what I'm looking for. @Pointy - I need to add that functionality also...it seems like adding: if(key != keys[nextKey]) nextKey = 0; should do the trick but for some reason its not working. – sadmicrowave Mar 02 '10 at 16:43
@EndangeredMassa's Post Edit - dont you need { } around your IF condition's function to make it work? i.e. if(key===keys[nextKey]){nextKey++}else{nextKey=0}; ? – sadmicrowave Mar 02 '10 at 17:00
If-else doesn't require brackets. If you don't use them, it just considers the next line when executing. You can certainly add them, though. – EndangeredMassa Mar 02 '10 at 17:04

score 3 · Answer 2 · edited May 23 '17 at 12:07

3

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

edited May 23 '17 at 12:07

Community

1
1

answered Mar 02 '10 at 15:15

user113716

318,772
63
451
440

`+1` gr8, i like ur answer on tht post. Only thing is, lets say user presses thousand keys without pressing the combination for easter egg, then `keyHistory` will be huge. Isn' it? – Rakesh Juyal Mar 02 '10 at 15:28
Good point. In fact, I was just thinking that, so I updated the code. Will post it in a second. (Both here and there.) – user113716 Mar 02 '10 at 15:30
:), now thts fine. The only point remaining is, in: `keyHistory = keyHistory.substr((keyHistory.length - eggLength - 1));` i guess, u can replace `keyHistory.length` with 30 , as you have already hardcoded tht. – Rakesh Juyal Mar 02 '10 at 15:44
@Rakesh - Very true. You could hardcode it to prevent another lookup of the length. `else if (keyHistory.length > 30) { keyHistory = keyHistory.substr((30 - eggLength - 1));}` – user113716 Mar 02 '10 at 15:57
I like that you can store the easter egg in a string. – EndangeredMassa Mar 02 '10 at 16:43
Yeah, a string coupled with `String.fromCharCode()` makes things nice and readable. – user113716 Mar 02 '10 at 16:53

score 0 · Answer 3 · answered Mar 02 '10 at 15:15

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.

score 0 · Answer 4 · answered Mar 02 '10 at 15:22

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.

jQuery detect keystrokes and set variables accordingly

4 Answers4