Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

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パズルでもやったのでした。


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

 天才だね!!

2017-11-15

サイコロを転がすよ!

| 15:17

 マイナビ連載15目は、サイコロと擬似乱数についてでした。

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

 乱数の使い方は、6目のかずあてゲームでやったじゃーん・・・と思ったら、乱数とゆうものを、いかにしてコンピューターで生成するのか的な、より突っ込んだ内容になってました。

 うおおぉぅ、ナンカヨクワカラン・・・(*_*;;;

 ケド、ちょっと賢くなった気がする(気のせい;)


 いいんだい!

 仕組みなんか知らなくたって、サイコロは作れるもね~(こら;)

 とゆうわけで(?!)大好きなサイコロを転がしてみようと思う。

 CSS3のanimationを使って、文字通り転がします。

 って言っても3D(立方体)ではなく2D(正方形)ですケドね~。


 単に要素に転を掛けながら移動させるのは、例によってなでしこなくてもCSSだけで可能でした。

<script type="なでしこ">
#-----------------------------------------------------------------------
# サイコロを転がしたい
#-----------------------------------------------------------------------
</script>

<style type="text/css">
<!--
#dice {
	margin:auto; width:50px; height:50px; background:#FF9999;
	animation:roll-dice 1s linear;
}
@keyframes roll-dice{
	0% {transform: translate(-350px,0px) rotate(0deg);}     /* 初期位置 */
	100%{transform: translate(0px,0px) rotate(360deg);}     /* 終了位置 */
}
 -->
</style>

<H1>CSS3てすと~アニメーションで転がす</H1>
<HR>
<div id="dice">*</div>
<HR>

http://snowdrops.starfree.jp/wnako3_test/11_animation_test.html

 #diceに設定したanimationプロパティでは「roll-dice」とゆうキーフレームに従って、1秒かけて、最初から最後まで一定の速さで変化する的な指定になっています。

 最初の状態(0%)と最後の状態(100%)を指定しただけで、このよーに転がります!

 キーフレームは、アニメーションの開始(0%)から完了(100%)までを自由に区切って、それぞれの時点のスタイルを設定することになっていて、細かく区切って指定すると、ただ転がすだけじゃなく、こんなふうにして弾ますこともできました。

@keyframes roll-dice{
	0% {transform: translate(-350px,-100px) rotate(45deg);}     /* 初期位置 */
	10% {transform: translate(-350px,0px) rotate(90deg);}       /* 落下地点 */
	25% {transform: translate(-300px,-60px) rotate(180deg);}    /* 1st頂点 */
	40% {transform: translate(-250px,0px) rotate(270deg);}      /* 1st着地点 */
	50% {transform: translate(-200px,-40px) rotate(360deg);}    /* 2nd頂点 */
	60% {transform: translate(-150px,0px) rotate(450deg);}      /* 2nd着地点 */
	70% {transform: translate(-100px,-20px) rotate(540deg);}    /* 3rd頂点 */
	80% {transform: translate(-50px,0px) rotate(630deg);}       /* 3rd着地点 */
	100%{transform: translate(0px,0px) rotate(720deg);}         /* 終了位置 */
}

http://snowdrops.starfree.jp/wnako3_test/11_animation_test2.html

 でも、地面から頂点までの指定が直だから、なんか動きがカクカクしてんだよね~;

 こうゆうのも、知恵とセンスが問われるところなんだろう・・・><


 ・・・でっ、取りあえずボタンを押したらサイコロが転がるプログラム。

<script type="なでしこ">
#-----------------------------------------------------------------------
# サイコロ
#-----------------------------------------------------------------------
#-----宣言--------------------------------------------------------------
出目は配列。
サイコロ転数=-1。

#---ダイス設定-----
ダイスサイズ=80。ダイス太=1。角丸=オン。
ダイス色=[
["#FFBBBB","#CC3333","#330000"],
["#BBFFBB","#33CC33","#003300"],
["#BBBBFF","#3333CC","#000033"],
["#FFBBFF","#CC33CC","#330033"],
["#FFFFBB","#CCCC33","#333300"],
["#BBFFFF","#33CCCC","#003333"]
]// "地色","文字色" ,"線色"

#---ダイスアニメーション設定-----
転秒数=0.8。
回数転秒数*10。
初期位置=「-350px,0px」
終了位置=「200px,240px」
初期角度=0。
終了角度=1080。

#-----メイン------------------------------------------------------------
「#play」の「onclick」に「サイコロ振」をDOMイベント設定。
サイコロ初期化。

