サイトにコナミコマンドを超簡単に実装するためのjQueryプラグイン「Cheat Code」:phpspot開発日誌

前の記事 ≪：ファイナルファンタジーみたいなファンタジックな生き物を背景に合...
次の記事 ≫：美しい光のエフェクトを画像に加えるPhotoshopチュートリアル集

サイトにコナミコマンドを超簡単に実装するためのjQueryプラグイン「Cheat Code」

2009年05月18日-

スポンサードリンク

Cheat Code: a jQuery Plugin

サイトにコナミコマンドを超簡単に実装するためのjQueryプラグイン「Cheat Code」。

上上下下左右左右ＢＡでおなじみのコマンド。こうした特殊コマンドをサイトに埋め込みたい場合、結構大変そう、という感じになりますが、Cheat Codeプラグインを使えば、必要なライブラリを読み込んだら、以下のような cheatCode メソッドにオプションを渡してあげることで簡単に実装できます。

<script type="text/javascript">
$(function(){
    $(document).cheatCode({
        code : '38,40,37,39', // キーコードのカンマ区切り定義
        message : 'Up,Down,Left,Right',
        activated : function(){ // コールバック関数
            alert('command called');
        }
    });
});
</script>

code に、呼び出される順番でキーコードをカンマ区切りで定義します。
キーコードを調べるにはこちらのサイトが便利。
activated のイベントハンドラに、コマンドが実行された時のアクションをfunctionで定義してあげます。

この状態で、上下左右の矢印キーを押すと、「command called」が alert で表示されるようになっています。
alert 部分をお好みに設定しておけば、忍者が走るようにする、といったことが簡単にできそうですね。

簡単に動くサンプルHTMLコードを以下に書いておきました。<script src="..."> のパスは各自書き換えてください

<html>
<head>
<title>Cheat code sample code</title>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery.cheat-code.js"></script>
<script type="text/javascript">
$(function(){
$(document).cheatCode({
    code : '38,40,37,39', // コードを調べてカンマ区切りで記述
    activated : function(){ // コマンド実行時の処理を記述
      alert('Executed');
    }
});
});
</script>
</head>
<body>
Konami command
</body>
</html>