とっかかりやすい初心者プログラミング – ババ抜き(8) – CSSのClipを活用

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

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

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

今回は、実際のカードを表示する箇所です。

ババ抜きゲームをする

ソースコード

CSS のClip を使用して、画像を表示する

まずは、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;">
--- 略 ---
<img src="trump.png" id="card10" style="position: absolute; left:; top:; clip:; visibility:hidden;">
<img src="trump.png" id="card11" style="position: absolute; left:; top:; clip:; visibility:hidden;">
<img src="trump.png" id="card12" style="position: absolute; left:; top:; clip:; visibility:hidden;">
--- 略 ---

id cardXY (X : 0~3、Y : 0~12) のimg タグにカードを表示します。初期値は、visibility プロパティはhidden を表示します。

次にjquery の関数。以下に、カードを表示する関数を記載。

  <!-- 指定位置のカードを指定番号で表示する -->
  function display(x, y, num){
    var posStr = '#card' + y + x;
    var left;
    var top;
    var rect;

    if (num%13 <= 6){
      left = 200 + x*50 - Math.floor(num/13)*50;
      top = 150 + y*100 - num%13*75;
      rect = 'rect(' + ((num%13)*75) + 'px ' + (((Math.floor(num/13)+1)*50)+1) + 'px ' + ((num%13+1)*75+1) + 'px ' + (Math.floor(num/13)*50) + 'px)';
    }else{
      left = 200 + x*50 - Math.floor(num/13)*50 - 200;
      top = 150 + y*100 - (num%13-7)*75;
      rect = 'rect(' + ((num%13-7)*75) + 'px ' + ((Math.floor(num/13)+1)*50+200) + 'px ' + ((num%13-6)*75+1) + 'px ' + (Math.floor(num/13)*50+200) + 'px)';
    }
    $(posStr).css("left", left);
    $(posStr).css("top", top);
    $(posStr).css("clip", rect);
    $(posStr).css("visibility","visible");
  }

関数の引数は、x( プレイヤーID 0~3、y( 表示位置 0~12 )、num( カード 0~51 ) である。52はジョーカーであるが、ジョーカーは除く。

posStr でカードのsrc タグのid を指定する。

引数の値を参考に、left プロパティ、top プロパティ、rect プロパティ のパラメータを設定する。画像表示の原理は、このリンクを参照。

また、画像は以下のものを使用。

最後に、$(posStr) にleft、top、clip、visibility プロパティの値を設定する。これで、実際の位置にカードが表示される。表示されているイメージは以下を参照。

コンピューター3の空いているところは、ジョーカーが表示される。未設定なので、表示されていない。

次回からは、いよいよ、ゲームを開始してい行くところのコーディングをする。


HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方【電子書籍】[ 吉田真麻 ]

スポンサーリンク

シェアする

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

フォローする