#-----------------------------------------------------------------------
●サイコロ初期化
  ダイス文字サイズ=ダイスサイズ/3*2。
  もし、角丸=オンならば、角丸サイズ=ダイスサイズ/4。
  違えば、角丸サイズ=0。

  「#dice」の「margin」に「auto」をDOMスタイル設定。
  「#dice」の「width」に「{ダイスサイズ}px」をDOMスタイル設定。
  「#dice」の「height」に「{ダイスサイズ}px」をDOMスタイル設定。
  「#dice」の「text-align」に「center」をDOMスタイル設定。
  「#dice」の「line-height」に「{ダイスサイズ}px」をDOMスタイル設定。
  「#dice」の「font-size」に「{ダイス文字サイズ}px」をDOMスタイル設定。
  「#dice」の「border-radius」に「{角丸サイズ}px」をDOMスタイル設定。

  「#dice」の「transform」に「translate({終了位置}) rotate({終了角度}deg)」をDOMスタイル設定。
  サイコロ転設定=「@keyframes roll-dice{波カッコ}
	0%  {波カッコ}transform: translate({初期位置}) rotate({初期角度}deg);{波カッコ閉じ}     /* 初期位置 */
	100%{波カッコ}transform: translate({終了位置}) rotate({終了角度}deg);{波カッコ閉じ}     /* 終了位置 */
{波カッコ閉じ}」
  「#style」にサイコロ転設定をDOM_HTML設定。
ここまで。

