こんばんは、ファルコンMです。
ババ抜きに続いて、jQuery で七並べ作成に挑戦してみたいと思います。
カードを配るところまでは、ババ抜きと同じなので省きます。カードを配り終わってから、カードを場に出すときのアルゴリズムです。
画像の表示非表示で、CSS のvisibility 属性を使う
カードを配り終わった後、七並べの場合は、それぞれが持っている7のカードを場に出します。その後順番に、7とつながっているカードを場に出していきます。出したとき、上の画像の赤枠に表示したい。
七並べの場合は、場に出したカードの表示位置は固定できます。つまり、あらかじめカードを表示するときの内容、場所を指定しておいて、表示したいタイミングで表示すればよい。
HTML ファイルのコード
1 | < 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 のコード。表示したいとき、この関数を呼べば、指定のカードを指定の位置に表示できる。
1 2 3 4 5 | <!-- 指定番号のカードを表示する --> function displayCardNum(x){ var posStr = '#cardnum' + x; $(posStr).css( "visibility" , "visible" ); } |
七並べの場合は、カード表示位置が固定されているので、cssのvisibility属性で制御するのがいいだろう。
コメントを残す