なでしこさんのDOM部品でトランプを作るよ♥️♣️♦️♠️

　先日の、部品を絶対位置配置することを使ってトランプを作ります。

https://qiita.com/snowdrops89/items/861bc6b3d378b2fa73bf
 
　そして、CSSアニメーションを使ってカードをめくったり配ったりします。
　やっぱ、なんかゲームっぽいもの作りたい！
　あるいは、「DOMスキン設定」の活用。
　あるいはまた、雑に過去作品の紹介🐷

# 最初にDOMスキン設定
　なでしこさんには「DOMスキン設定」という命令があります。


👉[**なでしこ3 マニュアル > plugin_browser/DOMスキン設定**](https://www.nadesi.com/v3/doc/index.php?plugin_browser%2FDOM%E3%82%B9%E3%82%AD%E3%83%B3%E8%A8%AD%E5%AE%9A&show)
 
　何かというと、クラスでCSSを付ける機能です。
　なでしこさんの「[**DOMスタイル設定**](https://www.nadesi.com/v3/doc/index.php?plugin_browser%2FDOM%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E8%A8%AD%E5%AE%9A&show)」や「[**DOMスタイル一括設定**](https://www.nadesi.com/v3/doc/index.php?plugin_browser%2FDOM%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E4%B8%80%E6%8B%AC%E8%A8%AD%E5%AE%9A&show)」はDOM部品のスタイルプロパティに直接設定するものですが、こちらは部品の`className`を設定してスタイルシートを反映させる的な？

　ちょっと使いにくくてあんまり使ったことは無かったんですよ。
　なにしろスタイルシート自体は普通に「[**HTML設定**](https://www.nadesi.com/v3/doc/index.php?plugin_browser%2FHTML%E8%A8%AD%E5%AE%9A&show)」することになっているんですもの、当然和スタイルは使えません。
　普通に部品を作った後にクラスを「[**DOM属性設定**](https://www.nadesi.com/v3/doc/index.php?plugin_browser%2FDOM%E5%B1%9E%E6%80%A7%E8%A8%AD%E5%AE%9A&show)」するのとたいして変わらないんじゃないの？　とか。

　スキンを定義する「DOMスキン辞書」の内容は関数オブジェクトで指定することになっているので、単にクラスを設定するだけではなく、なんかかんか便利な使い方が出来そうな気がするのですが、まだひらめいてはいません💧
　TYPEで特定の要素に設定したりしなかったり出来る的な？
　これはアレだ。スタイルシートは自分で設定するというよりかは、世の中に色々とある良さそげな資産を活用出来るようにすることを想定した機能なのかなという感じ？

　でも、ワタクシひらめきました！
　「DOMスキン設定」は、「className」を「DOM属性設定」する場合とは逆で、先に設定します。そして、**一度「DOMスキン設定」すると、以降作られる部品全てにそのクラスが設定されます**。
　先日やりましたDOM部品を絶対位置指定で配置したいという場合、

https://qiita.com/snowdrops89/items/861bc6b3d378b2fa73bf

　全ての部品の「position」に「absolute」をDOMスタイル設定しなきゃならないの、まあまあめんどくさい。
　日本語で短く書けるよう関数にしてみたところで、やっぱりめんどくさい。

 　これ、DOMスキンにすれば良いんじゃないの？！
<blockquote><font color="#009900">#&nbsp;スタイルを設定</font><br><font color="maroon">「style」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br><font color="#cc0099">それ</font><font color="#cc0000">に</font><font color="maroon">『.絶対位置&nbsp;{position:&nbsp;absolute;}<br>.相対位置&nbsp;{position:&nbsp;relative;}』</font><font color="#cc0000">を</font><font color="#660099">HTML設定</font>。<br><br><font color="#009900">#&nbsp;スキンを定義</font><br><font color="#660099">DOMスキン辞書</font><font color="#cc0099">@</font><font color="maroon">「相対位置」</font><font color="#cc0099">=</font><font color="#cc0099">関数</font><font color="#cc0099">(</font><font color="black">TYPE</font>,<font color="black">OBJ</font><font color="#cc0099">)</font><br>　　<font color="black">OBJ</font><font color="#cc0000">の</font><font color="maroon">「className」</font><font color="#cc0000">に</font><font color="maroon">「相対位置」</font><font color="#cc0000">を</font><font color="#660099">DOM属性設定</font>。<br><font color="#cc0099">ここまで</font>。<br><font color="#660099">DOMスキン辞書</font><font color="#cc0099">@</font><font color="maroon">「絶対位置」</font><font color="#cc0099">=</font><font color="#cc0099">関数</font><font color="#cc0099">(</font><font color="black">TYPE</font>,<font color="black">OBJ</font><font color="#cc0099">)</font><br>　　<font color="black">OBJ</font><font color="#cc0000">の</font><font color="maroon">「className」</font><font color="#cc0000">に</font><font color="maroon">「絶対位置」</font><font color="#cc0000">を</font><font color="#660099">DOM属性設定</font>。<br><font color="#cc0099">ここまで</font>。<br><br><font color="#009900">#&nbsp;「相対位置」のスキンを設定</font><br><font color="maroon">「相対位置」</font><font color="#cc0000">の</font><font color="#660099">DOMスキン設定</font>。<br><br><font color="#009900">#&nbsp;部品を作る場所を作成</font><br><font color="black">母艦</font><font color="#cc0099">＝</font><font color="maroon">「div」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br><font color="black">母艦</font><font color="#cc0099">.</font><font color="black">幅</font><font color="#cc0099">＝</font><font color="#0000cc">420px</font>。<br><font color="black">母艦</font><font color="#cc0099">.</font><font color="black">高さ</font><font color="#cc0099">＝</font><font color="#0000cc">100px</font>。<br><font color="black">母艦</font><font color="#cc0000">に</font><font color="#660099">DOM親部品設定</font>。<br><br><font color="#009900">#&nbsp;「絶対位置」のスキンを設定</font><br><font color="maroon">「絶対位置」</font><font color="#cc0000">の</font><font color="#660099">DOMスキン設定</font>。<br><br><font color="#009900">#&nbsp;以降作られる部品は全て「左」と「上」で配置出来るようになります。</font><br><font color="maroon">「いろは」</font><font color="#cc0000">の</font><font color="#660099">ラベル作成</font>。<br><font color="#cc0099">それ</font><font color="#cc0099">.</font><font color="black">左</font><font color="#cc0099">＝</font><font color="#0000cc">20px</font><br><font color="#cc0099">それ</font><font color="#cc0099">.</font><font color="black">上</font><font color="#cc0099">＝</font><font color="#0000cc">20px</font><br><br><font color="maroon">「OK」</font><font color="#cc0000">の</font><font color="#660099">ボタン作成</font>。<br><font color="#cc0099">それ</font><font color="#cc0099">.</font><font color="black">左</font><font color="#cc0099">＝</font><font color="#0000cc">360px</font><br><font color="#cc0099">それ</font><font color="#cc0099">.</font><font color="black">上</font><font color="#cc0099">＝</font><font color="#0000cc">42px</font><br><br><font color="maroon">「テスト」</font><font color="#cc0000">の</font><font color="#660099">エディタ作成</font>。<br><font color="#cc0099">それ</font><font color="#cc0099">.</font><font color="black">左</font><font color="#cc0099">＝</font><font color="#0000cc">20px</font><br><font color="#cc0099">それ</font><font color="#cc0099">.</font><font color="black">上</font><font color="#cc0099">＝</font><font color="#0000cc">40px</font></blockquote>
　出来ました！
　最初のスタイル設定してスキンを定義する部分を関数にしてしゅっと呼べるようにしておけば、簡単に自由配置ができるようになりそう🎶

# トランプを作る
　そんなこんなでトランプです。
　トランプって切り札のことだからカードやゲームのことを指してトランプっていうのは間違ってるとかそんなマメ知識はいりません。トランプったらトランプです！
　DOMを利用したゲームは、キャンバスを使う場合より高速な処理には向きませんが、なにしろイベントがめっちゃ楽～✨
　カードをクリックして進めていくようなトランプゲームには向いていると思います。

## カードを一枚作る
　カード一枚の大枠はこんな感じ。
<blockquote><font color="#009900">＃トランプのカードを一枚作る</font><br><font color="black">カード</font><font color="#cc0000">は</font><font color="maroon">「div」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br><font color="black">カード</font><font color="#cc0000">に</font><font color="#660099">DOM親要素設定</font>。<br><font color="black">表カード</font><font color="#cc0000">は</font><font color="maroon">「div」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br><font color="black">裏カード</font><font color="#cc0000">は</font><font color="maroon">「div」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。</blockquote>

　カードdivの中に表面用と、裏面用のdivが入ってます。
　まだなんの設定もしていないので、何も見えませんが。
　なんでこんなフクザツなことになっているかというと、後にカードをひっくり返すのに必要だからです。
### DOMスキン作成
　今回は折角学んだDOMスキンを使ってカードの設定を作ってみます。
<blockquote><font color="#009900">#&nbsp;設定</font><br><font color="#cc0099">変数</font>&nbsp;<font color="#cc0099">[</font><font color="black">画面幅</font>,<font color="black">画面高さ</font><font color="#cc0099">]</font><font color="#cc0099">＝</font><font color="#cc0099">[</font><font color="#0000cc">300</font>,<font color="#0000cc">300</font><font color="#cc0099">]</font>。<br><font color="#cc0099">変数</font>&nbsp;<font color="#cc0099">[</font><font color="black">カード幅</font>,<font color="black">カード高さ</font><font color="#cc0099">]</font><font color="#cc0099">＝</font><font color="#cc0099">[</font><font color="#0000cc">63</font>,<font color="#0000cc">89</font><font color="#cc0099">]</font>。<br><br><font color="#009900">#&nbsp;DOMスキンを作成</font><br><font color="#009900">##&nbsp;スタイルを設定</font><br><font color="#660099">DOM和スタイル</font><font color="#cc0099">.</font><font color="black">角丸</font><font color="#cc0099">＝</font><font color="maroon">「border-radius」</font><br><font color="#cc0099">変数</font>&nbsp;<font color="black">S</font><font color="#cc0099">＝</font><font color="#660099">DOM和スタイル</font>。<br><br><font color="maroon">「style」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br><font color="#cc0099">それ</font><font color="#cc0000">に</font><font color="maroon">『.絶対位置&nbsp;{position:&nbsp;absolute;}<br>.相対位置&nbsp;{position:&nbsp;relative;}<br>』</font><font color="#cc0099">&amp;</font><font color="maroon">「.カード&nbsp;{波カッコ}<br>&nbsp;&nbsp;&nbsp;&nbsp;{S.幅}:&nbsp;{カード幅}px;<br>&nbsp;&nbsp;&nbsp;&nbsp;{S.高さ}:&nbsp;{カード高さ}px;<br>&nbsp;&nbsp;&nbsp;&nbsp;{S.ボーダー}:&nbsp;solid&nbsp;6px&nbsp;{白色};<br>&nbsp;&nbsp;&nbsp;&nbsp;{S.角丸}:&nbsp;12px;<br>&nbsp;&nbsp;&nbsp;&nbsp;box-sizing:&nbsp;border-box;<br>{波カッコ閉じ}」</font><font color="#cc0000">を</font><font color="#660099">HTML設定</font>。<br><br><font color="#009900">##&nbsp;スキンを定義</font><br><font color="#660099">DOMスキン辞書</font><font color="#cc0099">@</font><font color="maroon">「相対位置」</font><font color="#cc0099">=</font><font color="#cc0099">関数</font><font color="#cc0099">(</font><font color="black">TYPE</font>,<font color="black">OBJ</font><font color="#cc0099">)</font><br>　　<font color="black">OBJ</font><font color="#cc0000">の</font><font color="maroon">「className」</font><font color="#cc0000">に</font><font color="maroon">「相対位置」</font><font color="#cc0000">を</font><font color="#660099">DOM属性設定</font>。<br><font color="#cc0099">ここまで</font>。<br><font color="#660099">DOMスキン辞書</font><font color="#cc0099">@</font><font color="maroon">「絶対位置」</font><font color="#cc0099">=</font><font color="#cc0099">関数</font><font color="#cc0099">(</font><font color="black">TYPE</font>,<font color="black">OBJ</font><font color="#cc0099">)</font><br>　　<font color="black">OBJ</font><font color="#cc0000">の</font><font color="maroon">「className」</font><font color="#cc0000">に</font><font color="maroon">「絶対位置」</font><font color="#cc0000">を</font><font color="#660099">DOM属性設定</font>。<br><font color="#cc0099">ここまで</font>。<br><font color="#660099">DOMスキン辞書</font><font color="#cc0099">@</font><font color="maroon">「カード」</font><font color="#cc0099">=</font><font color="#cc0099">関数</font><font color="#cc0099">(</font><font color="black">TYPE</font>,<font color="black">OBJ</font><font color="#cc0099">)</font><br>　　<font color="black">OBJ</font><font color="#cc0000">の</font><font color="maroon">「className」</font><font color="#cc0000">に</font><font color="maroon">「絶対位置&nbsp;カード」</font><font color="#cc0000">を</font><font color="#660099">DOM属性設定</font>。<br><font color="#cc0099">ここまで</font>。</blockquote>

　カードの縁として太めに白いボーダーを付け、角丸(border-radius)を設定しました。
　角丸にすると何でも可愛く見えて好き❤️ 
　「box-sizing」を「border-box」にすると、ボーダーを付けてもカードのサイズが変わりません。
 
　そうまでして日本語にしたいか？！　って感じになってますが、分かりやすいように＆ワタクシが書きやすいように！！
　DOM和スタイルも追加しています。
　DOM和スタイル、こうして自分で追加して使うことが出来るんですよ！
　でも、「box-sizing」とか「border-box」とかとか日本語が思いつかなくて挫折💧

<blockquote><font color="#009900">#&nbsp;ゲーム画面の作成</font><br><font color="maroon">「相対位置」</font><font color="#cc0000">の</font><font color="#660099">DOMスキン設定</font>。<br><font color="black">ゲーム画面</font><font color="#cc0099">＝</font><font color="maroon">「div」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br><font color="black">ゲーム画面</font><font color="#cc0099">.</font><font color="black">幅</font><font color="#cc0099">＝</font><font color="black">画面幅</font><font color="#cc0099">&amp;</font><font color="maroon">「px」</font>。<br><font color="black">ゲーム画面</font><font color="#cc0099">.</font><font color="black">高さ</font><font color="#cc0099">＝</font><font color="black">画面高さ</font><font color="#cc0099">&amp;</font><font color="maroon">「px」</font>。<br><font color="black">ゲーム画面</font><font color="#cc0099">.</font><font color="black">背景色</font><font color="#cc0099">＝</font><font color="maroon">「green」</font><br><font color="black">ゲーム画面</font><font color="#cc0000">に</font><font color="#660099">DOM親部品設定</font>。<br><br><font color="#009900">#&nbsp;カードを作成</font><br><font color="maroon">「絶対位置」</font><font color="#cc0000">の</font><font color="#660099">DOMスキン設定</font>。<br><font color="black">カード</font><font color="#cc0000">は</font><font color="maroon">「div」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br><font color="#009900">#&nbsp;カードをゲーム画面の中央に置く</font><br><font color="black">カード</font><font color="#cc0099">.</font><font color="black">左</font><font color="#cc0099">＝</font><font color="#cc0099">(</font><font color="black">画面幅</font><font color="#cc0099">-</font><font color="black">カード幅</font><font color="#cc0099">)</font><font color="#cc0099">/</font><font color="#0000cc">2</font><font color="#cc0099">&amp;</font><font color="maroon">「px」</font>。<br><font color="black">カード</font><font color="#cc0099">.</font><font color="black">上</font><font color="#cc0099">＝</font><font color="#cc0099">(</font><font color="black">画面高さ</font><font color="#cc0099">-</font><font color="black">カード高さ</font><font color="#cc0099">)</font><font color="#cc0099">/</font><font color="#0000cc">2</font><font color="#cc0099">&amp;</font><font color="maroon">「px」</font>。<br><br><font color="black">カード</font><font color="#cc0000">に</font><font color="#660099">DOM親要素設定</font>。<br><font color="maroon">「カード」</font><font color="#cc0000">の</font><font color="#660099">DOMスキン設定</font>。<br><br><font color="#009900">#&nbsp;カードの表面を作成</font><br><font color="black">表カード</font><font color="#cc0000">は</font><font color="maroon">「div」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br><font color="black">表カード</font><font color="#cc0099">.</font><font color="black">背景色</font><font color="#cc0099">＝</font><font color="#660099">赤色</font>。<br><br><font color="#009900">#&nbsp;カードの裏面を作成</font><br><font color="black">裏カード</font><font color="#cc0000">は</font><font color="maroon">「div」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br><font color="black">裏カード</font><font color="#cc0099">.</font><font color="black">背景色</font><font color="#cc0099">＝</font><font color="#660099">青色</font>。</blockquote>

　DOMスキンにより絶対位置が設定されていることにより、表カードと裏カードが重なりました。
　重なり(z-index)を指定していなければ、後から作成された部品が上になるので、裏カードの青色だけが見えている状態です。

![トランプ裏.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561177/ba97e8c6-eca1-ae1d-8915-c800c69a5693.jpeg)


## カードをくるんとめくる

　まず、`表カードの「transform」に「rotateY(-180deg)」をDOMスタイル設定`します。
　これは、要素を、Y軸（縦軸）を中心に180度裏向きに回転させる設定。
<blockquote><font color="#009900">#&nbsp;カードの表面を作成</font><br><font color="black">表カード</font><font color="#cc0000">は</font><font color="maroon">「div」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br><font color="black">表カード</font><font color="#cc0099">.</font><font color="black">背景色</font><font color="#cc0099">＝</font><font color="#660099">赤色</font>。<br><font color="black">表カード</font><font color="#cc0000">の</font><font color="maroon">「transform」</font><font color="#cc0000">に</font><font color="maroon">「rotateY(180deg)」</font><font color="#cc0000">を</font><font color="#660099">DOMスタイル設定</font>。&nbsp;&nbsp;<font color="#009900">#&nbsp;要素を、Y軸を中心に裏返しておく設定</font></blockquote>

　そして、表裏ともに「`backface-visibility`」に「`hidden`」を設定します。
　これは、要素の背面は非表示にするという設定です。

　さらに表裏ともに「`transition`」に「`transform 0.6s`」を設定します。
　トランスフォームを0.6秒かけて変化させるという設定で、カードが0.6秒かけて裏返るということです。

　こちらはカードのDOMスキンに含めてしまいます。
　呪文感が増してきましたが、こんな感じ？
<blockquote><font color="maroon">「style」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br><font color="#cc0099">それ</font><font color="#cc0000">に</font><font color="maroon">『.絶対位置&nbsp;{position:&nbsp;absolute;}<br>.相対位置&nbsp;{position:&nbsp;relative;}<br>』</font><font color="#cc0099">&amp;</font><font color="maroon">「.カード&nbsp;{波カッコ}<br>&nbsp;&nbsp;&nbsp;&nbsp;{S.幅}:&nbsp;{カード幅}px;<br>&nbsp;&nbsp;&nbsp;&nbsp;{S.高さ}:&nbsp;{カード高さ}px;<br>&nbsp;&nbsp;&nbsp;&nbsp;{S.ボーダー}:&nbsp;solid&nbsp;6px&nbsp;{白色};<br>&nbsp;&nbsp;&nbsp;&nbsp;{S.角丸}:&nbsp;12px;<br>&nbsp;&nbsp;&nbsp;&nbsp;box-sizing:&nbsp;border-box;<br>&nbsp;&nbsp;&nbsp;&nbsp;backface-visibility:&nbsp;hidden;<br>&nbsp;&nbsp;&nbsp;&nbsp;transition:&nbsp;transform&nbsp;0.6s;<br>{波カッコ閉じ}」</font><font color="#cc0000">を</font><font color="#660099">HTML設定</font>。</blockquote>

　まだ見た目は何も変わっていませんが、表カードは裏返しになっていて、ちょうどカードを机に伏せて置いたような状態になっています。

　そして、イベントで、クリックしたら表カードはもとに戻し、裏カードを裏返しにします。

<blockquote><font color="#009900">#&nbsp;イベント</font><br><font color="black">カード</font><font color="#cc0000">を</font><font color="#660099">クリックした時</font><font color="#cc0000">には</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">表カード</font><font color="#cc0000">の</font><font color="maroon">「transform」</font><font color="#cc0000">に</font><font color="maroon">「rotateY(0)」</font><font color="#cc0000">を</font><font color="#660099">DOMスタイル設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">裏カード</font><font color="#cc0000">の</font><font color="maroon">「transform」</font><font color="#cc0000">に</font><font color="maroon">「rotateY(-180deg)」</font><font color="#cc0000">を</font><font color="#660099">DOMスタイル設定</font>。<br><font color="#cc0099">ここまで</font>。</blockquote>

https://n3s.nadesi.com/id.php?2925

　クリックしたらカードがくるんと回転して赤い表面が見えるようになりました！

## 一組作る
　今回は対応する絵柄と番号をテキスト設定して、文字色をスタイル設定することで表面を作ります。
　カードの設定。
<blockquote><font color="#cc0099">変数</font>&nbsp;<font color="#cc0099">[</font><font color="black">カード幅</font>,<font color="black">カード高さ</font><font color="#cc0099">]</font><font color="#cc0099">＝</font><font color="#cc0099">[</font><font color="#0000cc">63</font>,<font color="#0000cc">89</font><font color="#cc0099">]</font>。<br><font color="#cc0099">変数</font>&nbsp;<font color="black">カード絵柄</font><font color="#cc0099">＝</font><font color="#cc0099">[</font><font color="maroon">"♣"</font>,<font color="maroon">"♦"</font>,<font color="maroon">"♥"</font>,<font color="maroon">"♠"</font><font color="#cc0099">]</font>。<br><font color="#cc0099">変数</font>&nbsp;<font color="black">カード番号</font><font color="#cc0099">＝</font><font color="#cc0099">[</font><font color="maroon">"A"</font>,<font color="maroon">"2"</font>,<font color="maroon">"3"</font>,<font color="maroon">"4"</font>,<font color="maroon">"5"</font>,<font color="maroon">"6"</font>,<font color="maroon">"7"</font>,<font color="maroon">"8"</font>,<font color="maroon">"9"</font>,<font color="maroon">"10"</font>,<font color="maroon">"J"</font>,<font color="maroon">"Q"</font>,<font color="maroon">"K"</font><font color="#cc0099">]</font>。<br><font color="#cc0099">変数</font>&nbsp;<font color="black">カード文字色</font><font color="#cc0099">＝</font><font color="#cc0099">[</font><font color="#660099">緑色</font>,<font color="#660099">金色</font>,<font color="#660099">赤色</font>,<font color="#660099">青色</font><font color="#cc0099">]</font>。<br><font color="#cc0099">変数</font>&nbsp;<font color="#cc0099">[</font><font color="black">カード裏色</font>,<font color="black">カード表色</font>,<font color="black">カード縁色</font><font color="#cc0099">]</font><font color="#cc0099">＝</font><font color="#cc0099">[</font><font color="maroon">"#FFCCCC"</font>,<font color="#660099">白色</font>,<font color="#660099">白色</font><font color="#cc0099">]</font>。</blockquote>

　そして、
<blockquote><font color="#cc0099">変数</font>&nbsp;<font color="black">親カード</font><font color="#cc0099">＝</font><font color="#660099">空配列</font>。<br><font color="#cc0099">変数</font>&nbsp;<font color="black">カード表</font><font color="#cc0099">＝</font><font color="#660099">空配列</font>。<br><font color="#cc0099">変数</font>&nbsp;<font color="black">カード裏</font><font color="#cc0099">＝</font><font color="#660099">空配列</font>。</blockquote>

　のようにカード用の配列を用意して、0から51まで繰り返しで作っていけば良いだけ！
　13で割れば絵柄と文字色が、割った余りでカード番号が分かるって寸法です。
 
　・・・なんですけれどね。
　要素を配列に収めると、オブジェクトプロパティ構文が使えないんですよよよ。
<blockquote><font color="black">ID</font><font color="#cc0000">を</font><font color="#0000cc">0</font><font color="#cc0000">から</font><font color="#0000cc">51</font><font color="#cc0000">まで</font><font color="#cc0099">繰り返す</font><font color="#cc0099">：<br>&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="black">親カード</font><font color="#cc0099">[</font><font color="black">ID</font><font color="#cc0099">]</font><font color="#cc0000">は</font><font color="maroon">「div」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">親カード</font><font color="#cc0099">[</font><font color="black">ID</font><font color="#cc0099">]</font><font color="#cc0099">.</font><font color="black">左</font><font color="#cc0099">＝</font><font color="#0000cc">100px</font>。</blockquote>

　とかは、できません。
　しょうが無いので、一回別の変数にコピーします。

<blockquote><font color="black">ID</font><font color="#cc0000">を</font><font color="#0000cc">0</font><font color="#cc0000">から</font><font color="#0000cc">51</font><font color="#cc0000">まで</font><font color="#cc0099">繰り返す</font><font color="#cc0099">：<br>&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="black">親カード</font><font color="#cc0099">[</font><font color="black">ID</font><font color="#cc0099">]</font><font color="#cc0000">は</font><font color="maroon">「div」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">カード</font><font color="#cc0099">＝</font><font color="black">親カード</font><font color="#cc0099">[</font><font color="black">ID</font><font color="#cc0099">]</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">カード</font><font color="#cc0099">.</font><font color="black">左</font><font color="#cc0099">＝</font><font color="#0000cc">100px</font>。</blockquote>

　なでしこさんの配列は普通に代入すると参照コピーになって、コピーしたものに変更を加えると元のヤツも変更が反映されます。
　ｖ１のつもりでコピーすると、あれれ～？！？！　ってなるヤツですが、こんな時には便利です✨

<blockquote><font color="black">ID</font><font color="#cc0000">を</font><font color="#0000cc">0</font><font color="#cc0000">から</font><font color="#0000cc">51</font><font color="#cc0000">まで</font><font color="#cc0099">繰り返す</font><font color="#cc0099">：<br>&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="black">ゲーム画面</font><font color="#cc0000">に</font><font color="#660099">DOM親部品設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;カードを作成</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">「親カード」</font><font color="#cc0000">の</font><font color="#660099">DOMスキン設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">親カード</font><font color="#cc0099">[</font><font color="black">ID</font><font color="#cc0099">]</font><font color="#cc0000">は</font><font color="maroon">「div」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">カード</font><font color="#cc0099">＝</font><font color="black">親カード</font><font color="#cc0099">[</font><font color="black">ID</font><font color="#cc0099">]</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;カードをゲーム画面の中央に置く</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">カード</font><font color="#cc0099">.</font><font color="black">左</font><font color="#cc0099">＝</font><font color="#cc0099">(</font><font color="black">画面幅</font><font color="#cc0099">/</font><font color="#0000cc">2</font><font color="#cc0099">-</font><font color="black">カード幅</font><font color="#cc0099">-</font><font color="#0000cc">4</font><font color="#cc0099">)</font><font color="#cc0099">&amp;</font><font color="maroon">「px」</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">カード</font><font color="#cc0099">.</font><font color="black">上</font><font color="#cc0099">＝</font><font color="#cc0099">(</font><font color="black">画面高さ</font><font color="#cc0099">-</font><font color="black">カード高さ</font><font color="#cc0099">)</font><font color="#cc0099">/</font><font color="#0000cc">2</font><font color="#cc0099">&amp;</font><font color="maroon">「px」</font>。<br><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">親カード</font><font color="#cc0099">[</font><font color="black">ID</font><font color="#cc0099">]</font><font color="#cc0000">に</font><font color="#660099">DOM親要素設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;カードの表面を作成</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">「カード表」</font><font color="#cc0000">の</font><font color="#660099">DOMスキン設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">カード表</font><font color="#cc0099">[</font><font color="black">ID</font><font color="#cc0099">]</font><font color="#cc0000">は</font><font color="maroon">「div」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">表カード</font><font color="#cc0099">＝</font><font color="black">カード表</font><font color="#cc0099">[</font><font color="black">ID</font><font color="#cc0099">]</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">絵柄</font><font color="#cc0099">＝</font><font color="#cc0099">(</font><font color="black">ID</font><font color="#cc0099">/</font><font color="#0000cc">13</font><font color="#cc0099">)</font><font color="#cc0000">を</font><font color="#660099">整数変換</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">番号</font><font color="#cc0099">＝</font><font color="black">ID</font><font color="#cc0099">%</font><font color="#0000cc">13</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">表カード</font><font color="#cc0000">に</font><font color="maroon">「{カード絵柄[絵柄]}&lt;BR&gt;{カード番号[番号]}」</font><font color="#cc0000">を</font><font color="#660099">テキスト設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">表カード</font><font color="#cc0099">.</font><font color="black">色</font><font color="#cc0099">＝</font><font color="black">カード文字色</font><font color="#cc0099">[</font><font color="black">絵柄</font><font color="#cc0099">]</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">表カード</font><font color="#cc0000">の</font><font color="maroon">「transform」</font><font color="#cc0000">に</font><font color="maroon">「rotateY(-180deg)」</font><font color="#cc0000">を</font><font color="#660099">DOMスタイル設定</font>。&nbsp;&nbsp;<font color="#009900">#&nbsp;要素を、Y軸を中心に裏返しておく設定</font><br><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;カードの裏面を作成</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">「カード裏」</font><font color="#cc0000">の</font><font color="#660099">DOMスキン設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">カード裏</font><font color="#cc0099">[</font><font color="black">ID</font><font color="#cc0099">]</font><font color="#cc0000">は</font><font color="maroon">「div」</font><font color="#cc0000">の</font><font color="#660099">DOM部品作成</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">裏カード</font><font color="#cc0099">＝</font><font color="black">カード裏</font><font color="#cc0099">[</font><font color="black">ID</font><font color="#cc0099">]</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">裏カード</font><font color="#cc0000">の</font><font color="maroon">「カードid」</font><font color="#cc0000">に</font><font color="black">ID</font><font color="#cc0000">を</font><font color="black">データ属性設定</font>。</blockquote>

　できました。

## てん切る
　って方言なんですってねー！！
　じゃじゃじゃあ標準語じゃなんて言うんです？
　シャッフルは分かりますけど、日本語は？！

<blockquote><strong><font color="#cc0099">●カードシャッフル</font></strong><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">カード</font><font color="#cc0099">＝</font><font color="#0000cc">0</font><font color="#cc0000">から</font><font color="#0000cc">51</font><font color="#cc0000">までの</font><font color="#660099">配列連番作成</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">カード</font><font color="#cc0000">を</font><font color="#660099">配列シャッフル</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">カード</font><font color="#cc0000">を</font><font color="#cc0099">反復</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">親カード</font><font color="#cc0099">[</font><font color="#cc0099">対象</font><font color="#cc0099">]</font><font color="#cc0000">の</font><font color="maroon">「重なり」</font><font color="#cc0000">に</font><font color="#cc0099">対象キー</font><font color="#cc0000">を</font><font color="#660099">DOMスタイル設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">ここまで</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">カード</font><font color="#cc0000">を</font><font color="#cc0099">戻す</font>。<br><font color="#cc0099">ここまで</font>。</blockquote>

　「[**配列シャッフル**](https://www.nadesi.com/v3/doc/index.php?plugin_system%2F%E9%85%8D%E5%88%97%E3%82%B7%E3%83%A3%E3%83%83%E3%83%95%E3%83%AB&show)」という、まさにそれ！　な命令があります。
　ここでは、クリックでめくっていけるよう、それに合わせて重なり(z-index)を設定しています。

https://n3s.nadesi.com/id.php?2926

　これで、トランプ一組できました！

# ぶたのしっぽ🐷
　というトランプゲームがあります。
　元ネタはマイナビ連載の、ゼロからはじめてみる日本語プログラミング「なでしこ」第77回 『トランプ「ぶたのしっぽ」を作ってみよう』でした。

https://news.mynavi.jp/techplus/article/nadeshiko-77/

　記事の最後に『また、多人数で遊べるようにしたり、グラフィックスを付け足してみたりと、自分でいろいろ改良してみると、より楽しめるでしょう。』とあったので、早速改造してみたやつです。
　ゲーム内容はほぼ変わらず、ぶたのしっぽらしくカードを丸く配置して動くようにしただけだけど、それだけでめちゃくちゃゲームっぽくなりますよね🎶
　肝心のゲーム部分のプログラムはほとんどそのままなので、是非元の記事を読んでみて下さい。

## カードを移動する
　配ったり引いたり捨てたり、色々しますよね。
 
<blockquote><font color="black">カード</font><font color="#cc0000">の</font><font color="maroon">「transform」</font><font color="#cc0000">に</font><font color="maroon">「translate({x}px,{y}px)」</font><font color="#cc0000">を</font><font color="#660099">DOMスタイル設定</font>。</blockquote>

　こんだけ！

　移動先の座標を指定するだけで、今ある場所からアニメーションして移動して行きますよ！！
　移動時間はカードをめくるで`transition`に指定した0.6秒です。
　簡単なアニメーションが簡単に実現出来るのも良い所です。

## 完成（？！）
　最新版のなでしこで正しく動作するよう修正し、画面やカードの作成を今回の記事の内容に合わせて変更しました。

https://n3s.nadesi.com/id.php?2060

　是非遊んでみたり、さらなる改造をしてみたり、色々してみてください✨

# おわります
　本当は、何か別のトランプゲームを新しく作ろうと思っていたのですが、時間が足りなかったのと、ムダに長期連載するまでもなくありがたいことにカレンダーが全て埋まったので、雑に過去作品でお茶を濁しちゃいました～😅🙏