WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

コナミコマンド

デモ
http://efu.sakura.ne.jp/web/konami-command/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>コナミコマンド</title>
</head>
<body>
  <p>↑↑↓↓←→←→BA」を入力してください。</p>
  <p class="text"></p>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="./script.js"></script>
</body>
</html>
$(function(){
  var key_code = "";
  var index = 0;
  var clear_key;
  var code = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
  $(window).keydown(function (a) {
    clearTimeout(clear_key);
    key_code += a.keyCode;
    console.log(a);
    console.log(a.key);
    console.log(a.keyCode);
    console.log(key_code);
    if (a.keyCode === code[index]) {
      index++;
      if (key_code == "38384040373937396665") {
        $('.text').append('コナミコマンドを打ちました。');
        index = 0;
        key_code = ""
      }
    } else {
      index = 0;
      key_code = ""
    }
    //3秒後に初期化
    clear_key = setTimeout(function () {
      index = 0;
      key_code = ""
    }, 3000);
  });
});

.keydown() キーを押した時のイベント

.keyup() キーを押して上がった時のイベント

.keypress() キーが押された時のイベント

キーコード

数字 キーコード
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
0 48
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
広告を非表示にする