未分類

【カッコいいサイト制作】コナミコマンドの紹介 Javascript

更新日:

コナミコマンドって知っていますか?

上上下下左右左右BAってやつです。

有名なコマンドですよね。

これをjavascriptで再現できるプラグインを紹介したいと思います。

 

どんなことができるの?

埋め込んだページで特定のキーを入力した場合に、アクションを起こすことができます。

例えば、ホーム画面で特定のコマンドを入力したら、管理者画面へ移動するなど。

わくわくするような機能を実装できます。

 

参考コード

$(function() {
//入力されたキーを保存する
var inputKey = [];

//入力されたキーと比較する隠しコマンド
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配列変数に格納されている値は、キーと関連付けられた数字です。

例えば、38は上矢印。

40は下矢印を表しています。

その他のキーを確認したい場合は、こちらをどうぞ

http://faq.creasus.net/04/0131/CharCode.html

 

追記

当サイトにもコナミコマンドを実装しました。

サンプルで実装するのが目的だったので、あまり意味のない機能ですが、「top」とキーボードで入力すると、トップページへ移動することができます。

-未分類

Copyright© エンジニアの階段 , 2019 All Rights Reserved Powered by STINGER.