▶ 実 行
▶ 実行
クリア
!「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。 カード重なりを1増やす。 「#カード{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設定。 ここまで。 #-----------------------------------------------------------------------