Day 12 - Key Sequence Detection (KONAMI CODE)

前言

JS 30 是由加拿大的全端工程师 Wes Bos 免费提供的 JavaScript 简单应用课程，课程主打 No Frameworks、No Compilers、No Libraries、No Boilerplate 在30天的30部教学影片里，建立30个JavaScript的有趣小东西。

另外，Wes Bos 也很无私地在 Github 上公开了所有 JS 30 课程的程序码，有兴趣的话可以去 fork 或下载。

本日目标

预先设定一组secretCode，如果在视窗画面内输入的文字与secretCode相同则在视窗画面加上图案。

解析程序码

这次我们需要藉助网路上别人写好的 JavaScript API，让他帮忙在每次视窗画面中输入文字等於secretCode时，在视窗画面上新增一个生动的图案。

观看完整的 JavaScript API 内容

<script type="text/javascript" src="https://www.cornify.com/js/cornify.js"></script>

JS 部分

宣告常数 pressed 为一个空阵列，用来存放我们在视窗画面所输入的值。

宣告常数secretCode作为预设的文字密码。

const pressed = [];
const secretCode = 'saber';

我们替整个视窗注册keyup 事件(放开按键时触发)的监听器，藉由console.log(e.key);可以在console看到我们按下的是哪一个按键，紧接着我们将按下的那个按键(key)放入阵列pressed的末端。

为了比对输入文字是否等於secretCode，我们可以利用splice(start,deleteCount)来让阵列的长度跟secretCode保持一样，没做这个处理的话，我们会发现阵列中的元素愈来愈多、长度愈来愈长，永远没有和secretCode相同的可能。

splice(start,deleteCount)可以删除阵列自start索引开始的deleteCount个元素，要注意的是deleteCount要大於0才会开始删去元素，范例中的secretCode长度是5，也就是说只有输入到第6次才会开始删去元素。

有趣的是我们将deleteCount指定为pressed.length - secretCode则效果和直接指定为1相同。只要pressed的长度到达6，经过计算後deleteCount是1，删去一个元素後，pressed长度又变为5，由此周而复始(5->6；6->5)。

指定start = -secretCode.length - 1的效果是让我们从最早被 push 进阵列(最前端)的元素开始删除。

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

最後，我们利用 if 判断pressed.join('')串联出的字串是否有包含secretCode，如果有包含就在console印出DING DING!并呼叫 API 中的cornify_add()在视窗画面里加上图片。我们也可以再补上console.log(pressed);，查看目前pressed阵列内的元素。

window.addEventListener('keyup',(e)=>{
    /***省略***/
    /***省略***/
    if(pressed.join('').includes(secretCode)){
      console.log('DING DING!');
      cornify_add();
    }

    console.log(pressed);
});

实际效果

ps.背景图是後来改的，原版是空白画面。

补充资料:

keyup事件
Array.prototype.splice()

范例网页请按此