[ 📌文法] [ 🎨命令一覧]

[編集モード] ブタさんの形で「ぶたのしっぽ」改🐷

日本語プログラミング言語「なでしこ」 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」
ここまで。
#--------------------------------------------------

デバッグ × キャンバス: 幅 × 高

🍯 プログラム貯蔵庫

[編集モード] ブタさんの形で「ぶたのしっぽ」改🐷

素材のアップロード