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

更新日: 公開日:2015/09/07
jQueryでコナミコマンド

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

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

プログラムの概要

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

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

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

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

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

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

キーBA
コード384037396665

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

コナミコマンド キーコード配列【JavaScript】
// コナミコマンド配列 [↑, ↑, ↓, ↓, ←, →, ←, →, 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() 関数に仕掛けた処理は次の通りです。

コナミコマンド処理関数【JavaScript】
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 キーのキーコードは 76R キーのキーコードは 82 です。コナミコマンド配列のキーコード情報を変更すれば、スーファミ版コナミコマンド「↑↑↓↓LRLRBA」にも対応が可能です。

コナミコマンド スーファミ版キーコード配列【JavaScript】
// コナミコマンド配列 [↑, ↑, ↓, ↓, L, R, L, R, B, A]
konami_cmd = [38, 38, 40, 40, 76, 82, 76, 82, 66, 65];

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

Amazon タイムセール祭り【2018年4月】おすすめ商品一覧

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

元システムエンジニアから、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。

更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。