Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2018/03/01 (木)

ジャンケンマンを作ってみたよ☆

| 13:30 | ジャンケンマンを作ってみたよ☆ - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - ジャンケンマンを作ってみたよ☆ - 雪乃☆雫のなでしこ日和 ジャンケンマンを作ってみたよ☆ - 雪乃☆雫のなでしこ日和 のブックマークコメント

 ムカシ、デパートのゲームコーナーなんかに置かれてたジャンケンマン。

 ・・・とゆうことを最初に書いてから、もう3ヶ月くらい経ってるっぽいね。いやいやいや;

 とっ、ともかくっ、ワタシが知っているのは、Newジャンケンマンとゆう2代目の機種のようで、いちおうそれを再現してみました。

 と言っても、ムダに「画像を使わないそれっぽくする」とゆう方針のもと作ったので、見た目の再現度はびみょーですけど・・・まあこんなもんでしょうw

 プログラムとCSSとどっちが長いんだよとゆう勢い;

 CSS・・・具合わるくなる!><

 ・・・そう言えば、前の記事でHTMLタグにtopやleftの設定を入れてると、HTML5の時に反映されずに位置がずれちゃう的なコトを書いたんだけど、実はそれは誤りで、pxが抜けてたせいでした;;;

 HTML5の時は、単位とか、あとカラーコードの前の#とかを省略してはダメのようです。(ムカシは付けてなかった気がする・・・!DOCTYPE htmlを付けなければ、ふつーに通るんですよコレが;;;)

 手の表示も、頑張って座標を取って作りました。

 ずっと、写からプログラムで座標を取れないかなーとか考えてたんだけど、ランプの明るさが一定ではないので、色や大きさにばらつきがある所から中心の一点を取るとゆうのは、どうもワタシの知恵ではもう完全にムリっぽく思われたので、結局、クリックした座標を記録していくとゆう、ほぼ手作業と変わらん手立てとなりましたw

 ところでなでしこ3では、改行の記号として{~}が使えないんですかねー?

 ジェイソンさんにすれってことかね(^▽^;

<script type="なでしこ">
#-----------------------------------------------------------

#----- 宣言 ----------
メダル=0。
敵手=。
判定=。
連勝回数=0。
得点=0。

#----- フラグ ----------
コイン投入フラグ=100。
スタートボタンオフ。
ジャンケンボタンオフ。
戻ボタンオフアニメカウンター=0。
手アニメ隔=1。
アニメ中=オフ。
相子フラグ=オフ。

#----- 音設定 ----------
音フォルダ=「http://www.geocities.jp/snowdrops890/audio/」
音_ジャンケン=音フォルダ「Jyanken.mp3」
音_ポン_ヤッタネ=音フォルダ「J_pon_win.mp3」
音_ポン_ズコー=音フォルダ「J_pon_zuko.mp3」
音_ポン_アイコ=音フォルダ「J_pon_draw.mp3」
音_ショ_ヤッタネ=音フォルダ「J_syo_win.mp3」
音_ショ_ズコー=音フォルダ「J_syo_zuko.mp3」
音_ショ_アイコ=音フォルダ「J_syo_draw.mp3」
音_メダル投入=音フォルダ「medal_in.mp3」
音_メダル戻=音フォルダ「medal_modosi.mp3」
音_メダル戻32=音フォルダ「medal_modosi_32.mp3」

#----- CSS設定 ----------
メダルCSSは、{
  "font-size": "32px",
  "background-color": "#ffdd00",
  "opacity": "1",
}
百CSSは、{
  "font-size": "16px",
  "background-color": "#CCCCCC",
  "opacity": "1",
}
判定点灯CSSは、{
  "text-shadow": "3px 5px 15px #FFEE00,-3px -5px 15px #FFEE00",
  "box-shadow": "5px 5px 10px #FFFFDD,-5px -5px 10px #FFFFDD,5px 10px 15px #FFEEDD inset,-5px -10px 15px #FFEEDD inset",

}
判定消灯CSSは、{
  "text-shadow": "none",
  "box-shadow": "none",
  "background-color": "#FF9966",
}
得点点灯CSSは、{
  "text-shadow": "3px 3px 5px #FFEE00,-3px -3px 5px #FFEE00",
  "box-shadow": "5px 5px 10px #FFFFDD,-5px -5px 10px #FFFFDD,5px 10px 15px #FFEEDD inset,-5px -10px 15px #FFEEDD inset",
  "background-color": "#FFFFEE",
  "color": "#FFCC99",
}
得点消灯CSSは、{
  "text-shadow": "none",
  "box-shadow": "none",
  "background-color": "#FFFFFF",
  "color": "#FF9966",
}

#----- 手表示用座標 ----------
共通=「122,120{改行}125,130{改行}127,143{改行}129,155{改行}130,167{改行}167,120{改行}166,132{改行}162,144{改行}159,155{改行}156,166{改行}113,243{改行}113,254{改行}160,243{改行}160,254{改行}46,118{改行}57,117{改行}64,110{改行}66,97{改行}55,171{改行}63,179{改行}74,183{改行}83,189{改行}94,195{改行}85,202{改行}76,210{改行}77,221{改行}86,229{改行}96,231{改行}108,232{改行}119,233{改行}130,234{改行}141,235{改行}153,235{改行}166,233{改行}178,232{改行}188,229{改行}195,220{改行}193,210{改行}184,202{改行}194,195{改行}204,188{改行}212,179{改行}218,170{改行}225,160{改行}228,149{改行}233,138」
グー=「49,161{改行}42,152{改行}40,141{改行}42,130{改行}164,89{改行}175,88{改行}186,86{改行}197,89{改行}204,99{改行}210,109{改行}220,108{改行}230,116{改行}235,127{改行}72,87{改行}80,78{改行}92,74{改行}103,77{改行}114,82{改行}125,78{改行}135,72{改行}146,75{改行}154,83」
チョキ=「62,86{改行}61,75{改行}60,63{改行}60,52{改行}61,40{改行}65,30{改行}72,22{改行}83,19{改行}94,21{改行}100,30{改行}104,43{改行}106,54{改行}110,67{改行}120,64{改行}125,52{改行}130,41{改行}135,30{改行}142,21{改行}153,17{改行}164,20{改行}169,29{改行}170,41{改行}168,54{改行}165,65{改行}166,78{改行}49,161{改行}42,152{改行}40,141{改行}42,130{改行}164,89{改行}175,88{改行}186,86{改行}197,89{改行}204,99{改行}210,109{改行}220,108{改行}230,116{改行}235,127」
パー=「43,170{改行}33,166{改行}23,161{改行}14,154{改行}6,146{改行}8,135{改行}13,124{改行}24,122{改行}35,119{改行}176,69{改行}186,62{改行}195,53{改行}203,45{改行}213,38{改行}224,43{改行}227,54{改行}226,66{改行}222,77{改行}220,88{改行}230,95{改行}241,90{改行}253,87{改行}263,93{改行}262,104{改行}257,115{改行}250,123{改行}243,132{改行}62,86{改行}61,75{改行}60,63{改行}60,52{改行}61,40{改行}65,30{改行}72,22{改行}83,19{改行}94,21{改行}100,30{改行}104,43{改行}106,54{改行}110,67{改行}120,64{改行}125,52{改行}130,41{改行}135,30{改行}142,21{改行}153,17{改行}164,20{改行}169,29{改行}170,41{改行}168,54{改行}165,65」

#----- 手のアニメーション表示 ----------
グー=グー改行共通をCSV取得。グーの手作成。グー=0。
チョキ=チョキ改行共通をCSV取得。チョキの手作成。チョキ=1。
パー=パー改行共通をCSV取得。パーの手作成。パー=2。
手アニメ表示。

#----- イベント設定 ----------
「#coin」をクリックした時には、コイン投入。ここまで。
「#start」をクリックした時には、スタート。ここまで。
「#gu」をクリックした時には、0で勝負処理。ここまで。
「#chi」をクリックした時には、1で勝負処理。ここまで。
「#pa」をクリックした時には、2で勝負処理。ここまで。
「#modosi」をクリックした時には、メダル戻。ここまで。
「#info」をクリックした時には、説明。ここまで。

●スタート
 もし、スタートボタンオンならば、
  「#voice」に「<audio src="{音_ジャンケン}" autoplay></audio>」をDOM_HTML設定。
  手アニメ隔=0.1。判定消灯。
  スタートボタンオフ。ジャンケンボタンオン。戻ボタンオフボタン有効変更。
  「#mes_coin」にDOMテキスト設定。
 ここまで。
ここまで。
●(自手で)勝負処理
 もし、ジャンケンボタンオンならば、
  手アニメ隔=0。判定消灯。
  ジャンケンボタンオフボタン有効変更。自手のボタン点灯。
  敵手=3の乱数。敵手表示。
  結果は(敵手 - 自手 + 3) % 3
  もし、結果が0ならば、
   もし、相子フラグ=オンならば、「#voice」に「<audio src="{音_ショ_アイコ}" autoplay></audio>」をDOM_HTML設定。
   違えば、「#voice」に「<audio src="{音_ポン_アイコ}" autoplay></audio>」をDOM_HTML設定。
   ジャンケンボタンオンボタン有効変更。//自手のボタン点灯。
   「#aiko」に判定点灯CSSDOMスタイル一括設定。相子フラグ=オン。
  違えばもし、結果が1ならば、
   もし、相子フラグ=オンならば、「#voice」に「<audio src="{音_ショ_ヤッタネ}" autoplay></audio>」をDOM_HTML設定。
   違えば、「#voice」に「<audio src="{音_ポン_ヤッタネ}" autoplay></audio>」をDOM_HTML設定。
   「#kachi」に判定点灯CSSDOMスタイル一括設定。相子フラグ=オフ。
   得点消灯。得点加算。
   もし、連勝回数=5ならば、
    「#se」に「<audio src="{音_メダル戻32}" autoplay></audio>」をDOM_HTML設定。
    2秒後には
      戻ボタンオン。メダル戻。
    ここまで。
   違えば、
    戻ボタンオン。スタートボタンオンボタン有効変更。自手のボタン点灯。
    「#mes_coin」に「スタートを<BR>おしてね!」をDOMテキスト設定。
   ここまで。
  違えばもし、結果が2ならば、
   もし、相子フラグ=オンならば、「#voice」に「<audio src="{音_ショ_ズコー}" autoplay></audio>」をDOM_HTML設定。
   違えば、「#voice」に「<audio src="{音_ポン_ズコー}" autoplay></audio>」をDOM_HTML設定。
   「#make」に判定点灯CSSDOMスタイル一括設定。相子フラグ=オフ。
   連勝回数=0。得点=0。得点消灯。
   もし、メダル≦0ならば、
    ゲームオーバー。
   違えば、
    コイン投入フラグ=2。コイン投入。
   ここまで。
  ここまで。
 ここまで。
ここまで。
●得点加算
  連勝回数=連勝回数+1。
  もし、(連勝回数≧1)かつ(連勝回数≦5)ならば、
   得点=2^連勝回数。
   「#p{得点}」に得点点灯CSSDOMスタイル一括設定。
  ここまで。
ここまで。
●メダル戻
 もし、戻ボタンオンならば、
  戻ボタンオフ。スタートボタンオフ。ジャンケンボタンオフボタン有効変更。
  もし、連勝回数=5でなければ、「#se」に「<audio src="{音_メダル戻}" autoplay></audio>」をDOM_HTML設定。
  メダル=メダル+得点。連勝回数=0。得点=0。
  「#medal」にメダルをDOMテキスト設定。
  得点消灯。判定消灯。
  コイン投入フラグ=2。コイン投入。
 ここまで。
ここまで。
#-----------------------------------------------------------
●判定消灯
  「#aiko」に判定消灯CSSDOMスタイル一括設定。
  「#kachi」に判定消灯CSSDOMスタイル一括設定。
  「#make」に判定消灯CSSDOMスタイル一括設定。
ここまで。
●得点消灯
  「#p2」に得点消灯CSSDOMスタイル一括設定。
  「#p4」に得点消灯CSSDOMスタイル一括設定。
  「#p8」に得点消灯CSSDOMスタイル一括設定。
  「#p16」に得点消灯CSSDOMスタイル一括設定。
  「#p32」に得点消灯CSSDOMスタイル一括設定。
ここまで。
●(自手の)ボタン点灯
  もし、自手がグーならば、
   「#gu」をオンに有効変更。「#chi」をオフに有効変更。「#pa」をオフに有効変更。
  違えばもし、自手がチョキならば、
   「#gu」をオフに有効変更。「#chi」をオンに有効変更。「#pa」をオフに有効変更。
  違えばもし、自手がパーならば、
   「#gu」をオフに有効変更。「#chi」をオフに有効変更。「#pa」をオンに有効変更。
  ここまで。
ここまで。
#-----------------------------------------------------------
●ボタン有効変更
 もし、スタートボタンオンならば、
   「#start」をオンに有効変更。
 違えば、
  「#start」をオフに有効変更。
 ここまで。
 もし、ジャンケンボタンオンならば、
   「#gu」をオンに有効変更。「#chi」をオンに有効変更。「#pa」をオンに有効変更。
 違えば、
   「#gu」をオフに有効変更。「#chi」をオフに有効変更。「#pa」をオフに有効変更。
 ここまで。
 もし、戻ボタンオンならば、
  「#modosi」をオンに有効変更。
 違えば、
  「#modosi」をオフに有効変更。
 ここまで。
ここまで。
●(btnをAに)有効変更
 もし、A=オンならば、
  「{btn}_active」に「{btn}:active{波カッコ}box-shadow:none; top:3px;{波カッコ閉じ}
{btn}{波カッコ}box-shadow: 0 3px 0 #666666,5px 5px 30px #FFFFFF inset,-5px -5px 30px #FFFFFF inset;{波カッコ閉じ}」をDOM_HTML設定。
 違えば、
  「{btn}_active」に「{btn}:active{波カッコ}box-shadow: 0 3px 0 #666666; top:0px;{波カッコ閉じ}
{btn}:active{波カッコ}box-shadow: 0 3px 0 #666666{波カッコ閉じ}」をDOM_HTML設定。
 ここまで。
ここまで。
#-----------------------------------------------------------
●コイン投入
 もし、コイン投入フラグ=1ならば、
  メダル=メダル-1。
  「#se」に「<audio src="{音_メダル投入}" autoplay></audio>」をDOM_HTML設定。
  「#medal」にメダルをDOMテキスト設定。
  「#coin」の「opacity」に「0」をDOMスタイル設定。  #透明度を0にしてメダルを消す。
  「#mes_coin」に「スタートを<BR>おしてね!」をDOMテキスト設定。
  コイン投入フラグ=0。手アニメ隔=0。スタートボタンオンボタン有効変更。
 違えばもし、コイン投入フラグ=2ならば、
  「#mes_coin」に「メダル<BR>いれる」をDOMテキスト設定。
  「#mes_coin」の「opacity」に「1」をDOMスタイル設定。
  「#coin」に「$」をDOMテキスト設定。
  「#coin」にメダルCSSDOMスタイル一括設定。
  「#coin」の「opacity」に「1」をDOMスタイル設定。
  コイン投入フラグ=1。
 違えばもし、コイン投入フラグ=100ならば、
  メダル=11。
  「#se」に「<audio src="{音_メダル投入}" autoplay></audio>」をDOM_HTML設定。
  「#coin」の「opacity」に「0」をDOMスタイル設定。
  「#mes_coin」の「opacity」に「0」をDOMスタイル設定。
  2秒後には
  「#voice」に「<audio src="{音_メダル戻}" autoplay></audio>」をDOM_HTML設定。
  「#medal」に「11」をDOMテキスト設定。
  「#txtwin」の「opacity」に「0」をDOMスタイル設定。
  「#txtwin」の「transform」に「scale(.1)」をDOMスタイル設定。
  コイン投入フラグ=2。コイン投入。
  ここまで。
 ここまで。
ここまで。
#-----------------------------------------------------------
●ゲームオーバー
  手アニメ隔=1。
  「#txtwin」の「opacity」に「1」をDOMスタイル設定。
  「#txtwin」の「transform」に「scale(1)」をDOMスタイル設定。
  「#mes_coin」に「100<BR>いれる」をDOMテキスト設定。
  「#coin」に「100」をDOMテキスト設定。
  「#coin」に百CSSDOMスタイル一括設定。
  ジャンケンボタンオフボタン有効変更。
  判定消灯。コイン投入フラグ=100。
ここまで。
#-----------------------------------------------------------
●(Aの)手作成
 もし、A=グーならば、「#img_gu」へ描画開始。
 違えばもし、A=チョキならば、「#img_chi」へ描画開始。
 違えばもし、A=パーならば、「#img_pa」へ描画開始。
  黒色線色設定。
  黒色塗り色設定。
  [140,140]に139の描画。
  赤色線色設定。
  赤色塗り色設定。
  P=配列。
  Aを反復
    P=対象を「,」で区切る。
    [P[0],P[1]]に3の描画。
  ここまで。
ここまで。
●手アニメ表示
 もし、手アニメ隔=0でなければ、、
  もしアニメカウンター=グーならば、
    「#img_gu」の「opacity」に「1」をDOMスタイル設定。
    「#img_chi」の「opacity」に「1」をDOMスタイル設定。
  違えばもしアニメカウンター=チョキならば、
    「#img_gu」の「opacity」に「0」をDOMスタイル設定。
  違えばもしアニメカウンター=パーならば、
   「#img_chi」の「opacity」に「0」をDOMスタイル設定。
  ここまで。
 ここまで。
 もしアニメカウンター≧2ならばアニメカウンター=0。
 違えばアニメカウンター=アニメカウンター+1。
 「手アニメ表示」を(手アニメ隔)秒後。
ここまで。
●敵手表示
  もし、敵手=グーならば、
   「#img_gu」の「opacity」に「1」をDOMスタイル設定。
  違えばもし、敵手=チョキならば、
    「#img_gu」の「opacity」に「0」をDOMスタイル設定。
    「#img_chi」の「opacity」に「1」をDOMスタイル設定。
  違えばもし、敵手=パーならば、
    「#img_gu」の「opacity」に「0」をDOMスタイル設定。
    「#img_chi」の「opacity」に「0」をDOMスタイル設定。
  ここまで。
ここまで。
●説明
 「【遊び方】
 まず100を入れて、メダルを11枚ゲットします。
 次に、メダルを1枚入れたら、スタートボタンを押してジャンケンを開始。
 グーチョキパーの任意のボタンを押してジャンケンをし、勝てば得点のボタンが点灯、連勝すると得点がアップしていき、メダル戻しでの得点分のメダルが払い戻せますが、負けると0に戻ってしまいます。
 あいこの時は勝負が付くまで続けてジャンケンボタンが押せます。
 負けたら、また次のメダルを入れて勝負をし、メダルを使い切ったらゲームオーバーです。(100を入れて再スタートできます)
 特にクリア要件はありませんので、自分で目標を決めて頑張りましょう。」を言うここまで。
#-----------------------------------------------------------
●CSV取得(Sを|Sの|Sで)
  仮表=配列。
  S=Sを改行区切る。
  Sを反復
    それを「,」で区切る。
    仮表にそれ配列追加。
  ここまで。
  仮表で戻るここまで。
#-----------------------------------------------------------------------
</script>

<style type="text/css">
/* ゲーム画面 */
#base {
  margin:auto;
  width:400px;
  height:600px;
}
#gamen {
  position:absolute;
  width:400px;
  height:420px;
  background-color:#F5EE55;
  border:solid 10px silver;
}
/* ジャンケンの手を表示する */
#img_gu {
  position:absolute;
  top:130px; left:60px;
  z-index:2;
}
#img_chi {
  position:absolute;
  top:130px; left:60px;
  z-index:1;
}
#img_pa {
  position:absolute;
  top:130px; left:60px;
  z-index:0;
}
/* 得点 */
.point {
  position:absolute;
  display:table-cell;
  width:56px;
  height:56px;
  background-color:#FFFFFF;
  border:solid 1px #CC6633;
  border-radius:30px;

  vertical-align:middle;
  text-align:center;
  color:#FF9966;
  font-weight:bold;
  font-size:36px;
}
/* 勝ち負けの判定 */
.hantei {
  position:absolute;
  display:table-cell;
  width:110px;
  background-color:#FF9966;
  border:solid 3px #000000;
  border-radius:30px;

  vertical-align:middle;
  text-align:center;
  color:#FFFFFF;
  font-weight:bold;
  font-size:28px;
}

