麻雀が大好きなのでどこからツモるか表示してくれるwebアプリが作りたかった
サイコロを振った時にどこからツモるかいつも分からなくなる
「何を言ってるかわからねぇぜ」という人は、きっと麻雀をしたことない人だと思います。
あとは、ちゃんと自5とか対7とか一瞬で判断できる人には無縁なwebアプリです。
今回は、麻雀で振る２つのサイコロとサイコロの目に合わせて、どの家から積もるかを表示してくれるwebアプリの開発（というのはちと烏滸がましいですが…）です。
２つサイコロを回す
これは、すでにこちらのエントリーで書いてる通りにサイコロを振るスクリプトを適応させます。
簡単に説明すると、math.randomで数字をランダムで発生させて対応する画像を表示させるスクリプトです。
これを応用して「対応する数字に対して東家・南家・西家・北家を赤く表示させたい」という要件を満たします。
ダイスの合計に対して家を表示させる
ダイスロールでは、1-6に対応する画像を作り表示させる方法で、ダイスロールを実現しました。
また、その右隣に２つのダイスの合計値を表示するようにしています。
これをそのまま使って、合計値に対応するように、各家を赤くした画像を用意します。
言葉では伝わりにくいですが、最後の成果物を見れば多分一目瞭然です。
合計値に対応させるために、5,9で東、2,6,10で南、3,7,11の時に西、4,8,12の時に北が赤く表示された画像を表示させるスクリプトを組みます。
この記事を参考にして、if orで各数字の時に画像を表示させるスクリプトを組みました。
例えば、東ならif (合計値 == 5 || 合計値 == 9) {$idに対して画像のパス}という風に書きます。ここは、合計値 == 5 || 9でもいいのかもしれません（確かめてない）。
あとは、if elseで同じことを南、西に。最後の北はelseで「それ以外の時は北にしてね」という分枝を作ってあげます。
すると、voila！できました。
if文での困りごと
「orが"||"」だとか「andは"&&"」とか「notは"!"ですよ」というのは「なんで！？」と思いました。「and, or, notでいいじゃん？」と感じます。まぁこれは言っても仕方ないことですが…
実際、最初にif orを書いた時、"||"という記号があることに気付かず、"or"で書いて「はぁ…なぜ動かん？」と思いました。
まぁ、英語の感覚的には、or or orとorが続くのは気持ち悪いのかな？という気はします…
英語が苦手な人は「この数字"と"この数字の時」と考えてしまって「&&で書いちゃうかもなー」というのも感じました。
試してないですが、多分これをやると「この数字"かつ"この数字の時に」という指示になってしまいます。
if elseで感じたのは、if、if else、elseというのはよく考えられてるな、ということです。
ifで「もしもこの時は」、if elseで「(ifの時とは違うけど)この時は」と追加することができて、elseで「ifでもif elseでもない時は」という指示がかけるのは単純明快でよかったです。
最初に失敗したこと
「ダイスロールと家の表示は、HTML上では別のidかつ表示場所も違うから、Java Scriptでも異なる場所に書くことになるのかなー」と感じて、別のletとfunctionの中に入れようとしてしまいました。
言葉では説明しづらいですが、let ダイスロール; function {ダイスロールのためのスクリプト}とlet 家の表示; function {ダイスロールの合計値と家の表示のためのスクリプト}と書いてしまったという感じです。
いい加減ブログの記事上にスクリプトを書けるようにしたい。
ということで、まぁなんとか「ダイスロールのfunctionの中に家の表示を入れるんだ！」
と気付いて実装したわけです。
成果物:サイコロに対して家の表示をするwebアプリ
サイコロは、実際に降って牌山にカツンと当たるのが気持ちいいのもありますが「1, 2, 3, 4…12」と数えて家を確認するのも時間がかかって嫌ですし「右回りだっけ？左回りだっけ？」と考えるのもなんだか嫌だったので、webアプリをササっと作りました。
今回は、ダイスロールのスクリプトをモノポリーツールで作っていたこと、合計値に対して画像を表示させるのもダイスロールと同じ作りなことから、比較的簡単に作ることができました。
