IIPPON に使われているキーを押してみよう
IPPONグランプリの IPPON に使われているキー
I P O N
を全て同時に押してみてください。
（パソコンでどうぞ）
...画像が出てくるだけです。笑
アインシュタイン稲田さんの回答が面白かったから
2020/6/13 OA IPPONグランプリのお題、
キーボードのキーを全部同時に押したらどうなる？
（パソコンの全ボタンを一斉に押したら？）のアインシュタイン稲田さんの答えが面白かったので、やってみたくなって作ってみました。
全キーはいろんなショートカット系の関係上がありそうなので、最初はIPPON GRAND PRIX に使われているキーを全ておしたら！
にしたかったんですが、チェックに時間がかかるのか、タイムラグが出てきたので4文字で我慢。
このページでIPONを同時に押すと、画像がモーダルで表示される。（ただそれだけです）
キーボードのキーを複数同時に押している状態の判定
JSで同時に複数のキーボードが押されている状態を判定する。
っていう手段は、専用の変数準備などしている記事もありましたが、ステータスの真偽を&&すればシンプルに実現できました。
途中でハマったのは、取得するキーコード。
keypress を使うのかと思っていたら、プレスしている状態は keydownを使うようです。
keycode調べるサイトも便利でしたが、JSの途中にコンソールログ↓こんなので取れるようにするとデバッグも楽でした。
console.log(e.keyCode);
*Macでしか確認していません。
実装コード（JavaScript）
やってみたかっただけなんですが、これってJSだけで、ライブラリも使ってないので、気軽に応用できそうだなと思います。
今回は条件が揃ったらモーダルを表示させましたが、ここの処理を変えたら、クイズや暗号をプレスしてもらったら、別のページを開くとか、ヒントを表示するとか。
このページでの実装コードはこちらです。キーボードで複数のキープレスを判定して動かしたい人がいれば、サンプルの一つとして！
document.onkeydown = pressFunction;
document.onkeyup = releaseFunction;
var keyStatus = {}; //keyのステータス
//keyが押された時
function pressFunction(e) {
keyStatus[e.keyCode] = true;
if (keyStatus[73] && keyStatus[80] && keyStatus[79] && keyStatus[78]) {
//keydownの時のステータスが全て揃ったら なので &&でつなげる
//keyStatus[73] -> Iのコード
//keyStatus[80] -> Pのコード
//keyStatus[79] -> Oのコード
//keyStatus[78] -> Nのコード
popupImage(); // 実行させる処理を呼び出し（今回は別でfunction定義してます）
}
}
//keyが離された時
function releaseFunction(e) {
keyStatus[e.keyCode] = false;
}
ありがとうございました
JSでやれそう！やってみよう！とあまり根拠もなく番組の途中で思い立って始めたので、エンジニアでもプログラマでもないので当然のように途中でいき詰まります。検索で出てきたいろんなサイトや、番組見てたのに急に相談されてろくに番組に集中できなくなった被害にあったAさん、ごめんなさい。ありがとう。
参考にしたサイト
- JavaScriptでモーダル（ポップアップ）を表示させる方法
- JavaScript - HTML キーの同時押し｜teratail（なぜかPCからアクセスできなかったので、タイトルだけ記載）
- keyコード調べるのに便利だったサイト https://web-designer.cman.jp/javascript_ref/keyboard/keycode/
- ブラウザだとループしないアニメーションgifを無限loopに変換した便利サイト
使った画像はこちら（Canvaで作った アニメーションgif）
コメントをお書きください