一人でダイスを振り続けるさみしいWebアプリの作成に挑戦してみた#3。

世界のぽっぽや　てつお

2024年7月24日 00:34

さて、前回に引き続きさみしいWebアプリを作っていきます。
今回はJava Script編です。
Java Scriptのファイルを作成しました。

Java Scriptでは、サイコロの目を変えるコードを書きます。
ここでサイコロの目は↓の通り画像で表示しています。

一つひとつは画像なので、この画像をランダムに選ぶようにしましょう。
まず、ランダム関数を作ります。
var randomNumber1 = Math.floor(Math.random() * 6);

"var"は、JavaScriptで変数を宣言するためのキーワードです。

"randomNumber1"は、変数の名前です。いま適当につくりました。

"Math.random()"は、JavaScriptの組み込み関数です。この関数は0以上1未満のランダムな浮動小数点数を生成します。0.1, 0.2, 0.3などです。

Math.random() * 6は、生成されたランダムな数を6倍します。これにより、0以上6未満のランダムな浮動小数点数が得られます。

Math.floor()は、引数として与えられた数値の小数点以下を切り捨てて、最も近い整数にします。これにより、0から5までのランダムな整数が得られます。

この Math.floor(Math.random() * 6);が正常に動くか確認してみます。
Chromeを開いて、右クリック、検証を開きます。
↓の画像のようにタブをクリックしていくと、検証画面がでます。
右側に Math.floor(Math.random() * 6);を記入して実行をしてみます。

すると、したのConsoleのところに０から５までの乱数が表示されることが確認できました。

これでこのコードは正確だとわかりました。
しかし、このコードは０～５までです。今回は０～６までなので１を追加します。

これでOK。
次は、この乱数をつかって、サイコロの画像をランダムに選択します。

どうすればこの乱数とサイコロの画像をリンクさせることができるでしょうか？
先ほどのサイコロの画像を見てみると↓のような名前が付けられています。

そして、どのようにリンクされているかというと、
↓のようにリンクされています。
<img class="img1" src="images/dice6.png" />

ということは、<img class="img1" src="images/dice6.png" />
この太字のところdice 6 .pngの6の数字だけ変更すれば乱数とリンク付けできそうです。

変数をつくります。名前はrandomDiceImageです。
上記dice + randomNumber1 +.pngとすればいかがでしょうか

こうすれば、dice 6の6だけを乱数と入れ替えることができます。
それでは、もう一度HTMLにもどって確認してみます。

正確な名前はimages/dice..なので、imagesも追加します。

はい、これで名前を変更することができます。
ここまででimage要素のsrc属性を変更する準備ができました。
では、この属性を変更する方法は以下になります。

var image1 = document.querySelectorAll("img")[0];
この変数は、HTML ドキュメント内の最初の `<img>` 要素を選択して `image1` という変数に格納するコードです。

"document.querySelectorAll("img")"は、ドキュメント内のすべての `<img>` 要素を選択し、NodeList、つまり中身を変更して返します。

"[0]"は、その NodeList の最初の要素（つまり、最初の `<img>` 要素）を取得します。

image1が手に入ったので、属性の設定をします。