【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

: 【JS】タイトルタグを利用したツールチッププラグイン「jquery.tgHoverToolTip」をjQueryで作ってみた

以前作成したツールチップを拡張し、クリックではなくマウスオーバーでポップアップするようにしてみました。クリック版ではリンクタグを利用していたためにボタンに埋め込んだりは出来なかったのですが、titleタグを利用する形式にしたため、リンクの他にも使えるようにもなっています。

: 【jQuery】複数対応！テキストエリアの文字数をカウントするスクリプト

複数個のテキストエリアに対し文字数をカウント、文字数をリアルタイムで表示する事になったので、スクリプトを組んでみました。

: 時刻入力の入力補助として便利な「jQuery ClockPick」を使ってみる。

時刻を入力させるフォーム、プルダウンで作っても良かったのですが、ちょっとオシャレ(？)にjQueryの入力補助ライブラリ「ClockPick」を使ってみました。

: ブラウザごとに異なるCSSのclassを付与する仕組みをjQueryで作ってみた。

ブラウザごとに異なるCSSのclassを付与し、見た目を変えてみる仕組みをjQueryを使って作ってみました。

: 【JS】選択済みのチェックボックスの個数をカウントするスクリプトをjQueryで組んでみた

選択されているチェックボックスの個数を取得して表示させたいというリクエストを受けましたので、Javascript（jQuery）を使用して作成してみました。スクリプトの解説をしつつ、いつの日かまた使うことがあると思うので、備忘録をかねてご紹介します。

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

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

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

スクリプト

キーコード一覧

英数字キー

ファンクションキー

テンキー

特殊キー

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

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

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

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

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (129,049)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (128,100)

キー	コード
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