Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

posted at

updated at

サイコロ5 ~ローカルストレージを使うよ!~

ローカルストレージも使いたい!

 大したことないゲームでも、得点を付けて成績発表すると、俄然やる気がアップするんだよね~♪(単純;)
 と言っても数当てゲームじゃ得点の付けようも無いけど、ちょっと機能を追加して、ローカルストレージを無理矢理使ってみる。

なでしこ3マニュアル > plugin_browser/ローカルストレージ

ローカルストレージとは?

 これなんか、超簡単で分かりやすくていいんじゃないですか?(丸投げ)

https://wa3.i-3-i.info/word13183.html

 この中の、「cookieっぽいウェブストレージ」です。
 cookieには有効期限があって、しかもデータ量がたったの4KBなのに対し、ローカルストレージは消さない限りはずっと使えて、データ量も5MBもあるそうですよ。
 データはブラウザが保管するので、違う端末はもとより、同じ端末でも違うブラウザで開いたら共有出来ないんですけど、何しろちょっとしたことを記憶しておくには簡単便利な機能です☆

プログラム開始時に挨拶する

 プログラム実行中に、流れに応じてコメントを変えて何か言ってくるのは、条件分岐などで簡単に出来ますが、開始時に前回の勝敗に応じてコメントを変えるようにしてみます。

開く

 ローカルストレージのキーは、「数当てゲーム挨拶」ということにします。
 ちゃんと日本語で、キーに出来るんですよ☆
 中身は、前回勝っていたらオン(1)、負けていたらオフ(0)という超簡単なものにします。
 いちばん最初の時は、当然このローカルストレージキー自体が登録されていない(未定義)ので、「はじめまして」とでも言っておく。

「数当てゲーム挨拶」を開く。
もし、それ=未定義ならば、
 「はじめまして!」と言う。
違えば、もし、それ=オンならば、
 「今日は負けないよ!」と言う。
違えば、
 「今日は勝つ気でいるのかな?」と言う。
ここまで。

 開くだけ! カンタンですね☆
 もちろんこのように単純な内容だけでなく、CSVでもJSONでも入れられるので、得点の一覧を保存したり、設定項目をまとめて記憶しておくことも出来ます。
 どんなデータでも、「開」けばキーの中身がまるっと「それ」に入るので、あとは普通に使うだけ。

勝ち負け

 数当てゲームで勝ち負けと言ったら当たったか外れたかくらいしかないわけなんですが、それだけでは何なので、コイン5枚でチャレンジし、一度でも当たれば勝ち、一度も当たらなかったら負けということにします。
 一応6回に1回は当たるはず(?)なので、結構な確率で勝てる筈なんですが……(最後に遊びながら確認しようとしたら、なかなか「今日は負けないよ!」を確認することが出来なかったのは内緒><)
 ままま、それはともかく……

改行作成。
「コイン:」のラベル作成。
コインのエディタ作成して、コインエディタに代入。
「枚」のラベル作成。
コインエディタの「幅」に「50px」をDOMスタイル設定。
コインエディタの「行揃え」に「右」をDOMスタイル設定。

 もう、部品を作成したり、スタイルを設定したりするのも見慣れましたね☆
 サイコロを振って勝負した時に、コインを1枚消費することにします。

サイコロボタンをクリックした時には
 コイン=コイン-1。
 コインをコインエディタにテキスト設定。
 ……

 正解したら勝ち、外れた時はコインの枚数を確認し、もう賭けるコインが無くなっていたら負け。

●正誤判定
 もし、予想=出目ならば、
  「正解!!🎉」と言う。
  オンで終了処理。
 違えば、
  「残念でした~😜」と言う。
  もし、コイン=0ならば、オフで終了処理。
  違えば、ゲーム続行。
 ここまで。
ここまで。

保存

 勝ちならオン(1)、負けならオフ(0)で、終了処理の関数を呼びます。

●(勝敗で)終了処理
 「数当てゲーム挨拶」に勝敗を保存。
 ……

 保存するだけ! カンタンですね☆
 保存されていることは、例えばローカルストレージキー列挙などしてみれば分かります。
 マニュアルもnako3storageも同じnadesi.comにあるので、一回でも遊んだ後に、ここのサンプルを実行してみたら、ちゃんと「数当てゲーム挨拶」が表示される事でしょう。

メッセージ表示

 最初に、「プログラム実行中に、流れに応じてコメントを変えて何か言ってくるのは、条件分岐などで簡単に出来ますが……」と書いたけど、条件分岐を使わずにメッセージを変えています。
 メッセージのデータをCSVで作ってCSV取得で配列にし、勝敗の価(0か1か)で読む行を決める。
 そしたら、勝ちも負けも、1つにまとめて書けるもね~。

●(勝敗で)終了処理
 「数当てゲーム挨拶」に勝敗を保存。

 メッセージ=「ゲームオーバーです。,残念でした!,何度やっても同じだよ~。{改行}あなたの勝ちです。,おめでとう!,今回は負けないよ。」をCSV取得。

 「{メッセージ[勝敗][0]}{改行}もう一度やる?」で二択。
  もし、それがはいならば、
   メッセージ[勝敗][2]を言う。
   コイン=5。コインをコインエディタにテキスト設定。
   ゲーム続行。
  違えば、
   メッセージ1に「{メッセージ[勝敗][1]}」をテキスト設定。
   メッセージ2に「またチャレンジしてね☆」をテキスト設定。
  ここまで。
ここまで。

忘れる

 このままだと、本当に最初の一回目しか、「はじめまして」は確認することが出来ないんですよね(別にいいんですが)
 あと、こんなどーでもいいローカルストレージキーがずっとブラウザに残ってるとか邪魔くさい! とゆう人もいるに違いありません(データ量ではなく気持ちの問題ですw) というわけで、ローカルストレージキー削除するための、忘れるボタンも用意しました。
 「あなたのことを忘れる」なんて言われると悲しくなって、消したく無くなっちゃう(ノД`)(バカ;)

「忘れる」のボタン作成して、クリアボタンに代入。
クリアボタンをクリックした時には
 「あなたのことを忘れます」で二択。
 もし、それがはいならば、「数当てゲーム挨拶」をローカルストレージキー削除。
ここまで。

動作確認

 できました!

 一応一通り、ローカルストレージ命令の使い方を紹介して、あと、少しコンピューターが反応をして面白い感じに……(なったか?)
 こんなことなら、もうちょっとローカルストレージを使う甲斐のあるような、ましなゲームにすれば良かったけど、ひらめかない(´д`)
 でも、こうなったらサイコロだけに6まで行きたいところですけれどねえ……
 やっぱ、しゃべらす?(笑)

つづきます

サイコロ6 ~音を出したり、さらに見た目を「ぽく」したりして完成させる~

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?