javascriptで作るWEBダイス③～複数のダイスの目を合算する～

2014年11月20日 javascripts

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

こんにちは！
第２回目では、ダイスの画像を出したり、ダイスの転がるようなエフェクトを付けてみました（https://cthuwebdice.com/javascripts/webdice-02/）。
今回は、3D6や2D3など、複数のダイスを転がすプログラムを作ってみたいと思います！

複数のダイスを転がすプログラムを作ってみる

今回は特に他のサイトのプログラムを参考にしたわけではありませんが、javascriptsでの数値の使い方を勉強するために、下記のサイト様でお勉強させていただきました。
こちらのサイト様はjavascriptsの使い方を分かりやすく動画で説明してくださっているので、とても良い勉強になります！

参考にしたサイト：
JavaScript入門 (全24回)
ドットインストール様⇒http://dotinstall.com/lessons/basic_javascript_v2

3D6のダイスを作ってみましょう！

それではさっそく、3D6のダイスを作ってみましょう！
3D6は、「6面ダイスを3回転がす」という意味ですよね。
つまり、先ほど作ったプログラムの、サイコロを３つに増やしたバージョンを作ればいいわけです。

(1)3D6のダイスを表示するHTMLを書きましょう！

「HTML」の1D6のダイスの下に、下記のコードを追記してください。

<div>
    <h4>3D6</h4>
    <p><input type="button" value="ダイスロール" onclick="getDice2();"></p>
    <p>
        <span><img src="img/6d.gif" name="imgdice2" alt="imgdice2"></span>
        <span><img src="img/6d.gif" name="imgdice3" alt="imgdice3"></span>
        <span><img src="img/6d.gif" name="imgdice4" alt="imgdice4"></span>
        <span id="condice2"></span>
    </p>
</div>

<div>

<p>

</p>

</div>

前回作った1D6のダイスのプログラムはgetDice1という名前だったので、今回はgetDice2という名前にしてみました！

前回作った1D6の

<img src="img/6d.gif" alt="imgdice1" name="imgdice1" />

1	<img src="img/6d.gif" alt="imgdice1" name="imgdice1" />

↑このコードを複製し、それぞれimgdice2、imgdice3、imgdice4というname属性に変えます。
このとき、同じname属性があるとプログラムが上手く動きませんので気をつけてくださいね！

また、前回作った1D6の最後のコードの

<span id="condice1"></span>

1	<span id="condice1"></span>

↑こちらも複製し、idをcondice2に変更しておきます。

(2)3D6のダイスを動かすjavascriptを書きましょう！

「dice.js」に、下記のコードを追記してください。

function getDice2() {
	var dice2 = Math.floor(Math.random() * 6);
	var dice3 = Math.floor(Math.random() * 6);
	var dice4 = Math.floor(Math.random() * 6);
	document.imgdice2.src =  getdice6[dice2];     
	document.imgdice3.src =  getdice6[dice3];
	document.imgdice4.src =  getdice6[dice4];           
	document.getElementById('condice2').innerHTML = (dice2 + 1) + (dice3 + 1) + (dice4 + 1);
	count--;
	if (count >=1 )	{ tim = setTimeout("getDice2()",mSec);}
	if (count ==0 )	{ count = 20 ;} 
}

function getDice2() {

var dice2 = Math.floor(Math.random() * 6);

var dice3 = Math.floor(Math.random() * 6);

var dice4 = Math.floor(Math.random() * 6);

document.imgdice2.src = getdice6[dice2];

document.imgdice3.src = getdice6[dice3];

document.imgdice4.src = getdice6[dice4];

document.getElementById('condice2').innerHTML = (dice2 + 1) + (dice3 + 1) + (dice4 + 1);

count--;

if (count >=1 ) { tim = setTimeout("getDice2()",mSec);}

if (count ==0 ) { count = 20 ;}

}

こちらも、プログラム名が「getDice2」に変わりましたので、１行目を「function getDice2()」にしました。

前回作った1D6の

var dice1 = Math.floor(Math.random() * 6);

1	var dice1 = Math.floor(Math.random() * 6);

↑を複製し、それぞれvar dice2、var dice3、var dice4とします。
ダイスを３つ回しますので、必要なランダム数値も３つになりますよね！

また、置き換える画像も３つ必要になりますので、1D6の

document.imgdice1.src =  getdice6[dice1];

1	document.imgdice1.src = getdice6[dice1];

