ブタさんの形で「ぶたのしっぽ」改🐷 📖

日本語プログラミング言語「なでしこ」 Advent Calendar 2024　20日目の記事用に改造。／元はクジラ飛行机氏の2054の「ぶたのしっぽ」を改造したもの。やっぱりぶたのしっぽは丸くないとね～☆ゲーム内容は変わらず見た目をアレしただけですが、ぐっと本物っぽくなりました♪キャンバスは使わず、DOMのtransformアニメーションでカードを動かしています。／なでしこ最新バージョンで動くように修正と、アドベントカレンダーの記事に合わせてDOMスキンを使い、カード作成を変更。

プログラム: (→大)
#-------------------------------------------------- # プログラム内で使う変数一覧 豚カード＝[] # 裏返しに置いてあるカードの一覧 自分手札＝[] # 自分の手元にあるカード 相手手札＝[] # 対戦相手(コンピューター)の手元にあるカード 山札＝-1 # 山札の先頭にあるカード 山札一覧＝[] # 山札に重ねたカードの一覧 順番＝「自分」 #-------------------------------------------------- # 画面設定 変数 ゲーム画面 変数 [画面幅,画面高さ]＝[480,400]。 豚中心＝[150,200]。豚半径＝120。 変数 情報ラベル 変数 判定ラベル 変数 相手手札ラベル 変数 自分手札ラベル 変数 山札ラベル # カード設定 変数 [カード幅,カード高さ]＝[63*0.6,89*0.6]。 変数 カード絵柄＝["♣","♦","♥","♠"]。 変数 カード番号＝["A","2","3","4","5","6","7","8","9","10","J","Q","K"]。 変数 カード文字色＝[緑色,金色,赤色,青色]。 変数 [カード裏色,カード表色,カード縁色]＝["#FFCCCC",白色,白色]。 変数 親カード＝空配列。 変数 カード表＝空配列。 変数 カード裏＝空配列。 変数 カード重なり＝0。 #-------------------------------------------------- # DOMスキンを作成 ## スタイルを設定 DOM和スタイル追加。 変数 S＝DOM和スタイル。 「style」のDOM部品作成。 それに『.相対位置 {position: relative;} .絶対位置 {position: absolute;} .親 {transition: transform 0.6s; perspective: 300px;} 』&「.カード {波カッコ} {S.幅}: {カード幅}px; {S.高さ}: {カード高さ}px; {S.ボーダー}: solid {8*0.6}px {カード縁色}; {S.角丸}: {14*0.6}px; box-sizing: border-box; {S.背面}: {S.非表示}; transition: transform 0.6s; {波カッコ閉じ} .表 {波カッコ} {S.余白}: {4*0.6}px; {S."行揃え"}: {S.中央}; {S.行高さ}: 1em; {S.文字サイズ}: {34*0.6}px; {S.背景色}: {カード表色}; {波カッコ閉じ} .裏 {波カッコ} {S.背景色}: {カード裏色}; {波カッコ閉じ} .情報 {波カッコ} {S.余白}: 4px; {S.色}: #FFFFFF; {S.文字サイズ}: 16px; {S.背景色}: rgb(102,102,102,.5); {波カッコ閉じ} .場 {波カッコ} {S.幅}: {画面幅}px; {S.高さ}: {画面高さ}px; {S.ボーダー}: 5px ridge #999999; {S.背景色}: #009900; {波カッコ閉じ}」をHTML設定。 ## スキンを定義 DOMスキン辞書@「ゲーム画面」=関数(TYPE,OBJ) 　　OBJの「className」に「相対位置 場」をDOM属性設定。 ここまで。 DOMスキン辞書@「親カード」=関数(TYPE,OBJ) 　　OBJの「className」に「絶対位置 親」をDOM属性設定。 ここまで。 DOMスキン辞書@「カード表」=関数(TYPE,OBJ) 　　OBJの「className」に「絶対位置 カード 表」をDOM属性設定。 ここまで。 DOMスキン辞書@「カード裏」=関数(TYPE,OBJ) 　　OBJの「className」に「絶対位置 カード 裏」をDOM属性設定。 ここまで。 DOMスキン辞書@「情報」=関数(TYPE,OBJ) OBJの「className」に「絶対位置 情報」をDOM属性設定。 ここまで。 #-------------------------------------------------- 画面作成処理。 新規ゲーム。 ●新規ゲーム 豚カード＝カードシャッフル。 山札＝豚カード[0] 山札一覧＝[豚カード[0]] 自分手札=[] 相手手札=[] カード画面表示。 豚カード[0]=-1 ここまで。 ●カード画面表示 豚カードを反復: カード＝親カード[対象]。 角度＝330/52*対象キー。 カード.左＝「{豚半径*COS(DEG2RAD(角度-90))＋豚中心[0]}px」 カード.上＝「{豚半径*SIN(DEG2RAD(角度-90))＋豚中心[1]}px」 「山」へ豚カード[0]のカード移動処理。 ここまで。 ●(IDの)豚カード処理とは もし、順番＝「自分」ならば、 順番＝空。 「山横」へIDのカード移動処理。 「自分」がIDのカード選択。 もし、順番＝「終了」でなければ、 順番＝「相手」。 0.8秒待つ。 情報ラベルに「相手が選択中です...」をテキスト設定。 判定ラベルに「　」をテキスト設定。 相手カード選択処理。 ここまで。 ここまで。 ここまで。 ●(誰がIDの)カード選択とは 絵柄＝(ID/13)を整数変換。 番号＝ID%13。 山絵柄＝(山札/13)を整数変換。 山番号＝山札%13。 山札＝ID。 豚ID＝親カード[ID]の「豚カードid」をデータ属性取得。 豚カード[豚ID]=-1。 山札一覧にIDを配列追加。 山札ラベルに「山札:{山札一覧の要素数}枚」をテキスト設定。 もし（絵柄=山絵柄)または(番号=山番号)ならば もし、誰＝「自分」ならば、 判定ラベルに「😿 残念...」をテキスト設定。 違えば、 判定ラベルに「😊 やった！」をテキスト設定。 ここまで。 ここまで。 1秒待つ。 「隣」へIDのカード移動処理。 もし（絵柄=山絵柄)または(番号=山番号)ならば 山札一覧を反復 0.1秒待つ。 誰へ対象のカード移動処理。 ここまで。 もし、誰＝「自分」ならば、 自分手札＝自分手札と山札一覧を配列足す。 自分手札ラベルに「自分の手札:{自分手札の要素数}枚」をテキスト設定。 違えば、 相手手札＝相手手札と山札一覧を配列足す。 相手手札ラベルに「相手の手札:{相手手札の要素数}枚」をテキスト設定。 ここまで。 山札一覧＝空配列。 山札ラベルに「山札:{山札一覧の要素数}枚」をテキスト設定。 ここまで。 クリア判定。 もし、順番＝「相手」ならば、: 0.3秒待つ。順番＝「自分」。情報ラベルに「あなたの番です。カードを選んでね。」をテキスト設定。 ここまで。 ●クリア判定とは # クリア判定 残数＝0 豚カードを反復： もし、対象≠−1ならば、残数＝残数＋1 もし、残数＝0ならば 自分枚数＝自分手札の要素数 相手枚数＝相手手札の要素数 もし、自分枚数＝相手枚数ならば 判定＝「引き分け」 違えば、もし、自分枚数＜相手枚数ならば 判定＝「勝利！🎊」 違えば 判定＝「敗北😭」 ここまで。 順番＝「終了」 情報ラベルに「ゲームクリア！判定は...」をテキスト設定。 1秒待つ。 判定ラベルに判定をテキスト設定。 戻る。 ここまで。 ここまで。 ●相手カード選択処理とは クリア判定。 # カード選択 オンの間 ID=52の乱数 もし(豚カード[ID]=-1)ならば、続ける。 抜ける。 ここまで。 「山横」へ豚カード[ID]のカード移動処理。 「相手」が豚カード[ID]のカード選択。 ここまで。 #----------------------------------------------------------------------- # ゲーム画面の作成 ●画面作成処理 「ゲーム画面」のDOMスキン設定。 ゲーム画面＝「div」のDOM部品作成。 [-100,0]へカード作成。 ゲーム画面にDOM親部品設定。 「情報」のDOMスキン設定。 情報ラベル＝「ゲームを始めます。カードを選んでね。」のラベル作成。 情報ラベル.左＝5px。情報ラベル.上＝5px。情報ラベル.幅＝300px 判定ラベル＝「　」のラベル作成。 判定ラベル.左＝5px。判定ラベル.上＝30px。判定ラベル.幅＝300px 自分手札ラベル＝「自分の手札:0枚」のラベル作成。 自分手札ラベル.左＝340px。自分手札ラベル.上＝290px。 相手手札ラベル＝「相手の手札:0枚」のラベル作成。 相手手札ラベル.左＝340px。相手手札ラベル.上＝80px。 山札ラベル＝「山札:1枚」のラベル作成。 山札ラベル.左＝「{豚中心[0]-20}px」。山札ラベル.上＝「{豚中心[1]+カード高さ+16}px」。 ここまで。 ●(XYへ)カード作成 変数 [X,Y]＝XY。 IDを0から51まで繰り返す： ゲーム画面にDOM親部品設定。 # カードを作成 「親カード」のDOMスキン設定。 親カード[ID]は「div」のDOM部品作成。 変数 カード＝親カード[ID] カード.左＝「{X}px」。 カード.上＝「{Y}px」。 親カード[ID]にDOM親要素設定。 # カードの表面を作成 「カード表」のDOMスキン設定。 カード表[ID]は「div」のDOM部品作成。 変数 表カード＝カード表[ID] 変数 絵柄＝(ID/13)を整数変換。 変数 番号＝ID%13。 表カードに「{カード絵柄[絵柄]}<BR>{カード番号[番号]}」をテキスト設定。 表カード.色＝カード文字色[絵柄]。 表カードの「transform」に「rotateY(-180deg)」をDOMスタイル設定。 # 要素を、Y軸を中心に裏返しておく設定 # カードの裏面を作成 「カード裏」のDOMスキン設定。 カード裏[ID]は「div」のDOM部品作成。 変数 裏カード＝カード裏[ID] 裏カードの「カードid」にIDをデータ属性設定。 # イベント カードをクリックした時には 判定ラベルに「　」をテキスト設定。 ID＝対象の「カードid」をデータ属性取得。 IDの豚カード処理。 ここまで。 ここまで。 ●カードシャッフル 変数 カード＝0から51までの配列連番作成。 カードを配列シャッフル。 カードを反復。 親カード[対象]の「重なり」に対象キーをDOMスタイル設定。 親カード[対象]の「豚カードid」に対象キーをデータ属性設定。 ここまで。 カードを戻す。 ここまで。 ●(AへIDの)カード移動処理 カード＝親カード[ID]。 x＝カード.左。x＝xの「px」を空に置換。 y＝カード.上。y＝yの「px」を空に置換。 もし、A＝「山横」ならば、 x＝豚中心[0]-x+50。y＝豚中心[1]-y-4。 違えば、もし、A＝「自分」ならば、 x＝画面幅-カード幅-15-x。y＝画面高さ-カード高さ-15-y。 違えば、もし、A＝「相手」ならば、 x＝画面幅-カード幅-15-x。y＝10-y。 違えば、 x＝豚中心[0]-x。y＝豚中心[1]-y-4。 カード重なりを１増やす。 カード.重なり＝カード重なり。 ここまで。 カードの「transform」に「translate({x}px,{y}px)」をDOMスタイル設定。 もし、(A＝「山」)または(A＝「山横」)ならば、 カードの「transform」に「translate({x}px,{y}px)」をDOMスタイル設定。 カード表[ID]の「transform」に「rotateY(0)」をDOMスタイル設定。 カード裏[ID]の「transform」に「rotateY(180deg)」をDOMスタイル設定。 ここまで。 ここまで。 #-------------------------------------------------- ●DOM和スタイル追加 DOM和スタイル.角丸＝「border-radius」 DOM和スタイル.背面＝「backface-visibility」 DOM和スタイル.非表示＝「hidden」 DOM和スタイル.行高＝「line-height」 ここまで。 #--------------------------------------------------