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

2014年11月22日 javascripts


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

 

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

 

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

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

今回は、6面ダイスと同様に、ダイスの出目の「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面ダイス画像をセットした行の下に、下記のコードを追記してください。

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

 

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

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

 

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

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

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

 

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

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

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

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

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

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

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

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

 

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

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

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

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

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

7行目の

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

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

まず8行目で

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

次に9行目で

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

10行目で

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

最後に11行目で

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

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

 

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

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

 

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

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

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

 

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

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

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

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

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

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

と書き換えればOKです!

 

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

 

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

初めてのjavascript~WEBダイス作ってみた⑤~
http://cthuwebdice.session.jp/javascripts/webdice-05/


コメント

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

カテゴリ

CONTACT

管理人:いのり

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

お問い合わせ