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

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

クジラ飛行机氏の2054の「ぶたのしっぽ」を改造したもの。やっぱりぶたのしっぽは丸くないとね～☆ゲーム内容は変わらず見た目をアレしただけですが、ぐっと本物っぽくなりました♪グラフィックは使わず、DOMのtransformアニメーションでカードを動かしています。

!「https://n3s.nadesi.com/plain/wa.nako3」を取り込む。
#-----------------------------------------------------------------------
#--------------------------------------------------
# プログラム内で使う変数一覧
豚カード＝[] # 裏返しに置いてあるカードの一覧
自分手札＝[] # 自分の手元にあるカード
相手手札＝[] # 対戦相手(コンピューター)の手元にあるカード
山札＝-1 # 山札の先頭にあるカード
山札一覧＝[] # 山札に重ねたカードの一覧
順番＝「自分」
#--------------------------------------------------
# カード
カード幅＝63*0.6。カード高さ＝89*0.6。
カード絵柄＝["♣","♠","♥","♦"]。
カード番号＝["A","2","3","4","5","6","7","8","9","10","J","Q","K"]。
カード色=[緑色,青色,赤色,金色]
カード重なり＝0。
#--------------------------------------------------
# 画面サイズ
画面幅＝480。画面高さ＝480。
豚中心＝[150,200]。豚半径＝120。
#--------------------------------------------------
# ラベル
DOM親要素に『
<style>
.情報 { padding:4px; color: #FFFFFF; font-size: 16px; background-color:rgb(102,102,102,.5); position:absolute;}
</style>
』をHTML設定。
DOMスキン辞書@「情報」=関数(TYPE,OBJ)
    OBJの「className」に「情報」をDOM属性設定。
ここまで。
情報ラベルとは変数。
相手手札ラベルとは変数。
自分手札ラベルとは変数。
山札ラベルとは変数。
#--------------------------------------------------
描画中キャンバスの「高さ」に0をDOM属性設定。
画面作成処理。
新規ゲーム。

●新規ゲームとは
    豚カード＝カードシャッフル後取得。
    山札＝豚カード[0]
    山札一覧＝[0]
    自分手札=[]
    相手手札=[]
    カード画面表示。
    豚カード[0]=-1
ここまで。

●画面作成処理とは
    母艦＝[画面幅,画面高さ]で母艦作成。
    母艦の「背景色」に「#009900」をDOMスタイル設定。
    IDを0から51まで繰り返す：
        カード＝[-50,0,カード幅,カード高さ]へIDのカード作成。
    「情報」のDOMスキン設定。
    情報ラベル＝「ゲームを始めます。カードを選んでね。」のラベル作成。//情報ラベルを絶対位置配置。
    情報ラベルを[5,5]にDOM位置設定。
    自分手札ラベル＝「自分の手札:0枚」のラベル作成。//自分手札ラベルを絶対位置配置。
    自分手札ラベルを[340,370]にDOM位置設定。
    相手手札ラベル＝「相手の手札:0枚」のラベル作成。//相手手札ラベルを絶対位置配置。
    相手手札ラベルを[340,80]にDOM位置設定。
    山札ラベル＝「山札:1枚」のラベル作成。//山札ラベルを絶対位置配置。
    山札ラベルを[豚中心[0]-20,豚中心[1]+カード高さ+16]にDOM位置設定。
ここまで。

●カードシャッフル後取得とは
    変数 カード＝0から51までの配列連番作成。
    カードを配列シャッフル。
    それはカード
ここまで。

●カード画面表示とは
    IDを0から51まで繰り返す：
        角度＝330/52*ID。
        x＝豚半径*COS(DEG2RAD(角度-90))＋豚中心[0]
        y＝豚半径*SIN(DEG2RAD(角度-90))＋豚中心[1]
        [x,y]に「#カード{ID}」をDOM位置設定。
        絵柄＝(豚カード[ID]/13)を整数変換。
        番号＝豚カード[ID]%13。
        「#表{ID}」の「色」にカード色[絵柄]をDOMスタイル設定。
        「#表{ID}」に「{カード絵柄[絵柄]}<BR>{カード番号[番号]}」をテキスト設定。
    「山」へ0のカード移動処理。
ここまで。

●(IDの)豚カード処理とは
    もし、順番＝「自分」ならば、
        順番＝空。
        「山横」へIDのカード移動処理。
        「自分」がIDのカード選択。
        もし、順番＝「終了」でなければ、
            順番＝「相手」。
            1秒待つ。
            情報ラベルに「相手が選択中です...」をテキスト設定。
            相手カード選択処理。
        ここまで。
    ここまで。
ここまで。

●(誰がIDの)カード選択とは
    絵柄＝(豚カード[ID]/13)を整数変換。
    番号＝豚カード[ID]%13。
    山絵柄＝(山札/13)を整数変換。
    山番号＝山札%13。
    山札＝豚カード[ID]。
    豚カード[ID]=-1。
    山札一覧にIDを配列追加。
    山札ラベルに「山札:{山札一覧の要素数}枚」をテキスト設定。
    1秒待つ。
    「隣」へIDのカード移動処理。
    もし（絵柄=山絵柄)または(番号=山番号)ならば
        山札一覧を反復
            0.1秒待つ。
            誰へ対象のカード移動処理。
        ここまで。
        もし、誰＝「自分」ならば、
            情報ラベルに「😿 残念...」をテキスト設定。1秒待つ。
            自分手札＝自分手札と山札一覧を配列足す。
            自分手札ラベルに「自分の手札:{自分手札の要素数}枚」をテキスト設定。
        違えば、
            情報ラベルに「😊 やった！」をテキスト設定。1秒待つ。
            相手手札＝相手手札と山札一覧を配列足す。
            相手手札ラベルに「相手の手札:{相手手札の要素数}枚」をテキスト設定。
        ここまで。
        山札一覧＝空配列。
        山札ラベルに「山札:{山札一覧の要素数}枚」をテキスト設定。
    ここまで。
    クリア判定。
    もし、順番＝「相手」ならば、:
        1秒待つ。順番＝「自分」。情報ラベルに「あなたの番です。カードを選んでね。」をテキスト設定。
