【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】jQueryUIのカレンダー(Datepicker)から生年月日を選択すると年齢（と経過月)をリアルタイムに表示するスクリプトを組んでみた

生年月日（年/月/日）を選択すると、リアルタイムで通算の年齢と年月日を表示させるスクリプトが必要になったので、せっかくなので勉強含みで自分で組んでみました。

: 【JS】jQueryとCSSで作る「ハンバーガーメニュー」を少しリニューアルしてみました

以前作成したjQueryとCSSで作る「ハンバーガーメニュー」に少し手を入れて、もうちょっとだけ使えるものにしてみましたのでご紹介したいと思います。

: 【jQuery】下方へスクロールしたらトップへ戻るボタンを表示して、スムーズにページトップへ帰るスクリプトを組んでみた

下スクロールでふわっと表示させ、クリックすると上部へスルスルっと戻って消えるというスクリプトを組んでみました。戻るボタンもテキストではなく画像にし、ファイル名末尾に「_on」をつけた画像で差し替えも行なっています。

: 【JS】jQueryで画像のみマウスの右クリックを出来ないようにするスクリプトを組んでみた

画像の上でマウスの右クリック（コンテクストメニューの表示）が出来ないようにするスクリプトをjQueryを使って作成したので、紹介します。

: 【JS】JavascriptのsetInterval()を使ってストップウォッチを作ってみる

一定時間ごとに処理を行う、JavascriptのsetInterval関数を使ったストップウォッチを作ってみましたので、その備忘録を兼ねたポストです。

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

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

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

スクリプト

キーコード一覧

英数字キー

ファンクションキー

テンキー

特殊キー

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

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

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

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

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

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

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