javascriptで作るWEBダイス④～10面ダイスとif文～

2014年11月22日 javascripts

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

こんにちは！
第３回目では、複数のダイスを転がすプログラムを作りました（https://cthuwebdice.com/javascripts/webdice-03/）。
今回は、少し特殊な演算が必要な、10面ダイスを作ってみましょう！

10面ダイスをつくってみましょう

(1)10面ダイスの画像を用意しましょう！

まずは、10面ダイスの画像を用意しましょう。
後でこちらのサイトでも、ダイスのサンプル画像をダウンロード出来るように準備しようと思います。

今回は、６面ダイスと同様に、ダイスの出目の「0」～「9」と、回す前の「？」の面を用意しました。
ダイスの出目は、それぞれ「10d0.gif」、「10d1.gif」、「10d2.gif」、「10d3.gif」、「10d4.gif」、「10d5.gif」、「10d6.gif」、「10d7.gif」、「10d8.gif」、「10d9.gif」という名前で、回す前の「？」の面は「10d.gif」という名前で作成しました。

作成した画像を、「img」フォルダの中に、ファイルを入れてください。

(2)10面ダイスの画像をjavascriptsにセットしましょう！

それでは、10面ダイスの画像をjavascriptにセットします。
「dice.js」の6面ダイス画像をセットした行の下に、下記のコードを追記してください。

getdice10 = new Array(
"../img/10d0.gif",
"../img/10d1.gif",
"../img/10d2.gif",
"../img/10d3.gif",
"../img/10d4.gif",
"../img/10d5.gif",
"../img/10d6.gif",
"../img/10d7.gif",
"../img/10d8.gif",
"../img/10d9.gif");

getdice10 = new Array(

"../img/10d0.gif",

"../img/10d1.gif",

"../img/10d2.gif",

"../img/10d3.gif",

"../img/10d4.gif",

"../img/10d5.gif",

"../img/10d6.gif",

"../img/10d7.gif",

"../img/10d8.gif",

"../img/10d9.gif");

これでダイスの画像がjavascriptにセットされました。

1D100のダイスを作ってみましょう

まずは、1D100のダイスを作ってみましょう！
1D100は、10面ダイスを2回まわし、片方を1の位、片方を10の位として計算します。
この場合、片方のダイスの出目を10倍してから足し算する必要がありますね！

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

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

<div>
    <h4>1D100</h4>
    <p><input type="button" value="ダイスロール" onclick="getDice4();"></p>
    <p>
        <span><img src="../img/10d.gif" name="imgdice7" alt="imgdice7"></span>
        <span><img src="../img/10d.gif" name="imgdice8" alt="imgdice8"></span>
        <span id="condice4"></span>
    </p>
</div>

<div>

<p>

</p>

</div>

今回のプログラムの名前は、「getDice4」にします。
HTMLの記述は、6面ダイスと同じですね！
ダイス画像のname属性や、ダイスの出目の合計を出すspanのidを、これまでのプログラムと被らないように変更しておきましょう。

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

それでは、「dice.js」の一番下に、下記のコードを追記してください。

function getDice4() {
    var dice7 = Math.floor(Math.random() * 10);
    var dice8 = Math.floor(Math.random() * 10);
    document.imgdice7.src =  getdice10[dice7];  
    document.imgdice8.src =  getdice10[dice8];
    document.getElementById('condice4').innerHTML = (dice7)*10 + (dice8);	
    count--;
    if (count >=1 ) { tim = setTimeout("getDice4()",mSec);}
    if (count ==0 ) { count = 20 ;} 
}

function getDice4() {

var dice7 = Math.floor(Math.random() * 10);

var dice8 = Math.floor(Math.random() * 10);

document.imgdice7.src = getdice10[dice7];

document.imgdice8.src = getdice10[dice8];

document.getElementById('condice4').innerHTML = (dice7)*10 + (dice8);

count--;

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

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

}

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

var dice7 = Math.floor(Math.random() * 10);

1	var dice7 = Math.floor(Math.random() * 10);

↑このように、Math.random() * 10とすることで、選ばれる数字が10種類になります！
また、10面ダイスの場合は1ではなく0から始まりますので、1は足しません。

