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

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

: 多角レーダーチャートを作成する「Jquery Canvas Chart」を使ってみた。

作成しているシステムのとある一覧画面に、得点に応じたチャート図をつけて欲しいとの依頼があったので、色々と調べてみたのですが、「Jquery Canvas Chart」が簡単でわかり易かったのでご紹介。

: 【jQuery】タブの切替スクリプトを作成してみました

jQueryの練習で何かを作ってみようということで、yahooトップページのトピックスに使われているような、タブの切替を作ってみました。

: 【jQuery】3つのプルダウンを連動させるプラグイン『jquery.tgHierSelect』を作ってみた

複数（今回は３つ）のプルダウンメニューを連動させ選択内容を変更させる、いわゆる「連動プルダウン」のプラグインをjQueryで作ってみました。

: 【JS】jQueryでリストタグ（<li>）のテキストを取得する方法

リストタグに設定されているテキストを取得するjQueryのスクリプトです。絶対にまた調べることになると思うのでその部分だけを忘備録として書いておきます。

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

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

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

スクリプト

キーコード一覧

英数字キー

ファンクションキー

テンキー

特殊キー

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

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

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

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

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

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

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