Help us understand the problem. What is going on with this article?

初めてのJavaScript ~コナミコマンドをやってみた~

More than 5 years have passed since last update.

初めての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!!”のフォントサイズが5倍になるようにしました。

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(コナミコードのまとめサイトです。)

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away