また、４～５行目を、getdice6からgetdice10に変更します。
getdice10にすることで、最初にセットしておいた10面ダイスの画像を読み込むことができます！

それでは、合計値の計算をする６行目を見てみましょう！

(dice7)*10 + (dice8);

1	(dice7)*10 + (dice8);

片方のダイスを10倍してから足すことで、1D100の計算ができますね！
これで1D100のダイスができました！

ところでクトゥルフ神話TRPGでは、1～5が出るとクリティカル、96～100が出るとファンブルになりますよね！
折角なので、出目にあわせて「クリティカル」「ファンブル」のメッセージが出るようにしましょう！

(4)「クリティカル」「ファンブル」のメッセージを出しましょう！

それではまず、HTMLにメッセージを出すフィールドを作りましょう。
先ほど作ったHTMLの9行目に、下記のコードを追記します。

<div>
    <h4>1D100</h4>
    <p><input type="button" value="ダイスロール" onclick="getDice4();"></p>
    <p>
        <span><img src="../img/10d.gif" name="imgdice7" alt="imgdice7"></span>
        <span><img src="../img/10d.gif" name="imgdice8" alt="imgdice8"></span>
        <span id="condice4"></span>
    </p>
    <span id="result"></span>
</div>

<div>

<p>

</p>

</div>

9行目に追記したspanに、id="result"を振っておきます。

それでは、「dice.js」の7行目以降に、下記のコードを追記します。

function getDice4() {
    var dice7 = Math.floor(Math.random() * 10);
    var dice8 = Math.floor(Math.random() * 10);
    document.imgdice7.src =  getdice10[dice7];  
    document.imgdice8.src =  getdice10[dice8];
    document.getElementById('condice4').innerHTML = (dice7)*10 + (dice8);
    var Result = (dice7)*10 + (dice8);
        if (Result >=96 ){document.getElementById('result').innerHTML = ("ファンブル！");} 
        else if (Result ==0 ){document.getElementById('result').innerHTML = ("ファンブル！");}
        else if (Result <=5 ){document.getElementById('result').innerHTML = ("クリティカル！");} 
        else {document.getElementById('result').innerHTML = (" ");}
    count--;
    if (count >=1 )	{ tim = setTimeout("getDice4()",mSec);}
    if (count ==0 )	{ count = 20 ;} 
}

function getDice4() {

var dice7 = Math.floor(Math.random() * 10);

var dice8 = Math.floor(Math.random() * 10);

document.imgdice7.src = getdice10[dice7];

document.imgdice8.src = getdice10[dice8];

document.getElementById('condice4').innerHTML = (dice7)*10 + (dice8);

var Result = (dice7)*10 + (dice8);

if (Result >=96 ){document.getElementById('result').innerHTML = ("ファンブル！");}

else if (Result ==0 ){document.getElementById('result').innerHTML = ("ファンブル！");}

else if (Result <=5 ){document.getElementById('result').innerHTML = ("クリティカル！");}

else {document.getElementById('result').innerHTML = (" ");}

count--;

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

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

}

ここでは、if文を使って、条件に合ったメッセージを出すようにプログラミングしていきます。
まず、ランダムに選んだ数字を、計算式で演算できるように、一旦「Result」という変数に格納します。

７行目の

var Result = (dice7)*10 + (dice8);

1	var Result = (dice7)*10 + (dice8);

↑で、1D100を振った結果の出目を、「Result」という変数に格納しました。
それでは、出目にあわせた条件の文を見て行きましょう。

javascriptsのif文は、
if (条件①) {条件①の場合の動作}
else if (条件②) {条件①ではないが、条件②の場合の動作}
else {条件①でも②でもない時の動作}
……のように書いていきます。

まず８行目で

if (Result &gt;=96 ){document.getElementById('result').innerHTML = ("ファンブル！");}

1	if (Result >=96 ){document.getElementById('result').innerHTML = ("ファンブル！");}

『もし「Result」が96以上だった場合、idがresultのHTMLの要素に「ファンブル！」と表示しなさい』
という命令を書きます。

次に９行目で

else if (Result ==0 ){document.getElementById('result').innerHTML = ("ファンブル！");}

1	else if (Result ==0 ){document.getElementById('result').innerHTML = ("ファンブル！");}

