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

2014年11月20日 javascripts


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

 

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

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

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

 

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

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

 

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

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

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

前回作った1D6の

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

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

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

 

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

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

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

前回作った1D6の

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

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

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

それでは、転がした3つのダイスの、出目を合算しましょう!
8行目の

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

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

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

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

 

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

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

 

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

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

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

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

 

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

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

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

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

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

 

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

 

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

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


コメント

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

カテゴリ

CONTACT

管理人:いのり

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

お問い合わせ