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

第十二堂 – Key Sequence Detection

XAMPP下载 admin 995浏览 0评论
 今天要做的實作可以說是非常的沒用特別。首先跟大家說個小故事,日本有家知名電子遊戲製作商叫Konami,他們製作過像是惡魔城、魂斗羅、實況野球等經典人氣大作。而1985年時,Konami正在開發一款叫做《宇宙巡航艦》的遊戲,但過程中發現遊戲難度太高,因此發展出了一個舉世聞名的秘技Konami Code:

↑↑↓↓←→←→BA
而這個Konami Code日後也被應用在Konami其他某些作品中,甚至因為這個秘技太紅了,很多知名網站也都拿來當作彩蛋,變成一種惡趣味的存在。像是暴雪的OverWatch官網就藏了這個彩蛋,各位可以試試看輸入秘技會發生什麼事。
QQ截图20181105161845
沒錯,這堂課就是要來做屬於自己網站的彩蛋!讓各位未來在幫業主開發系統時,能夠將你滿滿的不爽未能發揮的創意,通通埋在這個彩蛋裡。

邏輯流程
設定彩蛋密碼
監聽keyup
取得event的key
將key放入Array
避免Array一直無限變大,因此限制Array只能存跟密碼一樣長
判斷Array內容
觸發彩蛋
課程重點
這實作唯一稍微需要思考的就是如何讓Array只存最新輸入的且跟密碼一樣長的字串。範例中secretCode是設定的密碼,pressed是存字串的Array。splice的第一個參數是要插入的位置,第二個參數是要取代掉插入位置後的幾個成員。既然要保留最新輸入的,那就要從最前面刪除,所以插入的位置就是密碼長度+1。而當輸入的字串數等於密碼長度時,pressed.length-secretCode.length=0,因此還不會刪除。但若再打一個字,就會刪除一個字,這時pressed就會回到密碼長度。所以當字串數等於密碼長度時,每多打一個字就會刪除第一個字。
pressed.push(e.key);
pressed.splice(-secretCode.length-1,pressed.length-secretCode.length);
延伸閱讀
實作中有用到一個有趣的彩蛋,但要先服用下列腳本
<script type=”text/javascript” src=”http://www.cornify.com/js/cornify.js

“></script>
接著在程式碼裡面呼叫cornify_add()就會在畫面上出現像下圖那樣的獨角獸,而一直呼叫就會一直隨機出現不同的獨角獸。甚至在畫面中輸入Konami code,輸入完後每按一個鍵就會出現一隻獨角獸。

QQ截图20181105161852

转载请注明:XAMPP中文组官网 » 第十二堂 – Key Sequence Detection

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