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

デモンストレーション

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

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

キーが押された時に検知する

document.addEventListener()で、キーが押された時に実行するプログラムを定義できます。

この関数では、以下のことを行います。

以上です。