barutanGNE's blog

kindleで読んだ本の感想や、プログラミングに関する記事など。

jQueryで掛け算ゲーム

ソースコード

<p><input type="button" value="Start" id="start"></p>

<form name="form1">
  <input type="text" id="a" size="10" value=""> × <input type="text" id="b" size="10" value=""> = <input type="text" name="c" id="c" size="10">
</form>

<p>スコア: <span id="score">0</span>点
経過時間: <span id="time">0.0</span></p>

<script>
$(function() {

var startTime;
var timecounter;
var score = 0;

$("#start").click( function() {
    init();
})

function init(){
  score = 0;
  $("#score").text(score);
  startTime = (new Date()).getTime();
  timer();
  document.form1.c.focus();
  genProblem();
}

function timer(){
  displayTime = (new Date()).getTime() - startTime;
  $("#time").text( (displayTime / 1000).toFixed(1) );
  timecounter = setTimeout(timer, 100);
  if (displayTime >= 1000 * 20){
    gameover();
  }
}

function genProblem(){
  $("#a").val( Math.floor(Math.random() * 9) + 1) ;
  $("#b").val( Math.floor(Math.random() * 9) + 1) ;
  $("#c").val("");
}

$("#c").keypress(function(ev){
  if(ev.keyCode == 13){
    // a, b, cの値を取得する
    a = Number( $("#a").val());
    b = Number( $("#b").val());
    c = Number( $("#c").val());    

    // 正解ならば、scoreに10点を加算し、次の問題を生成する
    if(a*b == c){  
      score += 10;
      $("#score").text(score);
      genProblem();
    }
    // 不正解ならば、回答欄をクリアする
    else{ $("#c").val("");}
  }
})

function gameover(){
  $("#a").val("");
  $("#b").val("");
  clearTimeout(timecounter);
  alert("あなたのスコアは"+score+"点です!");
}

})
</script>

書き換え例

JavaScript: document.getElementById("score").innerHTML = score;
jQuery:     $("#score").text(score);

JavaScript:  a = Number(document.getElementById("a").value);
jQuery:      a = Number( $("#a").val());

やっぱり、簡潔になるなぁ。
jQueryでもう少し見た目も改善したい。

実行


× =

スコア: 0
経過時間: 0.0