javascriptで万能ダイスを作ってみた

2014年12月8日 javascripts


クトゥルフWEBダイスに「ダイスの面と回す回数を自分で選べるダイスが欲しい」というご要望をいただいたので、作ってみました!
何箇所か詰まるところがあったのでメモ的に残して置きます。

 

javascriptで万能ダイスを作ってみる

今回は、下記のサイト様を参考にさせていただきました。
ありがとうございます!

uhyohyo.net様 http://uhyohyo.net/javascript/11_1.html
フリーな人生様 http://blog.livedoor.jp/koreedablog/archives/1415915.html
スコット・マレイ様 http://ja.d3js.info/alignedleft/tutorials/d3/the-power-of-data/

まず、htmlソースから。

ユーザーさんに、
id="roll"のセレクトボックスから回すダイスの個数を、
id="men"のセレクトボックスから何面ダイスかを選択してもらいます。
「ダイスロール」ボタンを押すことで、
id="condiceall"のspanに、出た出目をカンマ区切りで全て表示、
id="condiceallsum"のspanに、出た出目の合計を表示します。

完成したjavascriptソース

↑このjavascriptがどういう内容になっているか、メモしておきます。

 

(1)セレクトボックスから数値を拾う

まず、セレクトボックスに入力された「回す個数(roll)」と「何面ダイスか(men)」を拾ってきます。

はじめ、

↑これでセレクトボックスの値を取得できると思ったのですが、値が「undefined」になってしまいました。

ググって見ると、
http://blog.livedoor.jp/koreedablog/archives/1415915.html
↑こちらのサイト様で、firefoxも同様に「undefined」になってしまうことが分かりました。
なので、紹介されていた

↑こちらのソースに、文字列を整数に変換してくれるparseIntをつけたし、あと念のために+0を足して数字として取得できるようにしました。

 

(2)選択された「roll」D「men」で出た出目を、カンマ区切りで表示する

次に、選択された「men」面ダイスを、選択された「roll」個回し、出た出目をカンマ区切りで表示させます。

↓で、「men」で取得したダイスの面数から、ランダムに出目を取り出します。

javascriptの数字は0から始まりますので、+1をして目が1から始まるようにします。

それを、「roll」で取得した個数分回し、出てきた解を配列としてdatasetに格納します。
(一度すべての出目を配列に格納しないと、innerHTMLで上手いこと書き出せませんでした)

こちらのサイト様を参考に、ループでmen面ダイスをroll個回しました。↓
http://ja.d3js.info/alignedleft/tutorials/d3/the-power-of-data/
2~3行目がダイスを回すループで、
1行目で宣言した<code>dateset</code>に配列を格納するコードが、4行目の

です。これで出目が自動的にカンマ区切りで格納されます。

datasetに格納したカンマ区切りの出目を、

↑このコードでid="condiceall"のついたspanに書き出します!
これで、ロールした結果に出てきた全ての出目を、カンマ区切りで表示することができました!

※出てきた数値はそのままだと改行しません。cssで「word-wrap: break-word;」をかけることで改行することができました。

 

(3)出てきた出目を合計し、表示する

最後に、出た出目=「detasetに格納された配列」を全て合計し、HTMLに表示します。

↓こちらのサイト様を参考に、配列に格納された出目を全部足しました。
http://uhyohyo.net/javascript/11_1.html

dataset.lengthで、配列detasetに格納された出目の数分ループが回り、全ての値が足し算されます。
これで配列datasetに格納されていた出目の合計がsumに格納されました。

最後に、

↑で、sumに格納された合計値がHTMLに表示されました!


コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

カテゴリ

CONTACT

管理人:いのり

何かあればこちらよりお問い合わせください。

お問い合わせ