/* テキストウィンドウ */
#txtwin {
  position:absolute;
  display:table-cell;
  top:200px;
  width:400px;
  padding:30px 0px;
  z-index:3;
  background-color:rgba(0, 0, 0, 0.7);
  color:#FFFFFF;
  text-align:center;
  vertical-align:middle;
  font-weight:bold;
  font-size:32px;

  transition: opacity 0.5s, transform 0.5s;    /* 0.5秒かけて透明度とサイズの変化 */
  opacity:0;
  transform: scale(.1);
}

/* 操作盤 */
#buttonarea {
  position:absolute;
  width:415px;
  height:180px;
  top:432px;
  left:-10px;
  background-color:#FFFFCC;
  border:solid 3px silver;
  border-radius:10px;
}

/* ボタン総合設定 */
#button {
  position:absolute;
  width:420px;
  top:20px;
}
#button span{
  position:absolute;
  text-align:center;
}
.btn {
  position:relative;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  text-decoration:none;
  cursor:pointer;
  width:50px;
  height:50px;
  border-radius:30px;
  border:1px solid #999999;
  box-shadow:0 3px 0 #666666;
}
/* ボタン個別設定 */
#start {
  background-color:#FF0000;
}
#gu {
  background-color:#66FF66;
}
#chi {
  background-color:#6699FF;
}
#pa {
  background-color:#FF6699;
}
#modosi {
  background-color:#FF0000;
}

