コナミコマンドを入力したらイベントが動くよう jQuery を仕掛ける方法

2017/02/15 ,

上上下下左右左右BA

ファミコン世代にはお馴染みのコナミコマンドです。コナミのゲーム内で、このコマンドをコントローラーから入力することで、武器がパワーアップ等のイベントが発動します。今回はこのコナミコマンドを入力すると処理が動く仕組みを組み込む方法について説明します。

以下のサンプルコードは、プラグインは一切利用せず、全て作りこみます。

実装イメージ

キーボードの入力キーコードから、きちんとコナミコマンドの順番で入力された場合にプログラム(関数)をコールする仕組みとします。途中で間違ってしまった場合は、最初から入力すればきちんとプログラムが発動するようにします。

まずは利用するキーのコードを知ろう

上下左右は矢印キーを利用するので、コード値が必要なキーは ↑↓←→BA の 6つのキーです。以前のエントリーでキーコードを取得する簡易ツールを作成したので、そちらを利用してコード値を取得します。

jQuery でキーボード入力をキャンセルする方法
Webシステムを構築する際に、処理制限としてキーボードからの入力キーを制御したい場合があります。jQuery ではキー入力のイベントを制御することで、簡単にキーボード...

実際に取得したキーコード一覧がこちらです。

キーBA
キーコード384037396665

取得したコード情報より、実際にコマンドの順番に並べ次のような配列データとして保持しておきます。

コナミコマンド実装サンプル

それでは実際に実装してみましょう。

コナミコマンドのキーコード配列と、入力されたキー配列が同じかどうかチェックをします。入力されたキーコードを配列へ格納し、L.15 で最後に入力されたキー情報をコナミコマンド配列と比較します。途中で入力ミスをすると、L.17 にある通り、入力キー配列をリセットするので、改めて最初から入力する必要があります。

全てのキーコマンドが正しく入力されると L.22 にあるコナミコマンドによる処理関数が呼びだされます。具体的な処理内容は、konami_cmd_action() 関数の L.33 ~ L.35 に実施内容を記述したら完成です。

このページにもコナミコマンドを仕掛けました

それでは実際にコナミコマンドを入力してみましょうか。このページにもコナミコマンドによる処理を仕掛けています。何かこのページに変化が起これば成功です。

いかがでしょうか?

コナミコマンドが発動すると、画面がくるっと一回転します。
このページで konami_cmd_action() 関数に仕掛けた処理は以下の通りです。

左右の矢印キーを LR キーに変更も可能

L キーのキーコードは 76R キーのキーコードは 82 であるため、コナミコマンド配列のキーコード情報を変更してあげれば、LR 版のコナミコマンド「↑↑↓↓LRLRBA」にも対応が可能です。

以上、jQuery によるコナミコマンドの実装方法でした。

PAGE TOP ↑