日本語によるマークアップ言語でブラウザゲームを開発できる統合開発環境を開発してみた②

# はじめに

<a href="https://qiita.com/what/items/fcc3be5c75260265d71e">前回①</a>の続きになります。
<a href="https://qiita.com/what/items/b92a4d4b5c83d352d401">続きは③</a>です。
今回は、propsgamesのダイス機能の使い方を解説していきたいと思います。

# ダイス機能の実装
ここではおみくじ機能の実装をサンプルにダイス機能の解説をしていきます。
まず、下準備としてダイスの結果を入れるための変数を作っちゃいましょう。


<img width="979" alt="スクリーンショット 2020-07-05 10.00.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78116/4dcb5564-fa28-3eb2-d9ec-ca8e71817ebf.png">
↓
<img width="933" alt="スクリーンショット 2020-07-05 10.01.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78116/9c640796-ecef-2412-3080-e8e0e6eca43d.png">

変数タイプは、文字列にして変更ボタンを押しておきましょう。
さて、前回と同じようにボタン一覧を表示し、その中から、今回はダイスボタンをクリックしちゃいましょう。

<img width="960" alt="スクリーンショット 2020-06-13 09.54.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78116/0a754d3a-7195-c605-ae56-075938b77364.png">


すると、ダイスタグの入力フォームが現れます。目の種類を今回は３にして、値を「大吉」「吉」「凶」の３種類にでもしておきましょうか。小吉や大凶など種類を増やしたければもっと増やしてもOKです！

<img width="806" alt="スクリーンショット 2020-07-05 10.09.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78116/8f676700-f3d7-2197-b9b1-bd8b8023fe02.png">

生成ボタンをクリックするとこんな感じのコードが生成されるはずです。

```
<ダイス 代入先="おみくじ" 目="大吉,吉,凶" 速度="300" 遅延="3" 順番="順番通り"/>
```

さてこの命令の使い道は何かと申しますと、文章の中で文字列がスロットのようにぐるぐると目が変わり、ゲームプレイヤーが画面をクリックしたら、そこで、回転速度がスローダウンし、停止した値が変数に格納されるというものになります。

速度300というのは、300ミリ秒(0.3秒)ごとに目の中身が変わるという意味ですし、遅延3というのは、クリックしてから3回値が変わってから停止しますよという意味です。

「順番通り」というのは、「大吉」「吉」「凶」が決まった順番通りに表示されるという意味になります。スロットゲームをやる人たちの間では、培われた動体視力によって、狙った目で停止させる「目押し」というテクニックが人気がありますが、それをやろうと思えばできるということになります。

「ランダム」になると出目の順番が完全にランダムになるので目押しは不可能になります。

「裏実行」はクリック操作や文章表示とは関係のないところでランダム値を発生させるためのものです。ダンジョンを移動するごとに3%の確率で敵と遭遇するイベントを作りたいときなど、いちいち１歩移動するごとにプレイヤーにダイスなんて振らせてられるか！面倒くさい！ってイベントを作ったときに使います。


さて、文章の中で文字列がぐるぐる目が変わるということは、当然、小説タグや会話タグの中でセットで使うことになります。

例えば、次のように

```
<小説 横="中央" 縦="枠中央" 幅="16" 高さ="10" 速度="60" >
あなたの今日の運勢は<ダイス 代入先="おみくじ" 目="大吉,吉,凶" 速度="300" 遅延="3" 順番="順番通り"/>です！<クリック />
</小説>
```

<img width="250" alt="スクリーンショット 2020-07-05 10.33.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78116/2b784580-a3d3-0173-8c2d-d6b727697a02.png">

<img width="250" alt="スクリーンショット 2020-07-05 10.34.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78116/ef3e05e9-2344-85fd-dc69-5f91e4a5facc.png">

単に、大吉です！吉です！凶です！と表示されるだけではあまり気が利いた感じがしないので、さらに一文を後ろに追加してみましょうか。

<img width="960" alt="スクリーンショット 2020-06-13 09.54.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78116/0a754d3a-7195-c605-ae56-075938b77364.png">

赤いボタンの中にある「もしも/if」の出番です！
これは変数の値によって、処理内容を変えることのできる優れものです。


<img width="405" alt="スクリーンショット 2020-07-05 10.41.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78116/bb8cb322-2bce-0c2e-c224-135390647044.png">


