这是我参与更文挑战的第14天，活动详情查看：更文挑战

Key Sequence Detection (KONAMI CODE)

这个模块的内容通俗翻译出来的意思就是按键序列检测，但是我们用大白话去解释一下，其实这就是一个类似于游戏里的秘籍一样的东西，比如说你在打魂斗罗游戏的时候，只有三条命，你要通过八关，那很明显不够啊，显然不一会儿就要完蛋了，那么现在就有这么一个秘籍，你在开始前在手柄上快速按下 上上下下左右左右BA,你就有了三十条命，那么今天的模块内容也就是如此，当在键盘按下一定的按键组合之后，就会触发页面显示一些东西。

一、效果展示

1. index-START.html

无论我怎么操作，他都是无动于衷的画面，这就是初始画面，他什么也没做。

2.index-FINISHED.html

当在键盘上按下 wesbos 这几个组合按键之后，立马出现了画面（可以多次尝试，出现的画面不太一样）。

3. 我的效果

当我在键盘上按下 上上下下左右左右ba 的时候，会出现图案。

二、实现

最终代码

<!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>
  
  //上上下下左右左右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>

复制代码

三、总结回顾

过程分解

1.解析原作者代码
原作者的代码结果实现就是去这个网址 www.cornify.com/js/cornify.… 去执行 cornify_add() 这个方法，这样的话图案就会一直出现，可以将 cornify_add() 这个方法放到初始化文件的 F12 的console 窗口中进行执行，就会得到这样的结果。

当然，这肯定不是最主要的内容，最主要的内容就是如何去做这个模块的序列侦测。

2.按键侦测

这里使用 keyup 去做事件侦测，不能用 keydown，如果用了 keydown，如果按着不放就会一直触发。

window.addEventListener("keyup", (e) => {
  console.log(e.key,e.keyCode);
  
});
复制代码

打印 key 和 keyCode 看都按下了什么按键。

按键目标

要实现的就是魂斗罗的隐藏秘籍按键。

   //上上下下左右左右BA
  const secretCode = [38,38,40,40,37,39,37,38,66,65];
  //记录按键
  const input = [];
复制代码

按键处理

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

    if(input.join('|' === secretCode.join('|') )) {
      // cornify_add();
      console.log("FINISHED");
    }
复制代码

现在已经完成了功能，当按下上上下下左右左右ba的时候，就会出现图案 !

重难点

疑惑点

当使用原作者的指向链接的时候，我发现当我完成按键序列的时候，继续操作按键，没操作一次，都会产生一个图案效果。

然后带着疑惑打开了原作者的这个网站，发现它这个网站就是这么设计的这个按键序列，果然，做东西的时候还是要首先看人家给的材料里边的东西都做了什么。

另一个比较重要的就是原作者的一个按键侦测的写法

pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
复制代码

这个意思就是当每次执行这段操作的时候，就相当做了这样一件事。

if(input.length > secretCode.length){
    input.splice(0,1);
}
复制代码

对于 splice ，如果是负的，理论上是什么都不会切出来的，所以只要后边的那个数字是负的，什么都不会切出来。

那么，原作者的思路这样去理解

如果第一次是 // -11,-9,

那么第二次是 // -11,-8,

…

那么第十次是 // -11，0，

那么第十一次 // -11, 1, // 开始切了，切了一个出去

那么在这个范例里边也可以这样去写：

input.splice(0,input.length - secretCode.length);  //确保后边一定是负的
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端

微信视频美颜大师v1.0.1 真实自然的实时视频互动美颜特效

MercuryBoard f参数跨站攻击漏洞

Namazu ‘uri’ 缓冲区溢出漏洞

PhpGedView PhpGedView未明远程漏洞

理解递归

Pro-face WinGP PC Runtime/Pro-face Pro-Server EX数字错误漏洞

JavaScript 30天编码挑战——第 12 天