Day12 of #100DaysOfCode

#100DaysOfCode

Hii folks 🙌

Today I have completed the 12th video of JavaScript30!

Project 12: Key Sequence Detection (KONAMI CODE)

Source: https://javascript30.com

Learnings:

Today, the task is to detect a given key sequence in the user input and react to that.

The provided starter files consist of a single, almost empty HTML file.

The conception is pretty much clear, right? Here it is:

• store user input;
• if it matches a given key sequence, … do something.

Coding Concept:

Following the conception, we first have to define the key sequence that should be detected; I chose the Konami Code. 🙂

const keySequence = [
    'ArrowUp',
    'ArrowUp',
    'ArrowDown',
    'ArrowDown',
    'ArrowLeft',
    'ArrowRight',
    'ArrowLeft',
    'ArrowRight',
    'b',
    'a',
];

We then start with an empty array of equal size to keep track of the user input:

let userInput = new Array( keySequence.length );

Finally, we listen to the keydown event, and update the user input storage by shifting all items, and appending the current key. This is done by combining slicing, spreading, and declaring the user input array.

If the user input matches the Konami Code, an alert gets displayed.

window.addEventListener('keyup', (e) => {
 console.log(e.key);
 pressed.push(e.key);
 pressed.splice(-secretCode.length - 1, pressed.length -    secretCode.length);
 if (pressed.join('').includes(secretCode)) {
 console.log('DING DING!');
 cornify_add();
  }
console.log(pressed);
});

Unfortunately, checking if two arrays have the same values still cannot be done (more) easily. There really should be something like, Array.prototype.equals( otherArray )!

If the user input storage should be a const, you can easily achieve this by using .slice() and .push().

This was pretty cool. I didn’t take away much, though.

Today I learned (T-I-L):

• Key Sequence Detection
• What is Konami Code ✨

That is all for Day12 ✅

Thanks for reading, See you tomorrow!