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

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

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

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

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

ババ抜きゲームをする

ソースコード

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

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

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

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

次に、jQuery のコード。

<!-- クリック -->
$("#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 ) にクリックしたら、処理を行う。

  • 有効なコンピューターのカードをクリックしたかを判定。コンピューター1が生きていればコンピューター1、コンピューター1が終了していて、コンピューター2が生きていればコンピューター2という感じ。
  • クリックしたカードをプレイヤーに追加する。
  • クリックしたカードをコンピューターから削除する。

という感じだろうか。


プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート【電子書籍】[ 矢次 悟郎 ]


改訂新版 jQuery本格入門 JavaScript開発・デザイン効率化の基礎から [ 沖林正紀 ]

スポンサーリンク

シェアする

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

フォローする