【JS】「コナミコマンド」入力でアクションを起こすスクリプトを作ってみた

2018/11/30

以前より作ってみたかった「コナミコマンド」スクリプトを、時間が空いたところで作ってみました。
コナミコマンドは「↑↑↓↓←→←→BA」と入力する、ファミコン世代の懐かしコマンドです。

ページにコナミコマンドを仕込んでみる

キーボードから入力されたキーは、Javascriptにて「キーコード」と呼ばれる数値に置き換えることが可能です。
スクリプト上に規定のキーコードを用意しておき、入力されたキーと合致するとアクションを起こす、という具合にすれば実現できそうな感じです。

キモは『合致するかどうかの判定』で、あとはキーコードを調べるだけでほとんど出来上がったようなものです。
必要なキーとキーコードを整理するとこのようになります。

キー	↑	↓	←	→	B	A
コード	38	40	37	39	66	65

ということで、以下に出来上がったスクリプトを紹介してみます。

スクリプト

jQuery必須です。

$(function() {
    // 入力キー配列
    var inputedCmd = [];

    // コナミコマンド配列 [↑, ↑, ↓, ↓, ←, →, ←, →, B, A]
    var konamiCmd = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];

    // キーアップで発動
    $(window).keyup(function(e) {
        // 入力されたキーコードを入力キー配列へ追加
        inputedCmd.push(e.keyCode);

        // 入力されたキーが正しいかを判定
        if (inputedCmd[inputedCmd.length - 1] != konamiCmd[inputedCmd.length - 1]) {
            // 入力を間違えた場合、入力キー配列を初期化
            inputedCmd = [];

        } else if (inputedCmd.length == konamiCmd.length) {
            // コナミコマンドによる処理実行！
            konamiCommandAction();

            // 処理後、入力キー配列を初期化
            inputedCmd = [];
        }
    });
});


// アクション関数
function konamiCommandAction() {
    // コナミコマンド入力時に発動させたいアクションを記述
    $(function(){
        $('.konamiHideBox').stop().removeClass('hide').animate({'marginRight':'450'},200).delay(200);
    });
}

