Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

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://www.geocities.jp/snowdrops890/wnako3_test/10_suijyaku_test.html

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

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

ゲスト



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