2013/02/21
jQueryでTouch the Numbersを作ってみた
日々javascriptをちょっとずつ学んでいるところですが、
ドットインストールで、「数字当て」というプログラムをやり、
アプリのTouch the Numbersと似てる！と思い、実際に作成してみました。
こちらをどうぞ！
点数は減点方式で、
点数の保持なんかはできていないですが、
似たようにできると思います。
マウスだとやりにくいですね〜ｗ
実際のソースは以下になります。
html
|
1 2 3 4 5 | <p class="start">スタート</p> <ul class="number"> </ul> <p class="score">スコア：<span id="score"></span></p> <p class="start more">もう一回やる</p> |
javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | $(function(){ var e = $(".number"); function createButtons(){ var buttons = []; //ボタンを生成 for(var i = 1;i <= 25;i++){ var flag = true; while(flag){ var a = Math.floor(Math.random()*25); if(buttons[a] == undefined){ buttons[a] = i; flag = false; } } } for(i=0; i < buttons.length; i++) { e.append("<li class='btn'>" + buttons[i] + "</li>"); } e.fadeIn(); } //もう一回 $(".more").click(function(){ e.empty(); score = 9999; cunum = 1; success = false; }); //スタートボタン $(".start").click(function(){ createButtons(); $(this).hide(); timer(); }); //初期設定 var cunum = 1; var score = 9999; var timerId; var success = false; //タイマー処理 function timer(){ if(score < 0){ alert("timeover!"); return false; } $('#score').text(score--); timerId = setTimeout(timer, 10); } //ボタンをクリックした際の処理 $(".btn").live("click", function(){ var num = $(this).text(); var suc = touched(num); if(suc){ $(this).removeClass(); } }); function touched(n){ //押したボタンが正しい場合 if(n == cunum){ cunum++; if(cunum > 25){ alert("finish!"); clearTimeout(timerId); $(".more").fadeIn(); } success = true; return success; }else{ success = false; return success; } } }) |
Author Profile
スターフィールド編集部
SHARE
