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

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

2009年05月18日-はてなブックマーク

スポンサード リンク

Cheat Code: a jQuery Plugin

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



上上下下左右左右BAでおなじみのコマンド。こうした特殊コマンドをサイトに埋め込みたい場合、結構大変そう、という感じになりますが、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>

実装して遊んでみましょう。

関連の記事検索:jQuery, JavaScript, ネタ, プログラミング
スポンサード リンク

By.KJ : 2009年05月18日 07:09 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)