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

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

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

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

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

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

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

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 プロパティのパラメータを設定する。画像表示の原理は、このリンクを参照。

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