$(function() {

// 入力キー配列

var inputedCmd = [];

// コナミコマンド配列 [↑, ↑, ↓, ↓, ←, →, ←, →, B, A]

var konamiCmd = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];

// キーアップで発動

$(window).keyup(function(e) {

// 入力されたキーコードを入力キー配列へ追加

inputedCmd.push(e.keyCode);

// 入力されたキーが正しいかを判定

if (inputedCmd[inputedCmd.length - 1] != konamiCmd[inputedCmd.length - 1]) {

// 入力を間違えた場合、入力キー配列を初期化

inputedCmd = [];

} else if (inputedCmd.length == konamiCmd.length) {

// コナミコマンドによる処理実行！

konamiCommandAction();

// 処理後、入力キー配列を初期化

inputedCmd = [];

}

});

// アクション関数

function konamiCommandAction() {

// コナミコマンド入力時に発動させたいアクションを記述

$(function(){

$('.konamiHideBox').stop().removeClass('hide').animate({'marginRight':'450'},200).delay(200);

});

}

<div class="konamiHideBox hide">
    <p>コナミコマンド成功</p>
</div>

<p>コナミコマンド成功</p>

</div>

↑任意の位置に記述します

.hide {
    display: none;
}

.konamiHideBox {
    position: absolute;
    right: 0;
    margin-right: -350px;
    margin-top: 50px;
    z-index: 9999;
    background-color: rgba(0,153,255,0.7);
    border-radius: 4px;
    text-align: center;
    width: 300px;
}

.konamiHideBox p {
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    padding: 1em 0;
}

.hide {

display: none;

}

.konamiHideBox {

position: absolute;

right: 0;

margin-right: -350px;

margin-top: 50px;

z-index: 9999;

background-color: rgba(0,153,255,0.7);

border-radius: 4px;

text-align: center;

width: 300px;

}

.konamiHideBox p {

color: #fff;

font-weight: bold;

font-size: 20px;

padding: 1em 0;

}

キーコード一覧

以下はおまけ。
せっかくなので、キーボードにあるキーのコードを纏めておきます。

英数字キー

キー	コード
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
A	65
B	66
C	67
D	68
E	69
F	70
G	71
H	72
I	73
J	74
K	75
L	76
M	77
N	78
O	79
P	80
Q	81
R	82
S	83
T	84
U	85
V	86
W	87
X	88
Y	89
Z	90

ファンクションキー

キー	コード
F1	112
F2	113
F3	114
F4	115
F5	116
F6	117
F7	118
F8	119
F9	120
F10	121
F11	122
F12	123

テンキー

キー	コード
0	96
1	97
2	98
3	99
4	100
5	101
6	102
7	103
8	104
9	105
*	106
+	107
-	109
.	110
/	111

特殊キー

キー	コード
BackSpace	8
Tab	9
Enter	13
Shift	16
Ctrl	17
Alt	18
PauseBreak	19
CapsLock	20
Esc	27
Space	32
PageUp	33
PageDown	34
End	35
Home	36
←	37
↑	38
→	39
↓	40
Insert	45
Delete	46
NumLock	144
ScrollLock	145
*、:	186
+、;	187
<、,	188
=、-	189
>、.	190
?、/	191
`、@	192
{、[	219
\|、\	220
}、]	221
~、^	222
_、\	226
Windows	91 or 92
メニュー	93

確かな力が身につくJavaScript「超」入門第2版

created by Rinker

SBクリエイティブ

-Javascript,jQuery

: スマホアプリでよく見る横から出てくるスライドメニューを実装できるjQueryのプラグイン「Sidr」。
スマホ向けサイトを作成の際、メニューをスマホアプリのように横から出したくなり探しました所、「Sidr」というプラグインを発見。

: 【JS】複数のフォームに同じ値を入力するスクリプトをjQueryで作ってみた
都道府県別の送料を指定するフォームに一括で同じ数値を入力する場合などを想定したスクリプトを作成したので紹介します。

: 【JS】ラジオボタンでブロックの開閉を制御するスクリプトをjQueryで組んでみた
大きいブロックが十数個並ぶようなページで、それぞれのブロックの頭にラジオボタンを置き、その選択値によってブロックを開閉するスクリプトが必要になったので、例によってjQueryで組んでみました。

: 【JS】HTML数値文字参照へエンコード、デコードするスクリプトをJavascriptで組んでみた
"あ" や "い" のような、HTML数値文字参照コードへ普通の文字を変換（エンコード）したり、逆にHTML数値文字参照コードから普通の文字へ変換（デコード）するスクリプトをJavascriptで作成してみましたのでご紹介。

: 【jQuery】連動プルダウン用プラグイン『jquery.tgHierSelect』をより簡単に設置できるようバージョンアップ
以前作成した「jquery.tgHierSelect」ですが、連動させるプルダウン数が増えた場合や、同じページに2個以上の連動プルダウンがある場合などに、かなり手を入れないと使えない状態だったので、それらを解決しつつ、オプションの記述もシンプルになるよう、バージョンアップしました。

PREV: 【モノ】Timberland フライロームトレイルオックスフォード DARK GREENを購入
NEXT: Windows版Apacheの「Apache monitor」のアイコンが表示されない時にApacheの再起動を行う方法

【JS】「コナミコマンド」入力でアクションを起こすスクリプトを作ってみた

ページにコナミコマンドを仕込んでみる

スクリプト

キーコード一覧

英数字キー

ファンクションキー

テンキー

特殊キー

【DIY】2x4や1x4など、SPF材サイズ早見表 (544,727)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (267,448)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (238,948)

【歴史】江戸幕府歴代将軍一覧 (140,513)

【JS】ハンバーガーメニューをjQueryとCSSで作成する方法 (117,126)

DELL製PCを復元ツール(イメージリカバリ)を使用して工場出荷時状態へ復元する方法 (115,236)

キー	コード
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
A	65
B	66
C	67
D	68
E	69
F	70
G	71
H	72
I	73
J	74
K	75
L	76
M	77
N	78
O	79
P	80
Q	81
R	82
S	83
T	84
U	85
V	86
W	87
X	88
Y	89
Z	90

キー	コード
F1	112
F2	113
F3	114
F4	115
F5	116
F6	117
F7	118
F8	119
F9	120
F10	121
F11	122
F12	123

キー	コード
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
A	65
B	66
C	67
D	68
E	69
F	70
G	71
H	72
I	73
J	74
K	75
L	76
M	77
N	78
O	79
P	80
Q	81
R	82
S	83
T	84
U	85
V	86
W	87
X	88
Y	89
Z	90

キー	コード
F1	112
F2	113
F3	114
F4	115
F5	116
F6	117
F7	118
F8	119
F9	120
F10	121
F11	122
F12	123

キー	コード
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
A	65
B	66
C	67
D	68
E	69
F	70
G	71
H	72
I	73
J	74
K	75
L	76
M	77
N	78
O	79
P	80
Q	81
R	82
S	83
T	84
U	85
V	86
W	87
X	88
Y	89
Z	90

キー	コード
F1	112
F2	113
F3	114
F4	115
F5	116
F6	117
F7	118
F8	119
F9	120
F10	121
F11	122
F12	123