『もし「Result」が96以上ではなく、0だった場合、idがresultのHTMLの要素に「ファンブル！」と表示しなさい』
という命令を書きます。

10行目で

else if (Result &lt;=5 ){document.getElementById('result').innerHTML = ("クリティカル！");}

1	else if (Result <=5 ){document.getElementById('result').innerHTML = ("クリティカル！");}

『もし「Result」が96以上ではなく、0でもなく、5以下だった場合、idがresultのHTMLの要素に「クリティカル！」と表示しなさい』
という命令を書きます。
9行目と10行目の順番を逆にすると、0だった場合も先に「5以下の場合クリティカル」として処理されてしまうので注意しましょう！

最後に11行目で

else {document.getElementById('result').innerHTML = (" ");}

1	else {document.getElementById('result').innerHTML = (" ");}

『もし「Result」が96以上ではなく、0でもなく、5以下でもない場合、idがresultのHTMLの要素は空欄にしなさい』
という命令を書きます。

これで、出目にあわせたメッセージを出せるようになりました！
1D100のダイスは、これで完成です。

1D10のダイスを作りましょう

それでは、1D10のダイスを作っていきましょう。
1D10は、「0」の出目が出たときに、「0」ではなく「10」を表示する必要があります。
これも、if文を使って条件を絞ればできますね！

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

それでは、「HTML」の1D100の下に、下記のコードを追記してください。

<div>
    <h4>1D10</h4>
    <p><input type="button" value="ダイスロール" onclick="getDice5();"></p>
    <p>
        <span><img src="../img/10d.gif" name="imgdice9" alt="imgdice9"></span>
        <span id="condice5"></span>
    </p>
</div>

<div>

<p>

</p>

</div>

今回のプログラムの名前は、「getDice5」にします。
書き方は1D100とほとんど同じですね！いつものように、ダイス画像のname属性や、ダイスの出目の合計を出すspanのidを、これまでのプログラムと被らないように変更しておきます。

(6)1D10のダイスを動かすjavascriptを書きましょう！

それでは、「dice.js」の一番下に、下記のコードを追記してください。

function getDice5() {
    var dice9 = Math.floor(Math.random() * 10);
    document.imgdice9.src =  getdice10[dice9];            
    document.getElementById('condice5').innerHTML = (dice9);
    if (dice9 ==0 ) {document.getElementById('condice5').innerHTML = 10}
    count--;
    if (count >=1 ) { tim = setTimeout("getDice5()",mSec);}
    if (count ==0 ) { count = 20 ;} 
}

function getDice5() {

var dice9 = Math.floor(Math.random() * 10);

document.imgdice9.src = getdice10[dice9];

document.getElementById('condice5').innerHTML = (dice9);

if (dice9 ==0 ) {document.getElementById('condice5').innerHTML = 10}

count--;

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

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

}

基本的には、1D100と一緒です！

「0」の出目が出たときに「10」を表示するために、5行目に

if (dice9 ==0 ) {document.getElementById('condice5').innerHTML = 10}

1	if (dice9 ==0 ) {document.getElementById('condice5').innerHTML = 10}

というif文を書きました。
『もし「dice9」の出目が0だった場合、idがcondice5のHTMLの要素に「10」と表示しなさい』という意味ですね！
これで、「0」の出目が出たときに「10」が表示されるようになりました。

同様に、1D100のダイスでも「00」の出目が出たときに「100」と表示したい場合は、span id="condice4"へ出力するためのコードを

document.getElementById('condice4').innerHTML = (dice7)*10 + (dice8);
if ((dice7)*10 + (dice8) ==0 ) {document.getElementById('condice4').innerHTML = 100}

1 2	document.getElementById('condice4').innerHTML = (dice7)10 + (dice8); if ((dice7)10 + (dice8) ==0 ) {document.getElementById('condice4').innerHTML = 100}

と書き換えればOKです！

これで、ひととおりのダイスを作ることが出来ました！
最後にもうひとつ、ダイスを回す時、まだ少し何か寂しいかんじがしませんか？
そう！ダイスを回した時に、「コロコロ……」という効果音が欲しいですよね！

次の記事では、ボタンをクリックした時に音を鳴らしてみようと思います！

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

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