ここまで。

●クリア判定とは
    # クリア判定
    残数＝0
    豚カードを反復：
        もし、対象≠−1ならば、残数＝残数＋1
    もし、残数＝0ならば
        自分枚数＝自分手札の要素数
        相手枚数＝相手手札の要素数
        もし、自分枚数＝相手枚数ならば
            判定＝「引き分け」
        違えば、もし、自分枚数＜相手枚数ならば
            判定＝「勝利！🎊」
        違えば
            判定＝「敗北😭」
        ここまで。
        順番＝「終了」
        情報ラベルに「ゲームクリア！判定は...{判定}」をテキスト設定。
        戻る。
    ここまで。
ここまで。

●相手カード選択処理とは
    クリア判定。
    # カード選択
    オンの間
        ID=52の乱数
        もし(豚カード[ID]=-1)ならば、続ける。
        抜ける。
    ここまで。
    「山横」へIDのカード移動処理。
    「相手」がIDのカード選択。
ここまで。
#-----------------------------------------------------------------------
＃カード作成
#-----------------------------------------------------------------------
●(xywhで|xywhへIDの)カード作成
    変数[X,Y,W,H]=xywh。変数 枠＝W/8。W＝W-枠*2。H＝H-枠*2。
    変数 文字サイズ＝H/2.5。変数 余白=(H-文字サイズ*2*1.1)/2
    カードとは変数＝「div」のDOM要素作成。
    カードの「id」に「カード{ID}」をDOM属性設定。
    カード["カードID"]＝ID。
    カードに{
        "基準位置":"絶対位置",
        "左":"{X}px","上":"{Y}px",
        "幅":"{W}px","高さ":"{H-余白}px",
        "余白":"{余白}px 0 0 0",
        "transition": "transform 0.6s",
    }をDOMスタイル一括設定。
    DOM親要素へカードをDOM子要素追加。
    表カードとは変数＝「div」のDOM要素作成。
    表カードの「id」に「表{ID}」をDOM属性設定。
    表カード["カードID"]＝ID。
    表カードに{
        "基準位置":"絶対位置",
        "幅":"{W}px","高さ":"{H-余白}px",
        "余白":"{余白}px 0 0 0",
        "背景色":"#FFFFEE",
        "ボーダー":"solid {枠}px {白色}",
        "角丸":"{H/8}px",
        "行揃え":"中央",
        "文字サイズ":"{文字サイズ}px",
        "行高さ":"1.1em",
        "transform": "rotateY(-180deg)",
        "transition": "transform 0.6s",
        "backface-visibility": "非表示"
    }をDOMスタイル一括設定。
    カードへ表カードをDOM子要素追加。
    裏カードとは変数＝「div」のDOM要素作成。
    裏カードの「id」に「裏{ID}」をDOM属性設定。
    裏カード["カードID"]＝ID。
    裏カードに{
        "基準位置":"絶対位置",
        "幅":"{W}px","高さ":"{H-余白}px",
        "余白":"{余白}px 0 0 0",
        "背景色":"#FFCCCC",
        "ボーダー":"solid {枠}px {白色}",
        "角丸":"{H/8}px",
        "transition": "transform 0.6s",
        "backface-visibility": "非表示"
    }をDOMスタイル一括設定。
    カードへ裏カードをDOM子要素追加。
    裏カードをクリックした時には、
        ID＝対象["カードID"]。
        IDの豚カード処理。
    ここまで。
    カードで戻る。
