javascriptでコナミコマンドを実装する

javascript

コナミコマンドをうつと隠しオプションがでてくる、という機能が実装されたサイトをたまに見かけます。例えばGoogle Readerではコナミコマンドをうつと忍者スキンになったり、jQueryのトップページではコナミコマンドをうつとJavaScript Rock Starとかいうページにとばされますｗ

このコナミコマンドを実装してみたいと思って検索してみたらどうやらjavascritで簡単に実装できるようです。ということで、javascriptでコナミコマンドを実装する方法のメモです。ちなみに、http://n-styles.com/main/archives/2007/07/26-033445のコードをほとんどお借りしただけです＞＜

Step1: konamicode.jsファイルを用意する

konamicode.js

var konamiFlag = 0; //状況判断フラグ
function konamiCode(konamiKey){
    if (konamiKey == 38 & konamiFlag == 0){//上
        konamiFlag = 1;
    }else if (konamiKey == 38 & konamiFlag == 1){//上
        konamiFlag = 2;
    }else if (konamiKey == 40 & konamiFlag == 2){//下
        konamiFlag = 3;
    }else if (konamiKey == 40 & konamiFlag == 3){//下
        konamiFlag = 4;
    }else if (konamiKey == 37 & konamiFlag == 4){//左
        konamiFlag = 5;
    }else if (konamiKey == 39 & konamiFlag == 5){//右
        konamiFlag = 6;
    }else if (konamiKey == 37 & konamiFlag == 6){//左
        konamiFlag = 7;
    }else if (konamiKey == 39 & konamiFlag == 7){//右
        konamiFlag = 8;
    }else if (konamiKey == 66 & konamiFlag == 8){//B
        konamiFlag = 9;
    }else if (konamiKey == 65 & konamiFlag == 9){//A
        //ここにコナミコマンドが成功したときの処理を書く
        alert('新トップページ記念');
        location.href = "http://m.www.yahoo.com/";
        //ここまで
        konamiFlag = 0;//フラグ戻す
    }else if(konamiKey == 38){//操作ミス
        konamiFlag = 1;
    }else{//操作ミス
        konamiFlag = 0;
    }
}

Step2: htmlファイルのタグ内にjsファイルを読み込む記述をする

※ファイルの場所の指定は適宜置き換えてください

<head>
<script type="text/javascript" src="konamicode.js"></script>
</head>

Step3: htmlファイルのタグの開始タグを以下のように記述する

bodyタグにキーボードのキーが押し下げられたときのイベントハンドラを追加します。

<body OnKeyDown="konamiCode(event.keyCode);">
</body>

以上、Step1〜Step3をするだけで簡単にコナミコマンドが実装できます。javascriptのコードは配列とか使ってもっとスマートに書けるようですが、それはもう少しjavascript勉強してからの今後の課題にしたいと思います...

サンプルページ
その他
  • 無知なのでおかしな所あるかもしれません。つっこみ大歓迎ですのでもし何かありましたらよろしくお願い致します。
Reference