↑こちらも３つ複製し、それぞれimgdice2、imgdice3、imgdice4とします。さきほどHTMLで作った、画像のname属性と同じ名前ですね！
また、それぞれのダイスのランダム数値を読んでくる必要があるので、[dice1]も[dice2]、[dice3]、[dice4]としておきます。
これで、３つのダイスが、それぞれの出目の画像をランダムで表示出来るようになりました！

それでは、転がした３つのダイスの、出目を合算しましょう！
８行目の

document.getElementById('condice2').innerHTML = (dice2 + 1) + (dice3 + 1) + (dice4 + 1);

1	document.getElementById('condice2').innerHTML = (dice2 + 1) + (dice3 + 1) + (dice4 + 1);

↑ここで、それぞれの出目を合算していきます！
１回目で説明したとおり、javascriptsの数字は常に0から始まるので、それぞれの変数（dice2、dice3、dice4）に１を足しておきます。
これで、dice2～dice4の合計値が、HTMLの<span id="condice2"></span>の中に表示されるようになりました！

また、ダイスを転がすエフェクトのための、10行目

if (count ==1 )	{ tim = setTimeout("getDice2()",mSec);}

1	if (count ==1 ) { tim = setTimeout("getDice2()",mSec);}

↑ここのgetDiceも、忘れずにgetDice2にしておきましょう。

これで、3D6のダイスができました！

2D3のダイスを作ってみましょう！

それでは次に、2D3のダイスを作ってみたいと思います。
2D3は、「3面ダイスを2回転がす」という意味ですよね。
今度は、出目を3までに絞って、ダイスを２回転がします。

(3)2D3のダイスを表示するHTMLを書きましょう！

「HTML」の3D6のダイスの下に、下記のコードを追記してください。

<div>
    <h4>2D3</h4>
    <p><input type="button" value="ダイスロール" onclick="getDice3();"></p>
    <p>
        <span><img src="../img/6d.gif" name="imgdice5" alt="imgdice5"></span>
        <span><img src="../img/6d.gif" name="imgdice6" alt="imgdice6"></span>
        <span id="condice3"></span>
    </p>
</div>

<div>

<p>

</p>

</div>

今回のプログラムの名前は、「getDice3」にします。
ダイスの数が２つになるので、

<img src="../img/6d.gif" alt="imgdice5" name="imgdice5" />

1	<img src="../img/6d.gif" alt="imgdice5" name="imgdice5" />

↑こちらのダイス画像を表示する箇所が２つになりました！
また、ダイスの出目の合計を出す<span>のidも、忘れずにid="condice3"としておきます。

(4)2D3のダイスを動かすjavascriptを書きましょう！

「dice.js」に、下記のコードを追記してください。

function getDice3() {
	var dice5 = Math.floor(Math.random() * 3);
	var dice6 = Math.floor(Math.random() * 3);
	document.imgdice5.src =  getdice6[dice5];     
	document.imgdice6.src =  getdice6[dice6];        
	document.getElementById('condice3').innerHTML = (dice5 + 1) + (dice6 + 1);
	count--;
	if (count >=1 )	{ tim = setTimeout("getDice3()",mSec);}
	if (count ==0 )	{ count = 20 ;} 
}

function getDice3() {

var dice5 = Math.floor(Math.random() * 3);

var dice6 = Math.floor(Math.random() * 3);

document.imgdice5.src = getdice6[dice5];

document.imgdice6.src = getdice6[dice6];

document.getElementById('condice3').innerHTML = (dice5 + 1) + (dice6 + 1);

count--;

if (count >=1 ) { tim = setTimeout("getDice3()",mSec);}

if (count ==0 ) { count = 20 ;}

}

コードの書き換え方はほとんど3D6の時と同じですが、今回は３面ダイスになりますので、ランダムに選ばれる数字を「6」ではなく「3」に変更する必要があります。
２～３行目を、

var dice5 = Math.floor(Math.random() * 3);

1	var dice5 = Math.floor(Math.random() * 3);

↑このように、Math.random() * 3とすることで、選ばれる数字が３種類になります！

これで、2D3のダイスができました！
このようにして、次々と色々なダイスの組み合わせを増やしていけばOKですね。

それでは、10面ダイスの場合は、どうでしょうか。
1D100は、100面ダイスを1回まわすことですが、実際には100面ダイスを使わずに10面ダイスを2回まわし、片方を1の位、片方を10の位として計算しますよね。
3D6や2D3と同じ、普通の足し算の仕方では、正しい計算になりません。
また、1D10の場合、ダイスの目が0の時は、「0」ではなく「10」と表示する必要がありますね。

次回は、10面ダイスを作ってみたいと思います！

初めてのjavascript～WEBダイス作ってみた④～
https://cthuwebdice.com/javascripts/webdice-04/

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