/* コイン(メダルまたは百投入ボタン) */
#coin {
  position:relative;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  text-decoration:none;
  cursor:pointer;

  width:50px;
  height:50px;
  border-radius:30px;
  border:1px solid #999999;
  box-shadow:0 2px 0 #666666;
  background-color:#CCCCCC;

  font-weight:bold;
  font-size:16px;   /* 100(font-size:16px;) メダル(font-size:32px;)*/
  color:#FFFFFF;
  text-shadow:0 1px 1px rgba(0, 0, 0, 1);
}
#coin:active {
  left: -10px;
}
#mes_coin {
  top:100px;
  left:20px;
  line-height:20px;
}

/* メダル残り枚数表示 */
#medal {
  position:absolute;
  display:table-cell;
  width:80px;
  background-color:#000000;
  border:solid 3px #000000;
  border-radius:10px;

  vertical-align:middle;
  text-align:center;
  color:#FFFF66;
  font-weight:bold;
  font-size:28px;
  top:100px;
  left:275px;
}

#info {
  position:absolute;
  top:390px;
  left:330px;
}
</style>
<style type="text/css" id="start_active"></style>
<style type="text/css" id="gu_active"></style>
<style type="text/css" id="chi_active"></style>
<style type="text/css" id="pa_active"></style>
<style type="text/css" id="modosi_active"></style>

