こんにちは！
第１回目では、ランダムに数字を表示してみるプログラムを作ってみました（https://cthuwebdice.com/javascripts/webdice-01/）。
今回は、数字を表示するだけでは味気ないので、ダイスの画像を付けてみようと思います！

ダイスの画像を付けてみる

「ダイスロール」ボタンを押すと、数字と一緒にダイスの画像が表示されるようにします。
ダイスに画像を付けるために、こちらのサイト様を参考にさせていただきました。

参考にしたサイト：
２２、サイコロゲーム
「ＱＰＯＮの「ホームページ」作成術」様（http://qpon.quu.cc/java/nyumon/nyumon22.htm）

(1)まずは、ダイスの画像を用意しましょう

まずは、何はともあれダイスの画像が無ければ始まりませんよね。
なんでもいいので、６面ダイスの画像を用意しましょう。
後でこちらのサイトでも、ダイスのサンプル画像をダウンロード出来るように準備しようと思います。

今回は、ダイスの出目の「１」～「６」と、回す前の「？」の面を用意しました。
ダイスの出目は、それぞれ「6d1.gif」、「6d2.gif」、「6d3.gif」、「6d4.gif」、「6d5.gif」、「6d6.gif」という名前で、回す前の「？」の面は「6d.gif」という名前で作成しました。

それでは作成した画像を、フォルダに入れましょう。
以前作成したHTMLファイルと同じ階層に、「img」という名前のフォルダを作成します。
この「img」フォルダの中に、作成した画像ファイルを入れてください。

(2)HTMLに、ダイスを回す前の画像を入れましょう

前回作成したHTMLの５行目に、ダイスを回す前の画像を入れるコードを足します。

５行目に、回す前の画像「6d.gif」を入れるコードを書きました。これで、ボタンを押すと出てくる数字の横に、「？」の画像が出ます。
javascriptで読み込めるように、画像のname属性にimgdice1という名前を付けました。この名前も自分で自由に付けることができます！
ついでに、alt属性にも同じようにimgdice1と書いておきましょう。

(3)javascriptに、ロール後の画像をセットしましょう！

それでは、javascriptのファイルに、ロール後の画像をセットしましょう。
前回作成した「dice.js」の3行目～9行目に、下記のコードを追記します。

「getdice6」というダイスの画像置き場を作り、「Array」でダイスの画像を格納しました。この時、出目の画像が１～６の順番になるようにしてください。
imgの前に書いてあるパス（../）の意味が分からない場合は、「相対パス」でググって調べてみてくださいね！

これでダイスの画像がjavascriptにセットされました。
それでは、ダイスの出目のとなりに、同じ出目の画像を出すためのプログラムを書きましょう！

(4)javascriptで、ダイスの画像を置き換えてみましょう！

「dice.js」の13行目に、下記のコードを追記します。

imgdice1.src、つまり「imgdice1」という名前のついた画像を、=の右側の、「getdice6」の画像で置き換えます。
先ほど、HTMLで、回す前の画像にimgdice1というname属性を付けましたよね。
これで、ダイスの画像を、getdice6にセットした画像で置き換えることができます！

また、getdice6[dice1]は、getdice6にセットした画像のうち、Math.random()で選び出したdice1番目の画像、という意味です。
これで、前回表示した数字と、全く同じ出目が描かれた画像を表示することができました！
（※「Array」で画像を格納する時に順番を間違うと、違う出目の画像が出てしまうので気をつけましょう！）

これで、少しプログラムが華やかになりました。
でも、なんだか少し寂しい気も……。
そう、ダイスを転がす時の、コロコロコロ……と転がすようなエフェクトが欲しくなりますよね！
それでは、ダイスを転がす、点滅のエフェクトを付けてみましょう！

(5)javascriptで、ダイスを転がすエフェクトを付けましょう！

このエフェクトを付けるために、下記のサイトを参考にさせていただきました！

参考サイト：
一定回数キャラクタを点滅させる
（http://www.openspc2.org/reibun/javascript/move/013/）

ダイスが転がっているように見せるために、ダイスの画像を素早く点滅させてみたいと思います。
まず、dice.jeに、ダイスの点滅する回数、速度を追記してみましょう。

countで点滅させる回数を、
mSec(ミリ秒)で点滅速度を設定します。
数字をいろいろ弄って、丁度いいシャッフル具合を探してみてくださいね！
今回は、countを20、mSecを50で設定してみました！

それでは、実際にダイスを転がすエフェクトを追記してみましょう！
dice.jsの18～20行目に、下記のコードを追記してください。

19行目の↓で、

カウンタの数字が1よりも大きい場合（if (count >=1 ) ）、mSecで設定した速度(50ミリ秒)で「getDice1」のプログラムを実行します。
1回「getDice1」のプログラムが動作する毎に、カウンタの数字が1ずつ減っていき、0になるまで繰り返します。

20行目の↓で、

カウンタの数字が0になったとき、プログラムは動作させずに、カウンタの数字を20に戻します。
プログラムを動作させないので、ダイスの出目が止まりますよね。
また、カウントの数字を元に戻すことで、もう１度ボタンを押しても、きちんとカウンタが20から動作します！

これで大分、いいかんじにダイスが転がるようになりましたね！
次回の記事では、2D6や3D6など、複数のダイスを転がす場合について書いてみたいと思います！

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