JavaScriptで掛け算ゲーム

説明

20秒の間にできるだけ沢山九九のクイズに正解する、というだけのゲーム。
とりあえず遊べる、くらいにはなったが、もうすこしデザインやゲームオーバー処理を作りこむ必要がある。

ゲーム

× =

スコア: 0点
経過時間: 0.0秒

ソースコード

<p><input type="button" value="Start" onclick="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" onKeyPress="jedge();">
</form>

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

<script>
var startTime;
var timecounter;
var score = 0;

function start(){
  score = 0;
  document.getElementById("score").innerHTML = score;
  startTime = (new Date()).getTime();
  timer();
  document.form1.c.focus();
  genProblem();
}

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

function genProblem(){
  document.getElementById("a").value = Math.floor(Math.random() * 9) + 1;
  document.getElementById("b").value = Math.floor(Math.random() * 9) + 1;
  document.getElementById("c").value = "";
}

function jedge(){
  if(window.event.keyCode == 13){
    // a, b, cの値を取得する
    a = Number(document.getElementById("a").value);
    b = Number(document.getElementById("b").value);
    c = Number(document.getElementById("c").value);

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

function gameover(){
  document.getElementById("a").value = "";
  document.getElementById("b").value = "";
  clearTimeout(timecounter);
  alert("あなたのスコアは"+score+"点です!");
}
</script>