ここまで。

●(AへIDの)カード移動処理
    x＝「#カード{ID}」の「左」をDOMスタイル取得して、「px」を空に置換。
    y＝「#カード{ID}」の「上」をDOMスタイル取得して、「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。
        カード重なりを１増やす。
        「#カード{ID}」をカード重なりに重なり設定。
    ここまで。
    「#カード{ID}」の「transform」に「translate({x}px,{y}px)」をDOMスタイル設定。
    もし、(A＝「山」)または(A＝「山横」)ならば、
        「#カード{ID}」の「transform」に「translate({x}px,{y}px)」をDOMスタイル設定。
        「#表{ID}」の「transform」に「rotateY(0)」をDOMスタイル設定。
        「#裏{ID}」の「transform」に「rotateY(180deg)」をDOMスタイル設定。
    ここまで。
ここまで。
#-----------------------------------------------------------------------
＃ 母艦作成
#-----------------------------------------------------------------------
//相対指定のDIVの中に、絶対指定のDIVを、位置を設定せずに入れ子にすると、x,yは親DOVの0,0になる。
//さらにその配下に入れた要素の絶対指定の基準も親DIVの0,0になり、この中で自由に位置設定が出来る。
●(WHで)母艦作成
    Wとは変数＝WH[0]。Hとは変数＝WH[1]。
    ELとは変数＝「div」のDOM要素作成。
    ELの「id」に「nako_base」をDOM属性設定。
    ELに{
      "基準位置": "相対位置",
      "幅": "{W}px",
      "高さ": "{H}px",
      "マージン": "auto",
      "box-sizing": "content-box",//余白とボーダーを幅と高さに含めない(ベースだけはcontent-boxにして、ボーダーは外側に付ける)
    }をDOMスタイル一括設定。
    //スマホとかの時はボーダーを付けず、bodyのマージンを無くし、全画面にアプリっぽく表示させる。
    もし、(アクセスデバイス＝「スマホ」)または(アクセスデバイス＝「タブレット」)または(クライアント幅＜W+30)ならば、    //+30はボーダーとbodyのマージン（多め）
      「body」の「マージン」に「0」をDOMスタイル設定。
    違えば、
      ELの「ボーダー」に「5px ridge #999999」をDOMスタイル設定。
    ここまで。
    DOM親要素へELをDOM子要素追加。

//「oncontextmenu="return false;"」は母艦上で右クリックのメニューを出すのを止める呪文。
    HTML＝『<style id="bokan_css_reset"></style>
<div id="nako_bokan" class="nako_bokan" oncontextmenu="return false;"></div>』
    「#nako_base」にHTMLをHTML設定。
    「#nako_bokan」に{
      "基準位置": "絶対位置",
      "幅": "{W}px",
      "高さ": "{H}px",
      "マージン": "0",
      "余白": "0",
      "文字サイズ": "16px",
      "行高さ":"normal",
      "overflow": "hidden",      //はみ出た部分は非表示。
      "box-sizing": "border-box",//余白とボーダーを幅と高さに含める。
    }をDOMスタイル一括設定。

「#nako_bokan」へDOM親要素設定。
    DOM親要素で戻る。
ここまで。

//母艦の幅と高さは、「base」と「bokan」と、必ず二つセットで合わせておく。
●(WHに)母艦サイズ設定
    Wとは変数＝WH[0]。Hとは変数＝WH[1]。
    「#nako_base」を[W,H]にDOMサイズ設定。
    「#nako_bokan」を[W,H]にDOMサイズ設定。
ここまで。
//子セレクタへのスタイルは、DOMスタイル設定では出来ないので、HTML設定にする。
●母艦CSSリセット
    CSS=『.nako_bokan div, .nako_bokan span {margin: 0; padding: 0; border: none; box-sizing: border-box;}
.nako_bokan button {margin:2px; padding: 2px 8px; font-size: 12px;}
.nako_bokan select {margin: 2px; padding: 0; font-size: 12px;}
.nako_bokan input {margin: 2px; padding: 0; font-size: 12px;}
.nako_bokan label {margin: 0; padding: 0; font-size: 12px;}』
    「#bokan_css_reset」にCSSをHTML設定。
ここまで。
#-----------------------------------------------------------------------

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

🍯 なでしこ3貯蔵庫

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

素材のアップロード