jQuery でコナミコマンドを実装する方法

コマンド「上上下下左右左右BA」を入力すると何かが起こる。

ファミコン世代にはお馴染みの「コナミコマンド」を、JavaScript で実装するのが今回の目的です。プラグインは一切使わず、jQuery ライブラリのみで実装します。

プログラムの概要

キーボードから入力された情報がコナミコマンドと合致した場合に限り、処理（関数）を呼び出します。途中で入力を間違えた場合は、また最初から入力すれば大丈夫な作りにします。

入力値の判定はキーのコード情報を用いる

キーボードから入力された各キーは、JavaScript 上でキーコードなる数字の情報に置き換えることができます。つまりコナミコマンドで利用する６種類のキー ↑ ↓ ← → B A のコード値が分かれば、プログラム上で入力順が正しいか判断できるようになります。

それぞれのキーコードの取得方法に関しては、こちらのページにサンプルプログラムとして用意しているので、興味がある方はご覧になってください。

jQuery でキーボード入力をキャンセル（無効化）する方法

Web システムや Web サイト上で、キーボードからの入力を制御する方法は次の通りです。 キー入力イベントをキャッチする 処理を実行させずキャンセルする...

それぞれのキーに対応したコード値の一覧がこちらになります。

このコード情報を元に、コマンド順にキーコードを並べて配列データとして保持しておきます。これはコマンドの入力順を判断するために利用します。

// コナミコマンド配列 [↑, ↑, ↓, ↓, ←, →, ←, →, B, A]
konami_cmd = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];

コナミコマンド実装サンプル

$(function(){

  // 入力キー配列
  var input_cmd = [];
  // コナミコマンド配列 [↑, ↑, ↓, ↓, ←, →, ←, →, B, A]
  var konami_cmd = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];

  // キー入力後のキーアップイベントで発動条件を監視します
  $(window).keyup(function(event){

    // 入力されたキーコードを入力キー配列へ追加
    input_cmd.push( event.keyCode );

    // 入力されたキーが正しいか判定
    // ※ 入力キー配列の長さで何番目の文字を比較するかを判断する
    if ( input_cmd[ input_cmd.length - 1 ] != konami_cmd[ input_cmd.length - 1 ] ) {
      // 入力を間違えた場合、入力キー配列をリセット（最初からやり直し）
      input_cmd = [];
    }
    // 全ての入力コマンドが合致したら処理を発動
    else if ( input_cmd.length == konami_cmd.length ) {
      // コナミコマンドによる処理実行！
      konami_cmd_action();
      // 処理後、改めて入力キー配列をリセット
      input_cmd = [];
    }
  });
});
 
// コナミコマンド処理関数
function konami_cmd_action() {
  /*---------------------------------------------
   ここにコナミコマンド入力時に発動させたい処理を記載
  ---------------------------------------------*/
}

コナミコマンドのキーコード配列と、入力されたキー配列が同じかチェックをします。入力されたキーコードを配列へ格納し、16行目で最後に入力されたキー情報をコナミコマンド配列と比較します。途中で入力ミスをすると、18行目にある通り、入力キー配列をリセットするので、改めて最初から入力する必要があります。

全てのキーコマンドが正しく入力されると、23行目に指定した関数が動きます。具体的な処理内容は konami_cmd_action() 関数として別に定義しておきます。

このページにコナミコマンドを仕掛けてみた！

それではここでコナミコマンドを入力してみてください。このページ上で何か変化が起これば成功です！

いかがでしょうか？コナミコマンドが正しく入力されると、画面がくるっと一回転する処理を組み込んでみました。（繰り返し実行すると画面酔いするので気をつけてください。）

このページで konami_cmd_action() 関数に仕掛けた処理は次の通りです。

function konami_cmd_action() {
  jQuery(function($){
    $('body').animate({zIndex:1},{
      duration: 5000,
      easing: "linear",
      step: function(now,fx){ $(this).css("transform", "rotateY(" + (now*360) + "deg)"); },
      complete:function(){$("body").css("zIndex", 0);}
    });
  });
}

左右の矢印キーを LR キーに変更することもできる

L キーのキーコードは 76、R キーのキーコードは 82 です。コナミコマンド配列のキーコード情報を変更すれば、スーファミ版コナミコマンド「↑↑↓↓LRLRBA」にも対応が可能です。

// コナミコマンド配列 [↑, ↑, ↓, ↓, L, R, L, R, B, A]
konami_cmd = [38, 38, 40, 40, 76, 82, 76, 82, 66, 65];

以上、jQuery でコナミコマンドを実装する方法でした。