こんにちは、ファルコン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 関数を用いれば、待ち処理ができそうだ。
絵で見てわかるWebアプリ開発の仕組み【電子書籍】[ 松村慎 ]
コメントを残す