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

ババ抜きに続いて、jQuery で七並べ作成に挑戦してみたいと思います。

カードを配るところまでは、ババ抜きと同じなので省きます。カードを配り終わってから、カードを場に出すときのアルゴリズムです。

画像の表示非表示で、CSS のvisibility 属性を使う

カードを配り終わった後、七並べの場合は、それぞれが持っている7のカードを場に出します。その後順番に、7とつながっているカードを場に出していきます。出したとき、上の画像の赤枠に表示したい。

七並べの場合は、場に出したカードの表示位置は固定できます。つまり、あらかじめカードを表示するときの内容、場所を指定しておいて、表示したいタイミングで表示すればよい。

HTML ファイルのコード

<img src="trump.png" id="cardnum0" style="position: absolute; left:100px; top:100px; clip:rect( 0px 51px 76px 0px); visibility:hidden;">

これは、赤枠の左上にハートのA を表示する準備をしている。

left 100 px、top 100 px の位置。

カード表示のアルゴリズムは、ババ抜きの時のものを参考。

次に、javascript のコード。表示したいとき、この関数を呼べば、指定のカードを指定の位置に表示できる。

<!-- 指定番号のカードを表示する -->
function displayCardNum(x){
  var posStr = '#cardnum' + x;
  $(posStr).css("visibility","visible");
}

七並べの場合は、カード表示位置が固定されているので、cssのvisibility属性で制御するのがいいだろう。

初心者プログラミング七並べ – CSS カード表示 –