スポンサーリンク
デモンストレーション
まずはデモンストレーションです。
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()
で、キーボードのキーが押されたときに呼び出される関数を定義します。
この関数は、キーボードのキーが押されたときに呼び出される関数です。
この関数では、以下のことが行われます。
- 押されたキーを
userInput
配列に追加する。 userInput
配列の長さを制限することで、最新のユーザー入力だけを保持する。JSON.stringify()
関数を使用して、userInput
配列がcommand
配列と一致するかどうかを確認する。- 一致する場合にアラートを表示する。
ぜひご利用下さい!
スポンサーリンク