<div id="base">
 <div id="gamen">
  <span class="point" id="p2" style="top:25px; left:30px;">2</span>
  <span class="point" id="p4" style="top:10px; left:100px;">4</span>
  <span class="point" id="p8" style="top:5px; left:170px;">8</span>
  <span class="point" id="p16" style="top:10px; left:240px;">16</span>
  <span class="point" id="p32" style="top:20px; left:310px;">32</span>

  <span class="hantei" id="make" style="top:95px; left:10px;">まけ</span>
  <span class="hantei" id="aiko" style="top:70px; left:142px;">あいこ</span>
  <span class="hantei" id="kachi" style="top:95px; left:270px;">かち</span>

  <canvas id="img_gu" width="280px" height="280px"></canvas>
  <canvas id="img_chi" width="280px" height="280px"></canvas>
  <canvas id="img_pa" width="280px" height="280px"></canvas>

  <span id="txtwin">GAME OVER</span>
  <div id="se"></div><div id="voice"></div>
  <button id="info">遊び方</button>

  <div id="buttonarea">
   <div id="button">
    <span style="left:10px;">スタート<BR><a class="btn" id="start"></a></span>
    <span style="left:110px;">グー<BR><a class="btn" id="gu"></a></span>
    <span style="left:170px;">チョキ<BR><a class="btn" id="chi"></a></span>
    <span style="left:230px;">パー<BR><a class="btn" id="pa"></a></span>
    <span style="left:320px;">メダルもどし<BR><a class="btn" id="modosi"></a></span>
    <span id="mes_coin">100<BR>いれる</span><span style="top:90px; left:80px;"><a id="coin">100</a></span>
    <span style="top:100px; left:170px;">メダルのこり</span><span id="medal">0</span><span style="top:120px; left:370px;">まい</span>
   </div><!-- button -->
  </div><!-- buttonarea -->
 </div><!-- gamen -->
