HTML

JavaScriptでウェブページに隠しコマンドを実装する方法

 
目次
  1. デモンストレーション
  2. サンプルコード
  3. プログラム解説

デモンストレーション

まずはデモンストレーションです。

 

PCの方は、キーボードで「↑↑↓↓←→←→BA」と入力してみてください。

アラートが表示されます。

 

 

サンプルコード

<script>
    // 隠しコマンドの定義
    const command = [
        "ArrowUp", // ↑
        "ArrowUp", // ↑
        "ArrowDown", // ↓
        "ArrowDown", // ↓
        "ArrowLeft",
        "ArrowRight",
        "ArrowLeft",
        "ArrowRight",
        "b",
        "a"
    ];

    // ユーザー入力を格納する配列
    let userInput = [];

    // キーボードのキーが押されたときに呼び出される関数
    document.addEventListener("keyup", function (e) {
        // ユーザー入力を配列に追加する
        userInput.push(e.key);

        // 配列の長さを制限することで、最新のユーザー入力だけを保持する
        userInput.splice(-command.length - 1, userInput.length - command.length);

        // ユーザー入力が隠しコマンドと一致する場合にアラートを表示する
        if (JSON.stringify(userInput) === JSON.stringify(command)) {
            alert("hello!");
        }
    })
</script>

 

プログラム解説

最初にcommandという配列を定義しています。

この配列にキーの組み合わせを定義しておきます。このキーが順番に押された場合に隠しコマンドが発動されます。

こちらのサイトJavaScript Key Code Event Toolでキーコードの名前を確認できます。

 

userInput配列は、ユーザーからの入力を格納するために使用します。

 

document.addEventListener()で、キーボードのキーが押されたときに呼び出される関数を定義します。

この関数は、キーボードのキーが押されたときに呼び出される関数です。

この関数では、以下のことが行われます。

  1. 押されたキーをuserInput配列に追加する。
  2. userInput配列の長さを制限することで、最新のユーザー入力だけを保持する。
  3. JSON.stringify()関数を使用して、userInput配列がcommand配列と一致するかどうかを確認する。
  4. 一致する場合にアラートを表示する。

 

ぜひご利用下さい！

関連記事