jQueryのアニメーションを使ってカジュアルゲームを作ってみる

JavaScriptは以前に少しだけいじったことがありましたが，なんとなく書き方がややこしくて頓挫してしまった覚えがあります．
ただ，jQueryを使ってみたら，今までのイメージを覆すくらいJavaScriptをラクチンに感じました．
以下はjQueryを使って簡単なクリック型のカジュアルゲームを作ってみた例です．

jsdo.itに置いていたのですが，ちゃんと自分の作ったものを一元管理して置けるようにサーバをレンタルして，そこに移しました．

ゲームソース - Find Me -

http://glass5er.sitemix.jp/apps/findme

JavaScript, CSS, htmlあわせて250行ほどで書けました．
もっと書き方がわかってくれば，半分くらいのコード量でできるのかもしれません．

ゲーム内容

並べられた画像のなかから1つだけ違うものを探してクリックするゲームです．
正解をクリックすると点数が入り，制限時間内に何pt取れるかチャレンジする形式です．
詳細は少し遊んでもらえればわかると思います．
制限時間は，自分が調子のいいときに200pt取れるくらいを目安に設定しました．

jQueryの使用

やっていることは，htmlファイル内でタグ付けした要素に対して
CSSの属性をいじったり，アニメーションさせたりといった無いようです．
jQueryだと要素へのアクセスが下記のような記述で簡単に行えるのがいい感じです．

$("ELEMENT").process

ELEMENTのところは，#idやclassなどを設定します．
processのところは，cssやslideDownなど，jQueryのAPIに実装された関数を呼び出します．
詳しくは下記で調べて使いました．
http://semooh.jp/jquery/
slideDownやhideは非常に便利ですね．巷では常識なのかもしれませんが．．．

JavaScriptソース

JavaScriptのソースを以下に載せます．
ほかにも色々つくってみたいです．

var total_point = 0;
var timer_limit = 600;
var timer_enable = false;
var timer_current = 0;
var timer_initialized = false;
var title_text = " - Find Me - ";
var prev_ans = 0;

$(function() {
  //  @FIRST : show title  //
  title();
});

function title()
{
  timer_initialized = false;
  timer_enable = false;
  total_point = 0;
  //  init point  //
  $("#point").text(total_point+" pt");
  //  set title  //
  $("#title").text(title_text).show();
  //  set start button  //
  $("#button").text("start")
    .unbind().click(function(){
      $("#title").hide();
      //  start game  //
      if(!timer_initialized) {
        mainframe();
        //  set timer veriables  //
        timer_initialized = true;
        timer_enable = true;
        timer_current = timer_limit;
        //  set timer image  //
        $("#bar_f").css("height", "100%").css("background","#a0e0a0");
        $("#button").css("-webkit-opacity","0");
        timerCountDown();
      }
    });
}

function timerCountDown()
{
  var timer_id = 0;
  timer_current -= 1;
  //  time over -> disable timer  //
  if(timer_current <= 0) {
    timer_enable = false;
    window.clearTimeout(timer_id);
  }
  //  enable timer  //
  if(!timer_enable) {
    //  init  //
    $("#bar_f").css("width", "100%").css("height", "auto").css("background","none");
    $("#button").css("-webkit-opacity","1.0");
    result();
  }else{
    //  count down  //
    $("#bar_f").css('width', parseInt(100*timer_current/timer_limit,10)+"%");
    timer_id = window.setTimeout(timerCountDown,50);
  }
}

function mainframe(){
  //  show point  //
  $("#point").text(total_point+" pt");
  //  reset stage propaties  //
  $("#stage *").hide();
  $("#stage td").removeClass("raw")
    .removeClass("sel")
    .addClass("uns");
  //  calc answer index (random)  //
  var elem_num = $("#stage td").size();
  var ofst = parseInt(Math.random()*(elem_num-1),10) + 1;
  var ans_idx = (prev_ans + ofst);
  if(ans_idx >= elem_num) ans_idx -= elem_num;
  //  set answer symbol (image)  //
  $("#stage td:eq("+ans_idx+")").removeClass("uns")
    .addClass("sel");
  //  animation  //
  $("#stage *").slideDown("slow");
  prev_ans = ans_idx;
  //  add action lister  //
  listener();
}

function listener(){
  //  when clicked  //
  $("#stage td").click(function(){
    var $this = $(this);
    //  if this==answer -> get point  //
    if($this.hasClass("sel")) {
      total_point += 10;
      mainframe();
    }
  });
}

function result() {
  //  hide stage  //
  $("#stage *").hide();
  $("#title").text("your score : "+ total_point + " pt")
    .show();
  //  reset button  //
  $("#button").text("reset")
    .unbind().click(title);
}