↑↑↓↓←→←→BA
而這個Konami Code日後也被應用在Konami其他某些作品中,甚至因為這個秘技太紅了,很多知名網站也都拿來當作彩蛋,變成一種惡趣味的存在。像是暴雪的OverWatch官網就藏了這個彩蛋,各位可以試試看輸入秘技會發生什麼事。
沒錯,這堂課就是要來做屬於自己網站的彩蛋!讓各位未來在幫業主開發系統時,能夠將你滿滿的不爽未能發揮的創意,通通埋在這個彩蛋裡。
邏輯流程
設定彩蛋密碼
監聽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,輸入完後每按一個鍵就會出現一隻獨角獸。