This is the 14th day of my participation in Gwen Challenge

Key Sequence Detection (KONAMI CODE)

This module is the meaning of the content of the popular translation is the key sequence detection, but we use the word to explain, in fact this is a similar to the book of the same things in the game, let’s say you at the time of playing contra games, only three lives, you have to go through eight, that obviously not enough, apparently not is finished soon, So now there is such a secret, before starting, you quickly press up, down, left, right, left, right BA on the gamepad, you have 30 lives, so today’s module content is just like this, when pressing a certain combination of keys on the keyboard, it will trigger the page to display something.

1. Effect display

1. index-START.html

No matter what I do, he’s just an indifferent image. That’s the initial image. He doesn’t do anything.

2.index-FINISHED.html

After pressing the wesbos key combination on the keyboard, the screen appears immediately (you can try it several times, but the screen is not quite the same).

3. My effect

When I press up, down, left, right, left ba on the keyboard, the pattern appears.

Second, the implementation

The final code

<! DOCTYPE html><html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Key Detection</title>
  <script type="text/javascript" src="https://www.cornify.com/js/cornify.js"></script>
</head>
<body>
<script>
  
  // up and down left and right BA
  const secretCode = [38.38.40.40.37.39.37.38.66.65];
  const input = [];
  window.addEventListener("keyup".(e) = > {
  console.log(e.key,e.keyCode);
    input.push(e.keyCode);
    

    // while(input.lenght > secretCode.length){
    // input.shift();
    // }

    input.splice(0,input.length - secretCode.length);

    console.log(input,secretCode);
    if(input.join("|") === secretCode.join("|")) {// cornify_add();
      console.log("KONAMI"); }});</script>
</body>
</html>

Copy the code

Iii. Summary and review

Process decomposition

1. Parsing the author code implementation code results of the authors is to go to the website www.cornify.com/js/cornify…. The cornify_add() method can be executed in the console window of the initialization file F12, so that the pattern will always appear.

Of course, this is certainly not the main content, the main content is how to do the module sequence detection.

2. Key detection

Keyup is used for event detection, not keyDown. If keydown is used, it will keep firing if you hold it down.

window.addEventListener("keyup".(e) = > {
  console.log(e.key,e.keyCode);
  
});
Copy the code

Print the key and keyCode and see what keys are pressed.

  1. Key goals

To achieve is the hidden secret keys of the contra.

   // up and down left and right BA
  const secretCode = [38.38.40.40.37.39.37.38.66.65];
  // Record keys
  const input = [];
Copy the code
  1. The key to deal with
while(inpu.lenght > secretCode.length){
      input.shift();
    }

    if(input.join('|' === secretCode.join('|'))) {// cornify_add();
      console.log("FINISHED");
    }
Copy the code

Now that the function is complete, the pattern will appear when you press up, down, left, right and left BA!

Difficult point

Doubts point

When using the original author’s pointing link, I found that when I finished the key sequence, I continued to operate the key, without a single operation, it would produce a pattern effect.

Then I opened the website of the original author with doubts, and found that this website is designed in this way. Sure enough, when making things, we should first look at what people give us in the material.

Another important one is the original author’s way of writing a key detection

pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
Copy the code

This means that every time you perform this operation, you’re doing something like this.

if(input.length > secretCode.length){
    input.splice(0.1);
}
Copy the code

For splice, if it’s negative, theoretically nothing will cut out, so as long as the number behind it is negative, nothing will cut out.

So, the idea of the original author is to understand this

If the first time is // -11,-9,

So the second time is PI/PI -11,-8,

.

So the tenth is PI/PI minus 11,0,

So the eleventh time // -11, 1, // here we go, cut one out

So in this example we can also write:

input.splice(0,input.length - secretCode.length);  // Make sure it is negative
Copy the code