コナミコマンドを入力したときにイベントを発生させるjQueryプラグイン「jQuery.easterEgg」

JavaScript

2013.10.17

イメージ

こんにちは。fukasawaです。
最近になって、関内駅の発車ベルが横浜ベイスターズの球団歌であることに気がつきました。アレンジが変わるとなかなか気づかないものですね。

さて、今回ご紹介するのはコナミコマンドを入力したタイミングでイベントを発生させるjQueryプラグイン「jQuery.easterEgg」です。PCから以下のデモページを表示し、「↑↑↓↓←→←→BA」とキーボードを叩いてみてください。コマンド入力後に画像が表示されます。

デモページ

ページを表示した後、コマンド入力より先に別のキーを叩いたりするとイベントが発生しません
入力失敗した場合は一度リロードしてからもう一度入力してください

ページ内に隠しコンテンツを作成し、コマンド入力に合わせて表示したい場合などに使えるかもしれません。

jQuery.easterEgg

使い方

jQueryとjQuery.easterEggを読み、要素にイベントを設定します。以下のように書くことで、テキストボックスに対しコマンド入力があった場合にイベントを発生させることができます。


<script src="./js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="./js/jquery.easteregg.min.js" type="text/javascript"></script>
<script type="text/javascript">
		  $(function() {
			$('input:text').easterEgg();
			$('input:text').on('jQuery.esterEgg',function(){
                          //イベント発生時に実行したい処理
				$('img').css('display', 'block');
			});
		});
</script>

上の例ではテキストボックスに対しイベントを設定していますが、bodyにイベントを設定しておくと、デモページのようにページを読み込んだ直後にコマンドを感知するようです。

デフォルトはコナミコマンドですが、コナミコマンド以外のコマンドを設定することもできます。以下のようにキーコードを順番に指定してください。


//コマンド："bashalog"
$('input').easterEgg( { keys:[66,65,83,72,65,76,79,71] } );

まとめ

使いどころに悩みますね。