コナミコマンド入力でメッセージを表示させるjQueryプラグイン「Cheat Code」

コナミコマンドというのは、ファミコンのゲームをはじめ様々なコンピューターゲームに登場する隠しコマンドのこと。ゲーム好きな方にはお馴染みですね。

ファミコンのグラディウスというシューティングゲームで、コントロールボタンから「上上下下左右左右BA」とコマンドを入力すると一瞬にしてオプションフル装備になるという裏ワザがありました。懐かしいですね。コナミコマンド初登場はこのファミコン版グラディウスだということです。

このコナミコマンド（隠しコマンド）を実装するサンプルを作ってみましたのでご覧下さい。

【コナミコマンド入力でメッセージを表示させるjQueryプラグイン「Cheat Code」サンプル】

サンプルではキーボードの矢印キーから「↑↑↓↓←→←→」と入力してみて下さい。打ち間違えたらリロードしてまた試してみて下さい。

設置もすごく簡単です。使用方法は続きをどうぞ。

【使用方法】
まずは、こちらのCheat Codeサイトからjquery.cheat-code.jsをダウンロードします。ダウンロードが始まらない場合は右クリックしてリンク先を保存してください。

＜head＞部分でjQueryとjquery.cheat-code.jsを読みこませる記述をします。パスは各自設定して下さい。そして、コマンド用のキーコードと表示させるメッセージを指定します。
※　デフォルトでは「↑↑↓↓←→←→ba 」が設定されています。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cheat-code.js"></script>
<script type="text/javascript">
	$(document).cheatCode({ 
		code : '38,38,40,40,37,39,37,39',　//　キーコードをカンマで区切って設定する。
		message : 'Hello !!'               // コマンド入力されると表示されるメッセージを設定する。
	});
</script>

$(document).cheatCode({

code : '38,38,40,40,37,39,37,39',　//　キーコードをカンマで区切って設定する。

message : 'Hello !!' // コマンド入力されると表示されるメッセージを設定する。

});

</script>

キーコードの調べ方は、こちらのサイトを利用するとブラウザ上で確認できます。
KeyCode Library test

また、CSSで見た目を変更することができます。背景にoverlay、メッセージ部分にmodalというクラス名が割り当てられていますので、CSSでスタイルを設定して下さい。サンプルではCSSを利用して画像を背景に設定しています。

これらのクラス名は、スクリプト内で設定されていますので、jquery.cheat-code.jsを開いてソースから直接変更できます。

実はこのコナミコマンドは公式サイトでも使われていたりします。例えばコナミのラブプラス公式サイトのトップページでこの隠れコマンド「↑↑↓↓←→←→ba」を入力すると隠れイベントが発生します。
（※音がなりますので、仕事中などには閲覧注意。）
→　日本男子ラブプラス化計画　http://www.konami.jp/loveplus/

どのように利用するかはアイデア次第ですが、遊び心をくすぐる機能ですよね。

最後にサンプルのソースを書いておきます。どうぞご参考まで。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>コナミコマンド入力でメッセージを表示させるjQueryプラグイン「Cheat Code」サンプル</title>

<link rel="stylesheet" href="css/sample.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cheat-code.js"></script>
<script type="text/javascript">
	$(document).cheatCode({ 
		code : '38,38,40,40,37,39,37,39',
		message : 'Hello !!'
	});
</script>
</head>

<body>
<p>隠しコマンド　↑↑↓↓←→←→</p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>コナミコマンド入力でメッセージを表示させるjQueryプラグイン「Cheat Code」サンプル</title>

$(document).cheatCode({

code : '38,38,40,40,37,39,37,39',

message : 'Hello !!'

});

</script>

</head>

<body>

<p>隠しコマンド　↑↑↓↓←→←→</p>

</body>

</html>

CSS

/* CSS Document */
.overlay {
	position: absolute;
	top: 50px;
	right: 20px;
	bottom: 20px;
	left: 20px;
	opacity: 0.9;
	filter: alpha(opacity=90);
	width: 500px;
	height: 552px;
	background-image: url(miku_sd.jpg);
}
.modal {
	position: absolute;
	top: 150px;
	left: 30%;
	color: #000;
	font-size: 30px;
}

/* CSS Document */

.overlay {

position: absolute;

top: 50px;

right: 20px;

bottom: 20px;

left: 20px;

opacity: 0.9;

filter: alpha(opacity=90);

width: 500px;

height: 552px;

background-image: url(miku_sd.jpg);

}

.modal {

position: absolute;

top: 150px;

left: 30%;

color: #000;

font-size: 30px;

}

あわせてお読みください

facebookのようにリンク先のURLを入力するとリンク先の情報が表示されるjQueryプラグイン「Link Scraper TextBox」

Link Scraper TextBox - Jquery Plugin facebookでは投稿欄にURLを入力するとそのリンク先の情報が自動的に取得されて…

ページをめくる効果が美しい。雑誌や本のようにリアルにページをめくれるjQueryプラグイン「turn.js」

ページをめくり効果が美しい。雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」

turn.js 以前、画像を本をめくれるようにみれるjQueryプラグインである「FlipPage」をご紹介しましたが、今回ご紹介する「turn.js」はまるで…

まるでワープロ入力しているかのようにテキスト文章をアニメーションさせるjQueryプラグイン「jquery.jaticker.js」

今回ご紹介するのは、まるでその場で誰かが文章を入力しているかのようにテキストを表示するjQueryプラグイン「jquery.jaticker.js」です。サン…

ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ちょっと楽しいおすすめのサンプル

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

コナミコマンド入力でメッセージを表示させるjQueryプラグイン「Cheat Code」

【コナミコマンド入力でメッセージを表示させるjQueryプラグイン「Cheat Code」サンプル】

あわせてお読みください

コメントを残すコメントをキャンセル

ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ちょっと楽しいおすすめのサンプル

人気記事ランキング

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

コナミコマンド入力でメッセージを表示させるjQueryプラグイン「Cheat Code」

【コナミコマンド入力でメッセージを表示させるjQueryプラグイン「Cheat Code」サンプル】

あわせてお読みください

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル