javascriptで作るWEBダイス②~画像と点滅エフェクトを付ける~

javascriptで作るWEBダイス②~画像と点滅エフェクトを付ける~

2014年11月19日 javascripts

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

 

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

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

参考にしたサイト:
22、サイコロゲーム
「QPONの「ホームページ」作成術」様(http://qpon.quu.cc/java/nyumon/nyumon22.htm

 

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

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

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

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

 

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

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

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

 

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

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

「getdice6」というダイスの画像置き場を作り、「Array」でダイスの画像を格納しました。この時、出目の画像が1~6の順番になるようにしてください。
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に戻します。
プログラムを動作させないので、ダイスの出目が止まりますよね。
また、カウントの数字を元に戻すことで、もう1度ボタンを押しても、きちんとカウンタが20から動作します!

 

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

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

コメント

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