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秒