【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で組んでみた

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

: jQueryのtoggleSlideを使ってみる

ボタンやリンクなどをクリックしたら、みょいーんとDIVやらpで括ってた部分を表示させるというのを実装する、jQuery のtoggleSlideを使う方法。これも検索頻度の高いものなので、自分のメモとして残しておきます。

: 【jQuery】JSONデータをフィルタリングして指定のフォームに項目として表示させる方法

データベースから取得したレコードをPHPでJSONデータ化し、javascriptでフィルタしてフォームに表示させる方法を試行錯誤してみたので、ご紹介。

: 【JS】定義リスト/記述リスト（dl, dd）タグの個数をカウントするスクリプトをjQueryで作ってみた

このブログの一番人気記事である「三文字略語」のページには現在何個の略字を載っけたのか数えたくなったのですが、いちいち自分で数えるのもバカらしく感じたのでプログラムにやらせてみようと作ってみました。

: 【JS】スクロールしたら画面途中にあるグローバルナビを画面上部に固定する方法

トップページなどで、動画や画像コンテンツの下に配置してあったグローバルナビを、スクロールしたら画面上部に固定して表示するスクリプトを作成したので、備忘録を兼ねて紹介します。

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

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

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

スクリプト

キーコード一覧

英数字キー

ファンクションキー

テンキー

特殊キー

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

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

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

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

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

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

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