</div><!-- base -->

 あと、HTML埋め込み時のスクリプトのバージョンはまだv3.0.29みたい?

 3.0.31にすると動かないんだよね~?(いや、詳細な変更点のトップは3.0.29になってるし、コレでいいのか?)

 あとあと、v3.0.21は問題ないんだけど、v3.0.29にするとなぜだかIEで動かなくなっちゃうような???むむむ。

 取りあえず、v3.0.21でUPし直した~。

http://www.geocities.jp/snowdrops890/wnako3_test/12_new_jyanken_man.html

 さてさて、んな感じでこんな感じ~☆

 動作としては、だいぶそれっぽいかと思うんだけど・・・

 そうそう、前に一度たりとも32まで行かないとかぼやいてましたが、行く時は結構行くようで、2連続で行ったこともありました!

 やっぱり実機にはズルが仕込まれていたに違いないよ!!!w

 しかし・・・勝っても負けても損も特も無いとなると、ついつい問答無用で5連勝32枚戻しを狙うようになり、駆け引きがなくなってなんかつまらん;

 この手の機種は、こら辺の駆け引きが重要で、面白かったんだったのに・・・


※このブログでは「]]」が消えてしまうっぽい?(これも何かのはてな記法??)

 これも変換しなきゃダメか・・・

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20180301

2018/01/17 (水)

ジャンケンマンってこんな画面だっけ?

| 15:25 | ジャンケンマンってこんな画面だっけ? - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - ジャンケンマンってこんな画面だっけ? - 雪乃☆雫のなでしこ日和 ジャンケンマンってこんな画面だっけ? - 雪乃☆雫のなでしこ日和 のブックマークコメント

 の後ちょこっと画像検索してみた結果によると、ワタシの知ってるジャンケンマンは、newジャンケンマンという、二代目の機種だったっぽいです。

 でっ・・・

 こんな感じ・・・デスかねえ?