●サイコロ振
  (回数
    rは6の乱数。
    出目[回数-1]はr+1。
  ここまで。
  サイコロ転数=0。
  「#dice」の「animation」に「roll-dice {転秒数}s linear」をDOMスタイル設定。
  サイコロ描画。
ここまで。

●サイコロ描画
  もし、(サイコロ転数≧0)かつ(サイコロ転数<回数)ならば、
    「#dice」の「background」にダイス色[出目[サイコロ転数]-1][0]をDOMスタイル設定。
    「#dice」の「color」にダイス色[出目[サイコロ転数]-1][1]をDOMスタイル設定。
    「#dice」の「border」に「{ダイス太}px solid 」&ダイス色[出目[サイコロ転数]-1][2]をDOMスタイル設定。
    「#dice」に出目[サイコロ転数]をDOMテキスト設定。
    サイコロ転数=サイコロ転数+1。
    「サイコロ描画」を(転秒数/回数)秒後。
  違えば、
    「#dice」の「animation」にDOMスタイル設定。
    サイコロ転数=-1。
  ここまで。
ここまで。
#-----------------------------------------------------------------------
</script>

<H1>なでしこ3てすと~サイコロを振る</H1>
<HR>
<style id="style"></style>
<div id="base" style="margin:auto; height:400px;">
  <button id="play">サイコロを振る</button>
  <div id="dice"></div>
</div>
<HR>

http://snowdrops.starfree.jp/wnako3_test/11_dice_test.html

 結局、転がるだけですw

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

2017-11-11

神経衰弱

| 23:17

 飼っていたうさぎさんが亡くなり、非常にテンション低く毎日泣き暮らしております。

 め・゚゚・(≧д≦)・゚゚・。

 なんかもう、今年は年賀状は出さずに喪中葉書にしようかとさえ思ってる;;;


 さて、カードをめくると言えば神経衰弱・・・っとゆうわけで、前学んだCSSを使って、ちょっと神経衰弱にしてみました。

 単にひとりで神経衰弱するだけですが、一応遊べると思います。

<script type="なでしこ">
#-----------------------------------------------------------------------
# 神経衰弱
#-----------------------------------------------------------------------

#---宣言------
カード幅=63。カード高=89。
カード横マージン=10。カード縦マージン=10。

横=4。縦=2。
枚数=横*縦。  //当然だけど偶数じゃなきゃダメ。連番で枚数/2枚の画像を用意。

一枚目=-1。
一枚目位置=-1。
二枚目=-1。
二枚目位置=-1。
場札=配列。
当音=「http://www.geocities.jp/snowdrops890/audio/atari.mp3」
外音=「http://www.geocities.jp/snowdrops890/audio/hazure.mp3」
完成音=「http://www.geocities.jp/snowdrops890/audio/Fanfare_53.mp3」
カウンター=0。

#---場札の初期化------
数を0から(枚数-1)まで繰り返す。
  場札[数]=数/2を切捨。
ここまで。
場札を配列シャッフル。

#---カード配置とカード開閉関数設置------
game幅=(カード幅+カード横マージン)*横。game高=(カード高+カード縦マージン)*縦。
カードHTML。スタイルHTML=「<style>#game{波カッコ}margin:auto; width: {game幅}px; height: {game高}px;</style>{改行}」
カード開関数。カード閉関数。
数を0から(枚数-1)まで繰り返す。
  カード開関数=カード開関数に「●カード開{数}{改行}  {数}のカード開。{改行}ここまで。{改行}{改行}」を一行追加。
  カード閉関数=カード閉関数に「●カード閉{数}{改行}  {数}のカード閉。{改行}ここまで。{改行}{改行}」を一行追加。
  スタイルHTML=スタイルHTMLに「<style id="style_{数}"></style>」を一行追加。
  回数=数+1。札=場札[数]
  T=数/横を切捨。T=T*(カード高+カード縦マージン)。L=数%横*(カード幅+カード横マージン)。
  もし回数%横=0ならば、
    カードHTML=カードHTMLに「
  <span id="card_{数}" class="card">
    <img id="omote_{数}" class="omote" src="http://www.geocities.jp/snowdrops890/image/card{札}.png" style="top:{T}px; left:{L}px;">
    <img id="ura_{数}" class="ura" src="http://www.geocities.jp/snowdrops890/image/card_ura.png" style="top:{T}px; left:{L}px;">
  </span>{改行}」を一行追加。
  違えば、
    カードHTML=カードHTMLに「
  <span id="card_{数}" class="card">
    <img id="omote_{数}" class="omote" src="http://www.geocities.jp/snowdrops890/image/card{札}.png" style="top:{T}px; left:{L}px;">
    <img id="ura_{数}" class="ura" src="http://www.geocities.jp/snowdrops890/image/card_ura.png" style="top:{T}px; left:{L}px;">
  </span>」を一行追加。
  ここまで。
ここまで。
「#game」にカードHTMLをDOM_HTML設定。
「#style」にスタイルHTMLをDOM_HTML設定。
カード開関数ナデシコする。
カード閉関数ナデシコする。

#---イベント設定------
数を0から(枚数-1)まで繰り返す。
  「#ura_{数}」の「onclick」に「カード開{数}」をDOMイベント設定。
ここまで

#-----------------------------------------------------------------------
●カード開(Noの)
 もし、(二枚目=-1)ならば、   #ガチャ押しで三枚目が開くのを防止。
  開閉=「
#ura_{No}{波カッコ}transform: rotateY(180deg);{波カッコ閉じ}
#omote_{No}{波カッコ}transform: rotateY(0);{波カッコ閉じ}」
  「#style_{No}」に開閉をDOM_HTML設定。
  もし(一枚目=-1)ならば、
    一枚目=場札[No]。一枚目位置=No。
  違えば、
    二枚目=場札[No]。二枚目位置=No。
    カード判定。
  ここまで。
 ここまで。
ここまで。

●カード閉(Noの)
  開閉=「
#ura_{No}{波カッコ}transform: rotateY(0);{波カッコ閉じ}
#omote_{No}{波カッコ}transform: rotateY(-180deg);{波カッコ閉じ}」
  「#style_{No}」に開閉をDOM_HTML設定。
ここまで。
#-----------------------------------------------------------------------
●カード判定
  もし、一枚目=二枚目ならば、
    カウンター=カウンター+1。
    もし、カウンター=枚数/2ならば、
      完成。
    違えば、
      「#se」に「<audio src="{当音}" autoplay></audio>」をDOM_HTML設定。
      一枚目=-1。二枚目=-1。
    ここまで。
  違えば、
    「#se」に「<audio src="{外音}" autoplay></audio>」をDOM_HTML設定。
    0.8秒後には
      一枚目位置のカード閉じる。二枚目位置のカード閉じる。
      一枚目=-1。二枚目=-1。   #カードを閉じ終えてからフラグを戻す。
    ここまで。
  ここまで。
ここまで。

●完成
  「#se」に「<audio src="{完成音}" autoplay></audio>」をDOM_HTML設定。
  「おめでとう!」と言うここまで。
#-----------------------------------------------------------------------
</script>

<style type="text/css">
<!--
.card {
  position: absolute;
  perspective: 1000px;
}
.ura,
.omote {
  position: absolute;
  transition: transform 0.6s;
  backface-visibility: hidden;
}
.omote {
  transform: rotateY(-180deg);
}
 -->
</style>

<H1>なでしこ3てすと~神経衰弱</H1>
<HR>
<div id="style"></div>
<div id="game"></div>
<div id="se"></div>
<HR>

http://snowdrops.starfree.jp/wnako3_test/10_suijyaku_test.html

 もうちょっとゲームらしく作り込みたいですよね~。

 カードは画像さえ用意すれば増やせるようにしてあるけど、コレで枚数だけ増えてもなんか疲れるだけだしね;

通りすがり通りすがり2017/11/26 14:56peerJSというライブラリをラッピングしたpluginを作成したので、試しに神経衰弱に組み込んでみました。

//weyk.la.coocan.jp/weyk/nadesiko3/demo/suijyaku_test.html

「始める」を押すと表示されるダイアログ(尋ねる命令のダイアログ)に、2人で同じ内容を入力すると、始まります。一人でブラウザを2つ起動することでも試せます。
(というより、その状態でしか試してません)

ソースは先のhtmlに埋め込まれているので、ブラウザのソースを表示する機能で確認可能です。

peerJS自体が使用しているのは、WebRTCという機能ですが、ブラウザの機能もいつの間にか便利になったものです。
(httpではなく、httpsにすれば、音声・画像も可です)

雪乃☆雫雪乃☆雫2017/11/26 16:19おおぉ?!w(゜o゜)w
なっ、なんかすごい!!
TCP接続なしで、対戦ゲームとかが・・・??
色々と面白いことが出来そうでテンション上がりますね☆
まだ、ちょこっとお試ししてみただけですが、中身を見て研究してみたいと思います。

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

2017-11-02

カードをくるんとめくるよ!

| 16:13

 またちょっと、CSSのエフェクト系です。

 transform:rotateY()を使って、カードをくるんとめくります。

 これは要素を表示するヤツで、()に与えた角度によってY軸を軸にして時計りに転します。

 裏返した状態の表と、裏のカードを重ねて置いて、同時に転させることで1枚のカードがひっくり返ったように見せるとゆう技なんですね~。

 フェードの時と同様transitionで、何秒掛けて転させるかを指定します。

 backface-visibilityは要素の裏面を見れるようにするかどうかを指定するヤツで、これはhiddenにしておかないと、裏返っても裏返った状態の裏のカード(ややこやしい;)が見えていて、表のカードが見えないとゆうことになってしまいます。

 もうひとつ、perspectiveは3D変形の奥行きの深さを指定する・・ヤツで、ようするに立体感が出ます。これが無いと中心に向けてぎゅっと縮んでまた伸びたのと同じ感じになっちゃうんですね。


 ・・・でっ、こんな感じ~。

 波カッコ閉じが無事に使えるようになったおかげで、スタイルシートをDOM_HTML設定するのがとても楽になりました。ありがたや~☆

<script type="なでしこ">
#クリックして、カードの表を開く。

「#ura」の「onclick」に「カード開」をDOMイベント設定。
「#omote」の「onclick」に「カード閉」をDOMイベント設定。

#時計りに裏を180度、同時に表も(-180から0なので)180度転させて、表を出す。
●カード開
  開閉=「
#ura{波カッコ}transform: rotateY(180deg);{波カッコ閉じ}
#omote{波カッコ}transform: rotateY(0);{波カッコ閉じ}」
  「#style」に開閉をDOM_HTML設定。
ここまで。

#同様に反時計りに180度、裏表同時に転させて裏返す。
●カード閉
  開閉=「
#ura{波カッコ}transform: rotateY(0);{波カッコ閉じ}
#omote{波カッコ}transform: rotateY(-180deg);{波カッコ閉じ}」
  「#style」に開閉をDOM_HTML設定。
ここまで。
#-----------------------------------------------------------------------
</script>

<style type="text/css">
<!--
#base {
  margin:auto;
  width: 70px;
  height: 90px;
}
#card {
  position: absolute;
  perspective: 1000px;    /* 奥行きの深さ。プロパティを指定した要素自身ではなく、の子要素で位置や変形を指定されたものにだけ適用される。*/
}

#ura,
#omote {
  position: absolute;
  transition: transform 0.6s;    /* トランスフォームプロパティを0.6秒かけて変化させる*/
  backface-visibility: hidden;   /* 要素の裏面を不可視にする*/
}

#omote {
  transform: rotateY(-180deg);   /* 要素をY軸を中心に裏返しておく設定*/
}
  -->
</style>


<style id="style"></style>

<div id="base">
  <div id="card">
    <img id="omote" src="http://www.geocities.jp/snowdrops890/image/card_omote.png">
    <img id="ura" src="http://www.geocities.jp/snowdrops890/image/card_ura.png">
  </div>
</div>

 できた~♪

http://snowdrops.starfree.jp/wnako3_test/09_card_test.html

 こんなことが出来ると、カードゲームを作るのが楽しくなりそうですよね!(≧▽≦)

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