iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 13
0
自我挑戰組

JS30自我學習筆記系列 第 13

第十二堂 - Key Sequence Detection

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

↑↑↓↓←→←→BA

而這個Konami Code日後也被應用在Konami其他某些作品中,甚至因為這個秘技太紅了,很多知名網站也都拿來當作彩蛋,變成一種惡趣味的存在。像是暴雪的OverWatch官網就藏了這個彩蛋,各位可以試試看輸入秘技會發生什麼事。
Imgur

沒錯,這堂課就是要來做屬於自己網站的彩蛋!讓各位未來在幫業主開發系統時,能夠將你滿滿的不爽未能發揮的創意,通通埋在這個彩蛋裡。

邏輯流程

  1. 設定彩蛋密碼
  2. 監聽keyup
  3. 取得event的key
  4. 將key放入Array
  5. 避免Array一直無限變大,因此限制Array只能存跟密碼一樣長
  6. 判斷Array內容
  7. 觸發彩蛋

課程重點

  1. 這實作唯一稍微需要思考的就是如何讓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,輸入完後每按一個鍵就會出現一隻獨角獸。
    [Imgur](https://i.imgur.com/TPP0PZy.jpg)
    

參考來源

Konami Code維基百科


上一篇
第十一堂 - Custom Video Player
下一篇
第十三堂 - Slide in on Scroll
系列文
JS30自我學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言