http://www.geocities.jp/snowdrops890/wnako3_test/12_gamen.html

 画面だけですw

 なでしこではほとんどナニもしないのでコードも載せません。

 CSS・・・具合わるくなる!(爆)

 こんなことなら、全部なでしこで、canvasに描画した方が楽な気もするけど、まだなでしこ3では、角丸四角が出来ないしね~。(なるべく画像を使わずに、それっぽく再現したいとゆう方針)

 しかも、「<!DOCTYPE html>」を付けたら、いきなり表示が崩れました。

 HTMLの中で、個別にTOPとかLEFTの位置を指定していたのがダメだったんですね。

 HTML5的には、そうゆうことは一切HTML中に書いてくれるなと、ちゃんとCSSにすれとゆうことラシイです。しくしくしくしく。 ←単位のpxが抜けてたせいだったっぽい!

 あとは、機械側のジャンケンの手だけど、黒地に赤ランプで表示しているだけのものだから、なでしこで描画も出来そうに思いますが・・・モノスゴクめんどくさいヽ(;´Д`)ノ

 諦めて画像にしようか考え中www

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20180117

2017/12/08 (金)

ジャンケンマン的な・・・?

| 13:47 | ジャンケンマン的な・・・? - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - ジャンケンマン的な・・・? - 雪乃☆雫のなでしこ日和 ジャンケンマン的な・・・? - 雪乃☆雫のなでしこ日和 のブックマークコメント

 色々気が多くなって、あちこち手を付けると結局どれもこれも進まない

 ただでさえ、12月は忙しいしねぇ~;;;


 前、(https://nadesiko.g.hatena.ne.jp/snowdrops89/20171121/1511244526

 # --- イベントを設定 --- (*3)
 「#gu」をクリックした時には、0で勝負処理。ここまで。
 「#choki」をクリックした時には、1で勝負処理。ここまで。
 「#pa」をクリックした時には、2で勝負処理。ここまで。

 みたいな書き方ができるようになったことを知り、一体いつからだろうとゆうことを書いていたんですが、どうも手元で試そうとするとうまくできないにゃー・・・と思っていたら、どうやらバージョン0.1.8からの機能のようです。

 正式にリリースのお知らせが出たのはバージョン0.1.7までなんだけど、最新版はわりとの後すぐに、こっと0.1.8にアップしていたんだね。

 よかったぁ~☆(ずっと前からできてたのに単にワタシが知らなかっただけってはなしじゃなくてw)


 さてさて、ジャンケンはまあ、それだけでもゲームとして成立しているとも言えますが、いかんせん単純すぎるので、たいていは何かを決める時くらいにしか使わないですケド、それだけで長く遊べるジャンケンのゲームと言えば、グリコジャンケンかジャンケンマンかってところだと思います。

 ジャンケンマンってのは、ムカシ駄菓子屋さんの店先やデパートの遊戯スペースなんかに置かれていたメダルゲーム機です。

 ゲームセンターCXでたまに有野カチョーが駄菓子屋でプレイしているのをお見かけするのは、ジャンケンに勝つとルーレットがって止まったところの点数に応じて勝手にメダルが払い戻されるとゆうことになってるみたいなんですが、ワタシが知ってるのはそうじゃ無かった。

 一勝つと2、こから連勝を続けると4→8→16→32と最大5連勝まで得点がアップしていき、自分でメダル戻しをすることでの得点に応じてメダルが払い戻されたんだけど、途中で負けるとそれまでの得点がチャラになってしまうので、どこで払い戻すか勝負をかけるかは考えどころでした。


 ・・・とゆうわけで(?)前のマイナビの記事のジャンケンゲームをちょこっと改造して、なんかこんな感じだったかにゃあ・・・とゆうのを作ってみた。

<script type="なでしこ">

#---宣言-----
メダル=11。
連勝回数=0。
得点=0。
判定=。
ジャンケンフラグ=オフ。

# --- HTMLを定義 --- (*1)
「#nako3_div_1」に「
<div style="padding:15px; border:1px solid silver;">
  <div id="mes"></div>
  <BR>
  <div id="janken"></div>
  <BR>
  <div id="point"></div>
  <div id="coin"></div>

  <div id="hand">
    <button id="start">スタート</button>  
    <button id="gu">グー</button>
    <button id="choki">チョキ</button>
    <button id="pa">パー</button>  
    <button id="modosi">メダル戻し</button>
  </div>
</div>
」をDOM_HTML設定

# --- HTMLのスタイルを定義 --- (*2)
文字スタイルは、{
  "font-size": "24px",
  "padding": "10px",
  "line-height": "35px"
}
「#mes」に文字スタイルをDOMスタイル一括設定。
「#janken」に文字スタイルをDOMスタイル一括設定。
「#point」に文字スタイルをDOMスタイル一括設定。
「#coin」に文字スタイルをDOMスタイル一括設定。
「#hand button」に文字スタイルをDOMスタイル一括設定。

#---画面表示------
「#mes」に「じゃんけんしよう!☆スタートボタンを押してね☆」をDOMテキスト設定。
「#janken」に「連勝すると得点アップ!最大5連勝まで。<br>メダル戻しでポイントをメダルに替えられます。」をDOMテキスト設定。
「#point」に「ポイント:0点」をDOMテキスト設定。
「#coin」に「残りメダルは{メダル}枚です」をDOMテキスト設定。

# --- イベントを設定 --- (*3)
「#gu」をクリックした時には、0で勝負処理。ここまで。
「#choki」をクリックした時には、1で勝負処理。ここまで。
「#pa」をクリックした時には、2で勝負処理。ここまで。
「#start」をクリックした時には、スタート。ここまで。
「#modosi」をクリックした時には、メダル戻。ここまで。

●(自手で)勝負処理
  もし、ジャンケンフラグ=オンでなければ、戻る。
  敵手=3の乱数。
  結果は(敵手 - 自手 + 3) % 3
  もし、判定=「あいこ」ならば、掛声=「しょっ!」
  違えば、掛声=「ポン!」

  もし、結果が0ならば、
    判定は「あいこ」
    メッセージは「あーいこーで...」
  ここまで。
  もし、結果が1ならば、
    判定は「やったね!」
    得点加算。
    もし、得点=32ならば、
      メダル戻説明は。
      メッセージは「5連勝!ポイントを払い戻すよ!」
    違えば、
      メダル戻説明は「ポイントはメダル戻しでメダルに替えられます」。
      メッセージは「☆スタートボタンを押してね☆」
    ここまで。
    「#point」に「ポイント:{得点}点  {メダル戻説明}」をDOMテキスト設定。
  ここまで。
  もし、結果が2ならば、
    判定は「ズコー」
    「#point」に「ポイント:0点」をDOMテキスト設定。
    もし、メダル≦0ならば、
      もし、得点=0ならば、メッセージは「★メダルが無くなりました。終了です★」
      違えば、メッセージは「ポイントは没収です。★メダルが無くなりました。終了です★」
      ジャンケンフラグ=キャンセル。
    違えば、
      もし、得点=0ならば、メッセージは「☆スタートボタンを押してね☆」
      違えば、メッセージは「ポイントは没収です。☆スタートボタンを押してね☆」
      連勝回数=0。得点=0。
      ジャンケンフラグ=オフ。
    ここまで。
  ここまで。
  「#mes」にメッセージをDOMテキスト設定。
  手説明=["グー","チョキ","パー"]
  自手説明=手説明[自手]
  敵手説明=手説明[敵手]
  「#janken」に「<b>{掛声}</b><br>
相手は<b>{敵手説明}</b> ... {判定}」をDOM_HTML設定。
ここまで。
#-----------------------------------------------------------------------
●得点加算
  連勝回数=連勝回数+1。
  もし、(連勝回数≧1)かつ(連勝回数≦5)ならば、得点=2^連勝回数。
  もし、連勝回数=5ならば、
    ジャンケンフラグはキャンセル。「メダル戻」を2秒後。
  違えば、
    ジャンケンフラグ=オフ。
  ここまで。
ここまで。
#-----------------------------------------------------------------------
●スタート
 もし、ジャンケンフラグ=オフならば、
  もし、得点=0ならば、メダル=メダル-1。
  「#point」に「ポイント:{得点}点」をDOMテキスト設定。
  「#coin」に「残りメダルは{メダル}枚です」をDOMテキスト設定。
  「#mes」に「じゃーんけーん...」をDOMテキスト設定。
  「#janken」に「 <br> 」をDOMテキスト設定。
  ジャンケンフラグ=オン。
 ここまで。
ここまで。

●メダル戻
 もし、(ジャンケンフラグ≠オン)かつ(得点>0)ならば、
  メダル=メダル+得点。連勝回数=0。得点=0。
  「#coin」に「残りメダルは{メダル}枚です」をDOMテキスト設定。
  「#mes」に「☆スタートボタンを押してね☆」をDOMテキスト設定。
  「#janken」に「 <br> 」をDOMテキスト設定。
  「#point」に「ポイント:0点」をDOMテキスト設定。
  ジャンケンフラグ=オフ。
 ここまで。
ここまで。
#-----------------------------------------------------------------------
</script>
<H1>ジャンケンマン的な・・・</H1>
<HR>
<div id="nako3_div_1"></div>
<HR>

http://www.geocities.jp/snowdrops890/wnako3_test/12_jyanken_man.html

 どうかなあ? ルール的にはタブンこんな感じだったと思うんだけど・・・

 やっぱり、ラシイ画像を使って実機っぽく作らないと、こうゆうのは面白くないよね;

 これまで丸いボタンも作ったし、CSSアニメーションなんかも覚えたので、それらを使ってちゃんとゲームらしくしてみたいね。


 ・・・ところでコレ、16(4連勝)までは結構行くんだけど、32(5連勝)まで行けたことは一度も無いので、絶対にズルをされているんだと思ってたんだけど、こうして作ってみると案外・・・リアルかもしない

 テストで何もやったけど、まだ一度たりとも32まで行ってないです;;;

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20171208

2017/11/21 (火)

新機能?!と、ジャンケンの勝敗判定のこととか

| 15:08 | 新機能?!と、ジャンケンの勝敗判定のこととか - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - 新機能?!と、ジャンケンの勝敗判定のこととか - 雪乃☆雫のなでしこ日和 新機能?!と、ジャンケンの勝敗判定のこととか - 雪乃☆雫のなでしこ日和 のブックマークコメント

 マイナビ連載16目はジャンケンでした。

 http://news.mynavi.jp/series/nadeshiko/016/

 でも、注目すべきはジャンケンよりも何よりもっ・・・

 # --- イベントを設定 --- (*3)
 「#gu」をクリックした時には、0で勝負処理。ここまで。
 「#choki」をクリックした時には、1で勝負処理。ここまで。
 「#pa」をクリックした時には、2で勝負処理。ここまで。

 こっ、こんな書き方が出来たとわっ!!!

 うわあぁん、全然知らなかった。一体いつからデスか?!?!

 しかし、コレは大変素晴らしいですよ(≧▽≦)

 「ここまで」が必要なことを除けば、ほとんどなでしこ1のGUIとおんなじ感じにイベントを設定できるじゃないですか♪

 しかもしかも、DOMイベント設定ではどうもうまく出来なかった、関数引数がふつーに付けられるようですヽ(^o^)ノ

 他のイベントもみんな使えるのかなー?

 とりあえず、「マウス押した時」「マウス離した時」は使えることを確認☆


 それから、項目は追加されたけど説明が一切無くて、なんかよく分からんと思っていた「DOMスタイル一括設定」の仕方も分かりました。

 これも、使えそうですね☆

 までは、スタイルのタグだけ作って置いて、DOM_HTML設定したりしてたんですが。

 本当はスタイルもね、DOMスタイル設定のよーに、いっこいっこ書いていく場合なら、できればなでしこ1みたいに日本語で書けると助かるのに・・・などと思ったりするところなんだけど、CSSを学びまくっている現状では結局、CSS的にまとめて書いたほうが早いってゆうかw


 ところで、ジャンケンの勝敗判定ですけど・・・

 結果は(敵手 - 自手 + 3) % 3
 もし、結果が0ならば、判定は「あいこ」
 もし、結果が1ならば、判定は「勝ち★」
 もし、結果が2ならば、判定は「負け」

 この4行・・・ってゆうか、下の三行は単に日本語で勝ち負けを表示させるための処理なんで、実質最初の一行だけで、計算出来ちゃうってコトなんですね!w(゜o゜)w

 しかし、なんでんなコトが可能なのかについての解説はありません。

 世の中の賢い方々にとっては、こんなの一見して分かるべきカンタンなコトなんですかね?!

 なにしろワタシは数学・・・以前の算数の段階で挫折している人です;

 九九の表が信用できずに、小豆(!)を並べて数えたりしてましたw

 そうゆう検証が難しくなった時点で、算数が分からなくなっていきました;;;

 でも、このくらいの式なら、全部を検証してみることが出来そう


0,ジャンケンの勝敗表

            |        自        手
            |-----------------------------
            | グー(0) |チョキ(1)| パー(2) 
 -----------|---------|---------|---------
  | グー(0) | あいこ  | 負け;  | 勝ち★  
敵|---------|---------|---------|---------
  |チョキ(1)| 勝ち★  | あいこ  | 負け;  
手|---------|---------|---------|---------
  | パー(2) | 負け;  | 勝ち★  | あいこ  
 -----------------------------------------

 表にすると、こうゆうこと。

 して、あいこ=0、勝ち★=1、負け=2、とゆう計算結果になる予定。

 全部で9パターンしかないから地道な検証もヨユウですw


1,敵手-自手

            |        自        手
            |-----------------------------
            | グー(0) |チョキ(1)| パー(2) 
 -----------|---------|---------|---------
  | グー(0) | 0-0=0   | 0-1=-1  | 0-2=-2  
敵|---------|---------|---------|---------
  |チョキ(1)| 1-0=1   | 1-1=0   | 1-2=-1  
手|---------|---------|---------|---------
  | パー(2) | 2-0=2   | 2-1=1   | 2-2=0   
 -----------------------------------------

 あいこはまあ分かるんだよねー。

 同一の手を出したらあいこなんだから、引けば0になる道理。

 して、どうやら、自手がグーだった場合の結果が基準となるっぽい。


2,+3(3を足します)

            |        自        手
            |-----------------------------
            | グー(0) |チョキ(1)| パー(2) 
 -----------|---------|---------|---------
  | グー(0) | 0+3=3   | -1+3=2  | -2+3=1  
敵|---------|---------|---------|---------
  |チョキ(1)| 1+3=4   | 0+3=3   | -1+3=2  
手|---------|---------|---------|---------
  | パー(2) | 2+3=5   | 1+3=4   | 0+3=3   
 -----------------------------------------

 むむむ・・・


3,%3(3で割った余り

            |        自        手
            |-----------------------------
            | グー(0) |チョキ(1)| パー(2) 
 -----------|---------|---------|---------
  | グー(0) | 3%3=0   | 2%3=2   | 1%3=1   
敵|---------|---------|---------|---------
  |チョキ(1)| 4%3=1   | 3%3=0   | 2%3=2   
手|---------|---------|---------|---------
  | パー(2) | 5%3=2   | 4%3=1   | 3%3=0   
 -----------------------------------------

 おおぉ?!

 1余り・・・となるものと、0余り・・・となるものがあるけど、ここでちゃんと計算がろいました☆

 実は、1の(敵手-自手)をした時に、答えがマイナスだった場合にだけ3を足せば、同じように計算がろうんだよね。

 こんな感じ?

結果は敵手-自手。
もし、結果<0ならば、結果=結果+3。
もし、結果=0ならば、判定は「あいこ」
もし、結果=1ならば、判定は「勝ち★」
もし、結果=2ならば、判定は「負け」

 いやいや、まてまて。分かってきた!

 もうちょっと戻って、(敵手-自手)の前に、敵手(引かれる数)が自手(引く数)より小さかった場合(答えがマイナスになってしまう場合)に、敵手に3を足して答えがプラスの値になるようにするのだとも考えられます。

 ジャンケンの手は3つしか無いから、0=グー。1=チョキ。2=パー・・・ときたら、3はまたグーで、4=チョキ、5=パー・・・とゆうことになるんだよね。

 敵手を直接変えちゃったら、プログラム上は後で手説明の時に困るけど、まあ判定のことだけ考えれば、こうゆうこったろう。

もし、敵手<自手ならば、敵手=敵手+3。
結果は敵手-自手。
もし、結果=0ならば、判定は「あいこ」
もし、結果=1ならば、判定は「勝ち★」
もし、結果=2ならば、判定は「負け」

 だけど、もしとか使わずに、一つの計算式だけで済ますために、いっかい全部に3を足してからまた3で割っているんだね。余りが0、1、2にろうのは15パズルでもやったのでした。


 それにしても一体誰が考えつくんだろう、こんなこと。

 天才だね!!