以前より作ってみたかった「コナミコマンド」スクリプトを、時間が空いたところで作ってみました。
コナミコマンドは「↑↑↓↓←→←→BA」と入力する、ファミコン世代の懐かしコマンドです。
ページにコナミコマンドを仕込んでみる
キーボードから入力されたキーは、Javascriptにて「キーコード」と呼ばれる数値に置き換えることが可能です。
スクリプト上に規定のキーコードを用意しておき、入力されたキーと合致するとアクションを起こす、という具合にすれば実現できそうな感じです。
konamiCmd.js デモ
![]()
![]()
jQueryでコナミコマンドスクリプトを作ってみる
このページはブログ『Wataame Frog』の「【JS】「コナミコマンド」入力でアクションを起こすスクリプトを作ってみた」という記事のサンプルです
lightning-bolt.xyz
キモは『合致するかどうかの判定』で、あとはキーコードを調べるだけでほとんど出来上がったようなものです。
必要なキーとキーコードを整理するとこのようになります。
| キー | ↑ | ↓ | ← | → | B | A |
|---|---|---|---|---|---|---|
| コード | 38 | 40 | 37 | 39 | 66 | 65 |
ということで、以下に出来上がったスクリプトを紹介してみます。
スクリプト
jQuery必須です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
$(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); }); } |
|
1 2 3 |
<div class="konamiHideBox hide"> <p>コナミコマンド成功</p> </div> |
↑任意の位置に記述します
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.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 |
