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

2014年12月8日 javascripts

【PR】当サイトにはアフィリエイト広告が含まれています。

クトゥルフ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ソースから。

<div>
    <h4>
    <form mame="diceall">
    <select id="roll" name="roll">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="8">8</option>
        <option value="10">10</option>
        <option value="12">12</option>
        <option value="15">15</option>
        <option value="18">18</option>
        <option value="24">24</option>
    </select>
    <span>D</span>
    <select id="men" name="men">
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="6">6</option>
        <option value="8">8</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="100">100</option>
    </select>
    </form>
    </h4>
    <p><input type="button" value="ダイスロール" onclick="getDiceall();"></p>
    <p>
        <span id="condiceall"></span>
        <span id="condiceallsum"></span>
    </p>
</div>

<div>

<h4>

</select>

</select>

</form>

</h4>

<p>

</p>

</div>

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

完成したjavascriptソース

function getDiceall() {	
　　var select = document.getElementById('roll');
　　var options = document.getElementById('roll').options;
　　var roll = parseInt(options.item(select.selectedIndex).value)+0;
	
　　var select = document.getElementById('men');
　　var options = document.getElementById('men').options;
　　var men = parseInt(options.item(select.selectedIndex).value)+0;
		
　　var dataset = [];  
　　for(var i=0; i<roll; i++){
　　　　var array = (Math.floor(Math.random()*men + 1));
　　　　dataset.push(array); 
　　}
　　document.getElementById('condiceall').innerHTML =(dataset);
		
　　var sum=0;
　　for(var i=0;i<dataset.length;i++){
　　　　sum+=dataset[i];
　　}
　　document.getElementById('condiceallsum').innerHTML =(sum);
}

function getDiceall() {

　　var select = document.getElementById('roll');

　　var options = document.getElementById('roll').options;

　　var roll = parseInt(options.item(select.selectedIndex).value)+0;

　　var select = document.getElementById('men');

　　var options = document.getElementById('men').options;

　　var men = parseInt(options.item(select.selectedIndex).value)+0;

　　var dataset = [];

　　for(var i=0; i<roll; i++){

　　　　var array = (Math.floor(Math.random()*men + 1));

　　　　dataset.push(array);

　　}

　　document.getElementById('condiceall').innerHTML =(dataset);

　　var sum=0;

　　for(var i=0;i<dataset.length;i++){

　　　　sum+=dataset[i];

　　}

　　document.getElementById('condiceallsum').innerHTML =(sum);

}

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

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

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

var select = document.getElementById('roll');
var options = document.getElementById('roll').options;
var roll = parseInt(options.item(select.selectedIndex).value)+0;
	
var select = document.getElementById('men');
var options = document.getElementById('men').options;
var men = parseInt(options.item(select.selectedIndex).value)+0;

var select = document.getElementById('roll');

var options = document.getElementById('roll').options;

var roll = parseInt(options.item(select.selectedIndex).value)+0;

var select = document.getElementById('men');

var options = document.getElementById('men').options;

var men = parseInt(options.item(select.selectedIndex).value)+0;

はじめ、

var value = document.getElementById('roll').options.value;

1	var value = document.getElementById('roll').options.value;

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

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

function changeSelect(){
    var select = document.getElementById('select');
    var options = document.getElementById('select').options;
    var value = options.item(select.selectedIndex).value;
}

function changeSelect(){

var select = document.getElementById('select');

var options = document.getElementById('select').options;

var value = options.item(select.selectedIndex).value;

}

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

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

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

var dataset = [];  
　　for(var i=0; i<roll; i++){
　　　　var array = (Math.floor(Math.random()*men + 1));
　　　　dataset.push(array); 
　　}
document.getElementById('condiceall').innerHTML =(dataset);

var dataset = [];

　　for(var i=0; i<roll; i++){

　　　　var array = (Math.floor(Math.random()*men + 1));

　　　　dataset.push(array);

　　}

document.getElementById('condiceall').innerHTML =(dataset);

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

var array = (Math.floor(Math.random()*men + 1));

1	var array = (Math.floor(Math.random()*men + 1));

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.push(array);

1	dataset.push(array);

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

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

document.getElementById('condiceall').innerHTML =(dataset);

1	document.getElementById('condiceall').innerHTML =(dataset);

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

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

（3）出てきた出目を合計し、表示する

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

var sum=0;
　　for(var i=0;i<dataset.length;i++){
　　　　sum+=dataset[i];
　　}
document.getElementById('condiceallsum').innerHTML =(sum);

var sum=0;

　　for(var i=0;i<dataset.length;i++){

　　　　sum+=dataset[i];

　　}

document.getElementById('condiceallsum').innerHTML =(sum);

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

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

最後に、

document.getElementById('condiceallsum').innerHTML =(sum);

1	document.getElementById('condiceallsum').innerHTML =(sum);

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

【PR】当サイトにはアフィリエイト広告が含まれています。