※このエントリーはコナミコマンドで動くJavaScriptコードを書いてみる | SDN Memo を書き直したものです。

はじめに

Webサイトにイースター・エッグ（隠し要素）を仕込んだりするのもたまには面白いなぁという事で、「コナミコマンドをキーボードで打つと何かが起こるスクリプト」を書いてみる事にしました。
コナミコマンドって何だ、という人はWikipediaを見てください。

コナミコマンド - Wikipedia

まずどう組むか考える

お遊びでも作るからには簡単な仕様を決めておかねばなりません。

キーボード入力によるJavaScriptの操作

JavaScriptには keydown / keypress / keyup などのキーボードのキーの操作によって発火するイベントが用意されています。
keydown はキーが押された瞬間、keypress はキーが押されて文字が入力された瞬間（なので矢印キーなどには無反応）、keyup はキーが上がった（キーを放した）瞬間に動くイベントです。
コマンドは基本的に押された瞬間なので keydown を使います。

(function () {
  'use strict';

  document.addEventListener('keydown', function () {
    // 何かやらせる
  });
})();

コマンドのキーコードを取得する

キーボードには特殊なキーをのぞきほとんどのキーに「キーコード」という数字が割り当てられています。
キーコードを確認するための簡単なHTMLでも用意しておきましょう。

キーコード確認

<input type="text" id="keyCode">
<script>
document.addEventListener('keydown', function (ev) {
  document.getElementById('keyCode').value = ev.keyCode;
});
</script>

コナミコマンドは ↑↑↓↓←→←→BA なので、そのキーコードを見ると 38 38 40 40 37 39 37 39 66 65 である事がわかります。
これを配列にして、n番目のコマンドが合っていたらn+1番目のコマンドを確認するといった感じに書きます。

(function () {
  'use strict';

  var
    // コマンドのキーコード
    command = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65],

    length = command.length,
    index = 0;

  document.addEventListener('keydown', function (ev) {
    if (ev.keyCode === command[index]) {
      index++;

      if (index >= length) {
        index = 0;

        // 全てのコマンドを入力したら何かする
      }
    } else {
      // コマンド入力を間違えたらリセット
      index = 0;
    }
  });
})();

これでもいけなくないですが、コマンド入力としてはまだ物足りないかも。

コマンドの入力受付の猶予時間を設定

n秒以内に次のコマンド入力がない場合はコマンド入力をリセットした方がよりそれっぽくなるかと思います。

(function () {
  'use strict';

  var
    // 入力受付時間（1.5秒）
    wait = 1500,

    // standby = false の時は入力を受け付けない
    standby = true,

    // コマンドのキーコード
    command = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65],

    length = command.length,
    index = 0,
    timer = null;

  document.addEventListener('keydown', function (ev) {
    // タイマーのリセット
    clearTimeout(timer);

    // コマンドの確認
    if (standby && ev.keyCode === command[index]) {

      index++;

      if (index >= length) {
        // すべてのコマンドを入力した！

        standby = false;  // 処理中にコマンドを受け付けないようにする
        index = 0;  // コマンドリセット

        /*

          何かしらの処理
          処理が完了したら standby = true に戻す

        */

      } else {
        // 一定時間入力がなかったらリセット
        timer = setTimeout(function () {
          index = 0;
        }, wait);
      }

    } else {
      // コマンドが間違っていたらリセット
      index = 0;
    }
  });
})();

やりました。これで完成です。
あとは好きな処理を書いてページに設置するだけです。