とっかかりやすい初心者プログラミング – ババ抜き(9) – jQuery setTimeout

こんにちは、ファルコンMです。

とっかかりやすい初心者プログラミング ババ抜きシリーズ 9回目。

Web ブラウザでババ抜きをするプログラミング。Jquery の続きです。

今回は、jQuery のsetTimeout 関数を使って、カードを取る→カードを捨てるをプレイヤー間で順番にやっていく方法です。

ババ抜きゲームをする

ソースコード

やりたいことは

  • プレイヤー1人とコンピューター3人で、ランダムで最初にカードを取るのを決める
  • 最初にカードを取るのがコンピューターなら1秒後、次の相手のカードを取る。
  • さらに1秒後、カードを捨てる。
  • さらに1秒後、次の人がカードを取る。

jQuery のsetTimeout を使ったコード

$(document).ready(function(){
  --- 略 ---
  var turnPlayer;

  <!-- 開始ボタン押し -->
  $("#start").on("click", function(){
    --- 略 ---

    <!-- 最初のプレイヤーをランダムで決める -->
    turnPlayer = Math.floor( Math.random() * 4);

    --- 略 ---

    exeNextPlayer();
  });

  <!-- 次の人の処理をする -->
  function exeNextPlayer(){
    if (turnPlayer == 0){
      displayMessage("コンピューター1からカードを取ってください。");
    }else{
      displayMessage("コンピューター"+ (turnPlayer) +"がカードを取ります。");
      setTimeout(function(){getCardComputer();}, 1000);
    }
  }

  <!-- コンピューターがカードを取る -->
 function getCardComputer(){

    --- ここにコンピューターがカードを取る処理を記述する ---

    displayMessage("コンピューター"+ (turnPlayer) +"がカードを捨てます。");
    setTimeout(function(){throwCardComputer();}, 1000);
  }

  <!-- コンピューターがカードを捨てる -->
 function throwCardComputer(){

    --- ここにコンピューターがカードを捨てる処理を記述する ---

    turnPlayer++;
    if(turnPlayer==4){turnPlayer=0;}
    exeNextPlayer();
  }
}

turnPlayer 変数は、現在の順番の人( 0:プレイヤー、1~3:コンピューター)を表します。

exeNextPlayer 関数で、プレイヤーかコンピューターかを判定します。そして、コンピューターならば、setTimeout 関数で1秒待った後、getCardComputer 関数を実行します。

ちなみに

setTimeout("getCardComputer()", 1000);

という書き方だとうまくいきませんでした。

同じく getCardComputer 関数内で setTimeout 関数で1秒待った後は、throwCardComputer 関数を実行します。

throwCardComputer 関数で次の人を更新して、再びexeNextPlayer 関数を実行します。

今回は、カードを取ったり捨てたりする処理は書いていません。

まとめ

jQuery では、setTimeout 関数を用いれば、待ち処理ができそうだ。


jQuery最高の教科書 [ シフトブレイン ]


絵で見てわかるWebアプリ開発の仕組み【電子書籍】[ 松村慎 ]

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする