最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

Day 12 – Key Sequence Detection

XAMPP下载 admin 457浏览 0评论
 不知道大家知不知道 KONAMI CODE,當輸入一連串特定內容後會有動畫或是意想不到的小驚喜,或是可以說是彩蛋。有些網站目前還是有內建這個有趣的小彩蛋,去測試一下你最常逛的網站有沒有吧!

那就開始吧!
今天的彩蛋使用的是 Cornify 這個套件,它可以讓你的網頁充斥著彩虹小馬!當使用者輸入正確密語,就會出現彩虹小馬。

設定密語
首先先設定通關密語,當使用者完全依照順序輸入後就會啟動小彩蛋,假設我的密語是「hen 帥」

const secretCode = ‘henshuai’;
設定監聽事件
接著要監聽使用者輸入的內容,並記錄輸入的內容,這裡使用 key,但也可以使用 keyCode(會是數字)記錄

window.addEventListener(‘keyup’, function(e) {
// code here
});
比對輸入內容與密語是否一致
有密語了也有輸入內容了,來比對是否一致吧!
首先先建立一個 array 來記錄輸入的內容,也就是當每次輸入時,使用 push() 將內容加入陣列中

let codeArr = [];

window.addEventListener(‘keyup’, function(e) {
codeArr.push(e.key);
});
但如此一來當輸入內容越來越多時 array 會變得很長,所以要將 codeArr 的長度設定在密語的長度以下

let codeArr = [];
window.addEventListener(‘keyup’, function(e) {
codeArr.push(e.key);
if (codeArr.length > secretCode.length) {
codeArr.shift();  // shift() 會將 array 的第一位移除
}
});
當使用著真的正確輸入了密語,就會啟動開啟小彩蛋,在 Cornify 中的語法是使用 cornify_add() 來新增彩虹小馬。但這裡我想做點小變化:當正確輸入時會開啟開關,之後無論輸入任何按鍵都可以新增彩虹小馬,因此需要設定一個變數來紀錄是否已啟動

let activated = false;
let codeArr = [];
window.addEventListener(‘keyup’, function(e) {
codeArr.push(e.key);
if (codeArr.length > secretCode.length) {
codeArr.shift();  // shift() 會將 array 的第一位移除
}
if (codeArr.join(”).includes(secretCode)) {
activated = true;
}
if (activated) {  // 當啟動後按下任何鍵都會增加彩虹小馬
cornify_add();
}
});

這裡的比對方式是將 array 轉為 string 後判斷該字串是否包含密語的內容(includes(..) 會 return true 或是 false),如果有就啟動彩蛋

如此一來就完成啦!希望你玩得愉快~

转载请注明:XAMPP中文组官网 » Day 12 – Key Sequence Detection

您必须 登录 才能发表评论!