By U Zensen.

欲しいものはプログラミングで自分で作る。

WEBページにJavaScriptで隠しコマンドを設置する方法!!

2016 / 6 / 28
JavaScript
javascriptでコナミコマンド

はじめに!!

こんにちは!ぴーすけです!

久しぶりに技術ネタを書きたいと思います!

いきなりですが、みなさんは「コナミコマンド」を知っていますか?

コナミコマンドとは、コナミが発売しているゲーム中に登場する隠しコマンドで、代表的なものではグラディウスというゲームに存在する隠しコマンドです。

代表的なコマンドは「上上下下左右左右BA」

ゲーム内でこのコマンドを押すことにより、様々なアクションが起こります。コナミの遊び心ですね。

この記事ではWEBページ上に隠しコマンドを設置する方法をご紹介します!

スポンサードリンク

上上下下左右左右BA

このページにコマンドを隠しているので、上記のキーを順に入力してみてください!

JavaScriptだけで実装!!

JavaScriptのみ

(function() { //入力されたキーを保存する var inputKey = []; //入力されたキーと比較する隠しコマンド //38 = 上 //40 = 下 //37 = 左 //39 = 右 //66 = B //65 = A var konamiCommand = [38,38,40,40,37,39,37,39,66,65]; //画面上のキー入力イベントリスナ document.addEventListener('keyup', function(e) { //キー入力を配列に追加 inputKey.push(e.keyCode); //キー入力が保存された配列と隠しコマンドを比較 if (inputKey.toString().indexOf(konamiCommand) >= 0) { //隠しコマンド成功時の何らかの処理 //キー入力を初期化 inputKey = []; } }); }());

jQueryで実装!!

jQuery

$(function() { //入力されたキーを保存する var inputKey = []; //入力されたキーと比較する隠しコマンド //38 = 上 //40 = 下 //37 = 左 //39 = 右 //66 = B //65 = A var konamiCommand = [38,38,40,40,37,39,37,39,66,65]; //画面上のキー入力イベントリスナ $(window).keyup(function(e) { //キー入力を配列に追加 inputKey.push(e.keyCode); //キー入力が保存された配列と隠しコマンドを比較 if (inputKey.toString().indexOf(konamiCommand) >= 0) { //隠しコマンド成功時の何らかの処理 //キー入力を初期化 inputKey = []; } }); });

実装について!!

画面にキー入力のイベントリスナを設定し、キー入力を変数に保存します。そして、用意しておいた隠しコマンドと入力されたキーを比較し、隠しコマンドが押されていた場合に処理を走らせるという挙動になっています。

変数「konamiCommand」の中を変更すればいろいろなコマンドを隠しておくことができるので、試してみてください!

JavaScriptだけの実装とjQueryを使った実装の違いはキー入力のイベントリスナの設定方法だけです。他の処理は同じになっています。一応上記のコードをコピペすれば動くはずです!jQueryの場合には、別途jQueryを読み込む必要があります。

まとめ!!

WEBページにコナミコマンドを設置するのは以外と簡単だあ!!

Pocket

コメント

コメントを残す