[javascript] コナミコマンドのようなコマンドの実装をもうちょっと柔軟に使えるようにしてみた

2008

11-18

06:30

[javascript] コナミコマンドのようなコマンドの実装をもうちょっと柔軟に使えるようにしてみた

javascript

はじめに

以前，コナミコマンドを JavaScript で実装した，というものが話題になりました．

当サイトでは、本日よりコナミコマンドを実装いたしました。コマンドはファミコン版グラディウス準拠の「上上下下左右左右BA」です。SFC版グラディウスIIIのように自爆はしません。ご安心ください。

コマンドを打つとサイト全体がパワーアップします。もう一度コマンドを打つと元に戻ります。携帯電話やRSSリーダでご覧の場合は効果がありません。ご了承ください。

[NS] お知らせ:「コナミコマンド」を実装しました

その後それを，Kanasan.JS の主催でもある kanasan さんがシンプルに実装されています．

で、なんか悔しいので、もの凄く簡単にコナミコマンドを実現するための仕組みを作成しました。

もの凄く簡単にコナミコマンドを実装する方法 (Kanasansoft Web Lab.)

そして今回，kanasan さんの実装を参考に，そして勉強がてら，もうちょっと柔軟に使えるようにライブラリっぽくまとめてみました．

まぁ今さら感がありますが，以下．

特徴

キー入力間隔が一定時間以上経過すると，コマンドの入力状態をリセット
Ctrl，Shift，Alt キーを押した状態での入力にも対応
入力コマンドの組み合わせ，成功・失敗時の処理，コマンド入力状態リセットとなるキー入力間隔，を指定可能

．．．といったところです．

使い方

例1：コナミコマンド

まずはやっぱりこれですね．

set_key_command_listener({
  command: [
    { code: 38 }  // ↑
  , { code: 38 }  // ↑
  , { code: 40 }  // ↓
  , { code: 40 }  // ↓
  , { code: 37 }  // ←
  , { code: 39 }  // →
  , { code: 37 }  // ←
  , { code: 39 }  // →
  , { code: 66 }  // b
  , { code: 65 }  // a
  ],
  success: function() {
    alert( 'Power up!' );
  },
  timeout: 2000
});

この例の場合，「コナミコマンド」を入力すると，「Power up!」という文字のダイアログが表示されます．また，キーの入力間隔が 2秒以上空くと，それまでの入力がリセットされてしまいます．

例2：テキトーに


set_key_command_listener({
  command: [
    { code: 37 }                   // ←
  , { code: 38, c: true }          // Ctrl + ↑
  , { code: 39, s: true, a:true }  // Alt + Shift + →
  , { code: 40 }                   // ↓
  ],
  success: function() {
    alert( 'コマンド実行！' );
  },
  error: function() {
    window.close();
  },
  timeout: 2000
});

この例の場合，「←，Ctrl + ↑，Alt + Shift + →，↓」の順に入力すると「コマンド実行！」という文字のダイアログが表示されます．しかし，ひとつでも入力を間違えると，ウィンドウを閉じてしまいます．入力されたコマンドのリセットについては先の例と同様ですね．

JavaScript ソースコード

※ ブログの仕様で一部のシングルクオートが全角に変換されてしまっています．そのままコピペしても動作しませんのでご注意を．


var set_key_command_listener = function( param ) {
  var command_defined  = param.command  ||  undefined
    , callback_success = param.success  ||  undefined
    , callback_error   = param.error    ||  undefined
    , timeout_reset    = param.timeout  ||  5000
  ;
  var command_index = 0;
  var timer_reset   = undefined;

  var reset_command = function() { command_index = 0; }
  var add_event_listener = function( elm, type, handler ) {
    if     ( elm.addEventListener ) { elm.addEventListener( type, handler, true ); }
    else if( elm.attachEvent )      { elm.attachEvent( 'on' + type, handler ); }
    else                            { elm[ 'on' + type ] = handler; }
  };
  var check_command = function( e ) {
    if( e.keyCode.toString().match( /^1[6-8]$/ ) ) { return true; }
    var cm = command_defined[ command_index++ ];
    return cm
      ? cm.code == e.keyCode
                     &&  ( cm.c || false ) == e.ctrlKey
                     &&  ( cm.s || false ) == e.shiftKey
                     &&  ( cm.a || false ) == e.altKey
      : false
    ;
  };

  add_event_listener( document, 'keyup', function( e ) {
    if( check_command( e ) ) {
      if( ! command_defined[ command_index ]  &&  typeof callback_success == 'function' ) {
        callback_success();
        reset_command();
      }
    }
    else {
      if( typeof callback_error == 'function' ) {
        callback_error();
        reset_command();
      }

    }

    clearTimeout( timer_reset );
    timer_reset = setTimeout( reset_command, timeout_reset );
  } );

  reset_command();
};

おわりに

ということで，先人の JavaScript を参考に，コナミコマンドその他任意のコマンド（？）を入力することでで任意の処理を行えるような JavaScript を実装してみました．

今後，コマンドを登録する側も書いてみたいところです．

このエントリへのトラックバック

トラックバック URI
http://blog.iwa-ya.net/2008/11/18/063056/trackback

このエントリへのトラックバックはまだありません．

このエントリへのコメント »

マイクに向かって「はどそ～～～～ん」でドラミちゃん･･･

Comment by SE 中村 — 2008.11.18（火） @ 09:24

コメントをどうぞ

↑ ページの先頭へ

岩家ぶろぐ