初めてのJavaScriptということで、コナミコマンドを入力するとテキストのサイズが大きくなるという機能を実装しなさいという課題に取り組みました。
そもそもコナミコマンドってなんぞや。
コナミコマンドとは、いわるゆゲームでは定番の隠しコマンドの俗称です。代表的なコマンド「↑↑↓↓←→←→BA」というのがあり、今回はこのコマンドを使用しました。
以下がソースコードです。
konami.html
<html>
<head>
<script src="http://code.jquery.com.jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="target">Target!!</div>
<script type="text/javascript">
var input = [];
konami = [38,38,40,40,37,39,37,39,66,65];
$(window).keyup(function(e){
input.push(e.keyCode);
if (input.toString().indexOf(konami) >= 0)
{
$("div#target").css("fontSize","500%")
input = [];
}
});
</script>
</body>
</html>
入力されたキーのコードをinputという変数に格納し、inputの配列とkonamiというコナミコマンドのキーコードを格納している配列を比較し、合致したらdiv内の”Target!!”のフォントサイズが５倍になるようにしました。
konami.html
konami = [38,38,40,40,37,39,37,39,66,65];
コナミコマンドを各キーに割り振られているキーコードで表示するとこのようになります。
今回、はじめてのJavascriptというのもそうなのですが、はじめてjQueryも書きました。（本当に少しですが、、、笑）
そもそも当初、アクション部分もJavescriptで以下のように書いていました。
konami.html
var target = document.getElementById("text").innerHTML;
target.style.fontSize = "500%";
がしかし、せっかく関数が始まるところで$つかってるので、ここもjQueryで書いてみました。
konami.html
$("div#target").css("fontSize","500%")
一行にすっきりとまとまりました。笑
自分のやり方以外にも様々なやり方があり、いまではCheet.jsやkonami.jsといった簡単にコナミコマンドを実装できるプラグインもありますので、試してみてはいかがでしょう？
最後にコナミコマンドが実装されているサイトをご紹介します。
・Twitter
・Facebook
・Digg
・Geek & Hype（面白かったです笑）
・konamicodesite(コナミコードのまとめサイトです。)