Twitterのユニークな裏技、コナミコマンド等をJavaScriptで複数実装してみた

こんにちは、naouniverse( @naouniverse708 )です。

ネタとしてはとうに旬を過ぎたかもしれませんが、ブラウザ版Twitterでのユニークな裏技、「上上下下左右左右BA」と入力すると青い鳥マークが一回転するアレですが、当サイトでも実装を試してみました。

【上上下下左右左右BA】Twitter、コナミコマンドに対応してた | ねとらぼ

via:コナミコマンドをJSで実装してみた。

参考にした上記サイトの方法では、

1. 配列の各要素に任意のキーコードを設定
2. キー入力ごとに順番に配列の要素をチェックする
3. 一致したらhitCountを増やし、一致しない場合はリセット
4. hitCountが設定したキーコード数を超えたら何かしらの処理をさせる

要約するとこんな感じでしょうか。

それらを踏まえつつ、ちょっと違った方法も試しつつした結果、下記のような感じに落ち着きました。

document.onkeydown = commandCheck;

var command = new Array(2);
command[0] = "38;38;40;40;37;39;37;39;66;65;"; //コナミコマンド
command[1] = "80;80;39;75;80;"; //瞬獄殺
 
var input = new Array(2); //入力キーコードが各要素に順次格納される
 
function commandCheck(evt) {
  //キーコードを格納、ブラウザ毎に方法異なる
  var key;  
  //document.allはIEのみ使用可能
  if (document.all) {
    key = event.keyCode;
  } else {
    key = evt.which;
  }
  //文字列をところてんさせることでリトライ対応
  for (i = 0; i < command.length; i++) {
    input[i] += key + ";";
    while (command[i].length < input[i].length) {
      input[i] = input[i].substr(1);
    }
  }  
  //入力キーコードが一致した場合に発動
  if (command[0] == input[0]) {
    //任意の処理
    alert("コナミコマンド");
    input[0] = "";
  }
  if (command[1] == input[1]) {
    //任意の処理
    alert("瞬獄殺");
    input[1] = "";
  }
}

ポイントとしては、

1. 複数実装可能、command は一つの要素にまるっとキーコードを設定、";"で区切る
2. hitCountは排除
3. キー入力ごとに command と input の同一インデックスが一致するかチェック
4. 一致した場合に、何かしらの処理をさせ、inputの該当インデックスをリセット

といった感じです。

とりあえずアラート表示(当記事投稿日時現在)させていますが、アイデア次第で色んなことができそうです。