とっかかりやすい初心者プログラミング – ババ抜き(10) – jQuery タグクリック –

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

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

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

今回は、jQuery でタグをクリックしたときの処理について。

画像クリックしたときの処理

まずは、html のコードから、

&lt;img src="trump.png" id="card00" style="position: absolute; left:; top:; clip:; visibility:hidden;"&gt;
&lt;img src="trump.png" id="card01" style="position: absolute; left:; top:; clip:; visibility:hidden;"&gt;
&lt;img src="trump.png" id="card02" style="position: absolute; left:; top:; clip:; visibility:hidden;"&gt;
--- 略 ---

ここでは、idはそれぞれcard00、card01、card02 となっている。それぞれのカードのid を表している。

次に、jQuery のコード。

&lt;!-- クリック --&gt;
$("#card10").click(function(){clickCard(0,1)});
$("#card11").click(function(){clickCard(1,1)});
$("#card12").click(function(){clickCard(2,1)});
--- 略 ---

これは、idがcard00、card01、card02のタグをクリックしたら、clickCard 関数を呼び出すことを意味している。clickCard関数で、実際のイベント処理を行う。

カードをクリックしたときの処理

カードをクリックしたときのclickCard関数は以下の通り。

<!-- カードをクリックしたときの処理 -->
function clickCard( x, y ){
  if( turnPlayer != 0 ){return;}
  for( var i=1; i<4; i++){
    if(fin[i]==0){
      if( y == i ){
        break;
      }else{
        return;
      }
    }
  }

  <!-- プレイヤーのカードを追加 -->
  handcard[0].push(handcard[y][x]);
  display( handcard[0].length-1, 0, handcard[y][x]);

  <!-- コンピューターのカードを削除 -->
  handcard[y][x]=-1;
  nodisplay( handcard[y].length-1, y);
  cardSride(y);

  setTimeout(function(){throwCardPlayer();}, 1000);
}

自分の番の時( turnPlayer == 0 ) にクリックしたら、処理を行う。