解説は後でするとして、ひとまず、「もしくはを生成する個数」を1にして<その他 />を生成するのチェックボックスにレ点を入れましょう。
そして、文字列の変数を使って処理分岐したいので、緑の文字列ボタンをクリックしましょう。

<img width="404" alt="スクリーンショット 2020-07-05 10.42.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78116/8ecf0204-3dc7-4df5-bdb9-072df06731be.png">


すると「もしも/文字列」フォームが表示されます。

次のように変数「おみくじ」と文字列「大吉」は「等しい」という条件を入力して、生成ボタンをクリックしましょう。

<img width="706" alt="スクリーンショット 2020-07-05 10.47.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78116/b29213cb-19bc-f1e6-4d28-c8f30268ef26.png">

次に「もしくは」フォームが表示されますので緑ボタン「文字列」を同じようにクリックしましょうか。

<img width="409" alt="スクリーンショット 2020-07-05 10.52.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78116/64323fb1-5e22-1b9c-ef96-05ac99fdc697.png">

「もしも/文字列」フォームが表示されるので変数「おみくじ」文字列「吉」の値が「等しい」を選択状態にして、生成ボタンをクリックしましょう。

<img width="701" alt="スクリーンショット 2020-07-05 10.59.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78116/af4fcbb3-1897-277d-85c4-823a9d17220b.png">

するとこんな文字列が生成されます。

```
<もしも 条件="おみくじ='大吉'" タイプ="文字列" >

</もしも>
<もしくは 条件="おみくじ='吉'" タイプ="文字列" >

</もしくは>
<その他>

</その他>
```

ざっくりと説明すると、変数おみくじの値が、「大吉」の場合と「吉」の場合と「その他」の場合で、場合分けをするといった命令文になります。

この命令文の隙間に<小説>タグを使ってメッセージを入れてみましょうか。


```
<もしも 条件="おみくじ='大吉'" タイプ="文字列" >
  <小説 横="中央" 縦="枠中央" 幅="16" 高さ="10" 速度="60" >
    あなたはめちゃくちゃついているでしょう！
  </小説>
</もしも>
<もしくは 条件="おみくじ='吉'" タイプ="文字列" >
  <小説 横="中央" 縦="枠中央" 幅="16" 高さ="10" 速度="60" >
    あなたはまあまあついているでしょう！
  </小説>
</もしくは>
<その他>
  <小説 横="中央" 縦="枠中央" 幅="16" 高さ="10" 速度="60" >
    あなたは全然ついていないでしょう！
  </小説>
</その他>
```

すると、おみくじの結果によって、その次に表示される文章が変わるはずです。
お試しあれ！


# ダイス機能の他の使い道
今回はおみくじで説明しましたが、3回連続ダイスを振ってゾロ目を狙うスロットのような使い方も出来ます。そのときはこんな感じのコードになりますね。

```
<小説 横="中央" 縦="枠中央" 幅="16" 高さ="10" 速度="60" >
スロット開始！
<ダイス 代入先="スロット1" 目="◯,△,□" 速度="100" 遅延="0" 順番="ランダム"/>
<ダイス 代入先="スロット2" 目="◯,△,□" 速度="100" 遅延="0" 順番="ランダム"/>
<ダイス 代入先="スロット3" 目="◯,△,□" 速度="100" 遅延="0" 順番="ランダム"/>
<もしも 条件="スロット1=スロット2" タイプ="文字列" >
  <もしも 条件="スロット1=スロット3" タイプ="文字列" >
     あなたはゾロ目です！おめでとう！<クリック />
  </もしも>
</もしも>
</小説>
```


RPGやゲームブックっぽいものを作るのもいいかもしれません。
モンスターと戦ってダイスの目によって、ダメージを受けたり受けなかったりして。

```
<小説 横="中央" 縦="枠中央" 幅="16" 高さ="10" 速度="60" >
あなたの攻撃！<クリック /><改行 />
<ダイス 代入先="攻撃" 目="クリティカル！,ダメージ！,スカ！,ファンブル！" 速度="30" 遅延="3" 順番="順番通り"/>
</小説>
```

# おわりに
今回は「ダイス機能」とそのついでとして「もしも」機能の解説をしました！「もしも」機能は一般的なプログラミング言語を覚える上でも最初の登竜門となる技術ですので、遊びながら身につけていただければ幸いです！