Idea to Code

アイデアをコードへ
独学でプログラミング関係にいろいろ手を出すサイト

hawk

JavaScript

数当てっぽい2015/11/22

簡単な数当てゲームを作ってみた
4桁の数字を当ててね

- 遊び方 -
テキストボックスに4桁の数字を入れて[go!]ボタンをクリックしましょう
すると適当なヒントがもらえるので、それを頼りに数字を当てましょう
正解した後に[reset]ボタンを押すともう1回別の数字を当てるゲームが始まります

script.js 
$(function(){
  var randnum = Math.floor(Math.random() * 9000)+1000;  // 乱数を生成
  var count = 1;  // 手数を初期化

  $("#goButton").click(function clickFunc(){  // ボタンがクリックされたら
    var num = $("#number").val();    // 入力値を取得
    if(num.match(/\d{4}/) == num){  // 入力値が4桁の数字なら
      var diff = num - randnum;      // 入力値と乱数の差を算出
      if(diff > 5000){  // ~5001
        post_mes(count++ + "手：" + num + "：とても遠い！もっと小さいです");
      }else if(diff > 1000){  // 5000 ~ 1001
        post_mes(count++ + "手：" + num + "：もーっと小さいです");
      }else if(diff > 100){    // 1000 ~ 101
        post_mes(count++ + "手：" + num + "：もっと小さいです");
      }else if(diff > 10){    // 100 ~ 11
        post_mes(count++ + "手：" + num + "：もうちょっと小さいです")
      }else if(diff > 0){      // 10 ~ 1
        post_mes(count++ + "手：" + num + "：とても近い！もう少し小さいです");
      }else if(diff == 0){
        post_mes(count++ + "手：" + num + "：正解です！").css({
          "color": "red",
          "font-weight": "bold"
        });
        // clickイベントを変更
        $("#goButton").val(" reset ").unbind("click").bind("click",
          function(){
            post_mes("new game start !");  // メッセージを出力
            count = 1;                    // 手数を初期化
            randnum = Math.floor(Math.random() * 9000)+1000;  // 乱数を生成
            $(this).unbind("click").bind("click", clickFunc).val(" go! ");  // クリックイベントを復活
          }
        );
      }else if(diff > -10){    // -1 ~ -9
        post_mes(count++ + "手：" + num + "：とても近い！もう少し大きいです");
      }else if(diff > -100){  // -10 ~ -99
        post_mes(count++ + "手：" + num + "：もうちょっと大きいです");
      }else if(diff > -1000){  // -100 ~ -999
        post_mes(count++ + "手：" + num + "：もっと大きいです");
      }else if(diff > -5000){  // -1000 ~ -4999
        post_mes(count++ + "手：" + num + "：もーっと大きいです");
      }else{                  // -5000 ~
        post_mes(count++ + "手：" + num + "：とても遠い！もっと大きいです");
      }
   }else{  // 入力エラー
    post_mes(num + "：半角数字を4桁入力してください");
  }
  });

  // メッセージを表示する関数、戻り値はjQueryオブジェクト
  function post_mes(str){
    var jquery_obj = $("<p>").text(str);    // メッセージを作成
    $("#message").prepend(jquery_obj);      // メッセージを追加
    return(jquery_obj);                      // メッセージを返す
  }
});