javascriptで作るWEBダイス①～数字をランダムに取り出してみる～

2014年11月17日 javascripts

【PR】当サイトにはアフィリエイト広告が含まれています。

JavascriptsどころかJqueryも、適当にパラメーターを変えてそれっぽくする脳しかなかった私が、この「クトゥルフWEBダイス」を作るために勉強してきたことを、ちょっとずつまとめてみようと思います。
お役に立てましたら幸いです！

まずは、ランダムに数字を表示してみる

まず始めに、ボタンを押したら、ランダムに数字が出るプログラムを作ります。
私は「おみくじ」を作るプログラムを参考にしました。

参考にしたサイト：
その場で表示が変化する「おみくじ」を作る
All About様（http://allabout.co.jp/gm/gc/23960/）

(1)まずはHTMLで、ボタンと、結果を表示する場所を作りましょう。

ダイスといえば基本中の基本、６面ダイスを１回まわしてみます（TRPGでいえば1D6ですね）。
HTMLファイルを作成し、<body>内の、ダイスを設置したい場所に下記のコードを記述します。
※HTMLファイルは、HTML5でコーディングしておきましょう！

<div>
<h4>1D6</h4>
<p><input type="button" value="ダイスロール"></p>
<p>
  <span id="condice1"></span>
</p>
</div>

<div>

<p>

</p>

</div>

３行目の↓の部分がボタンに、

<input class="btn" type="button" value="ダイスロール" />

1	<input class="btn" type="button" value="ダイスロール" />

５行目の↓の部分が、サイコロを回して出た数字を表示する場所になります。

<span id="condice1"></span>

1	<span id="condice1"></span>

サイコロの画像の真横にサイコロの出目を出したかったので、５行目は<span>でマークアップしてみました。
サイコロの画像はあとで付け足しますので、今は一旦おいておきます。
ダイスを回すボタンの名前を変更したい時は、３行目のvalue=”ダイスロール”の部分を、value=”回す”などに変更します。

(2)ボタンにトリガーを仕掛けましょう！

次に、ボタンをクリックした時に、ランダムに数字を表示させたいので、クリックした時にアクションを起こすトリガーとなるonclickを、３行目のボタンの中に書き足します。

<div>
    <h4>1D6</h4>
    <p><input type="button" value="ダイスロール" onclick="getDice1();"></p>
    <p>
        <span id="condice1"></span>
    </p>
</div>

<div>

<p>

</p>

</div>

３行目のinputタグの中に、onclick=”getDice1();”を足しました。
「getDice1();」は、このボタンをクリックした時に動くプログラムの名前ですので、自分で好きな名前にすることが出来ます。
今回は、「ダイスの出目を取得するプログラム」の名前なので、わかりやすく「getDice1」にしてみました！
ナンバーを振ってあるのは、あとで同じページ内にダイスを増やす時に、プログラムも同じ数増えるので、その時に区別できるようにするためです。
これで、「ダイスロール」ボタンをクリックした時にプログラムを動かすためのトリガーができました。

(3)javascriptsファイルを用意しましょう！

それでは、いざ、javascriptsを書いてみましょう。
javascriptは同じHTMLの中に書いてもいいですが、今回はSEO的な観点から、別にjavascriptファイルを作成して、そちらに記述していこうと思います。
まず、先ほどのHTMLファイルと同じ階層に、「js」という名前のフォルダを作成します。
この「js」フォルダの中に、作成したjavascriptファイルを入れていきます。

テキストエディタなどを開いて、「dice.js」という名前のファイルを作成し、「js」フォルダの中に保存します。
この時、文字コードは「UTF-8」を選択して保存してください。

「dice.js」が出来たら、HTMLに、「dice.js」を呼び出すためのリンクを記載します。
HTMLファイルの<head>内に、下記のHTMLコードを追記します。

<script src="js/dice.js" type="text/javascript"></script>

1	<script src="js/dice.js" type="text/javascript"></script>

これで、HTML内の「ダイスロール」ボタンを押したときに、「dice.js」のプログラムが呼び出されるようになりました。

(4)実際にプログラムを書いてみましょう！

それでは、実際に「dice.js」ファイルの中に、プログラムを書いていきましょう！
「dice.js」ファイルに、下記のコードを記述します。

// JavaScript Document

function getDice1() {
    var dice1 = Math.floor(Math.random() * 6);          
    document.getElementById('condice1').innerHTML = (dice1 + 1);
}

// JavaScript Document

function getDice1() {

var dice1 = Math.floor(Math.random() * 6);

document.getElementById('condice1').innerHTML = (dice1 + 1);

}

３行目↓は、「getDice1」のプログラムを{}の中に書きますよ～、HTMLのどこかで「getDice1」を発動するためのトリガーが引かれたら、この中に書いてあるプログラムを動かしてくださいね～、という宣言です。

function getDice1()

1	function getDice1()

先ほどHTMLで、「ダイスロールボタン」をクリックしたら「getDice1」が呼び出されるように、onclick=”getDice1();”を書きましたよね。
たとえば、HTMLの中でonclick=”wahaha();”と設定していた場合は、ここでは「function wahaha()」と書きます！

４行目↓では、Math.random()を使って、数字をランダムに呼び出しています。

var dice1 = Math.floor(Math.random() * 6);

1	var dice1 = Math.floor(Math.random() * 6);

Math.floor(Math.random() * 6)と書くことで、6つの数字の中からランダムに１つ、数字を選び出すことができます。
Math.floor()は小数点以下を切り捨てて整数にしてくれる命令文です。

数字を選び出しただけではHTMLに書き込むことが出来ないので、いったん、この数字を「dice1」という変数に代入します。
変数の名前は自分で決めてOKです！javascriptsの「=」は、「代入する」という意味です。
「var」は「宣言する」という意味です。ここではMath.random()で呼び出した数字を「dice1」という変数に代入しましたよ～、と宣言しています！

５行目↓で、いよいよHTMLに数字を出力します！

document.getElementById('condice1').innerHTML = (dice1 + 1);

1	document.getElementById('condice1').innerHTML = (dice1 + 1);

getElementById(‘condice1’).innerHTMLでHTML内のcondice1というidがふられたタグを探しだして、condice1というidがふられた要素の中に、変数「dice1」に1を足した数字を出力してね！という意味です。
なぜ1を足すかと言うと、javascriptsでは、数字が常に0から始まるからです。
ダイスの数値は、1から始まりますよね！なので、dice1に1を足してから、その数字を出力するようにします。
HTMLを見ると、５行目の<span>に、condice1というidがありました。
これで、HTMLに、ボタンを押したときに１～６までのダイスの出目が表示されるようになりました！

これだけでも充分にダイスとしては機能しますが、なんだか味気ないですよね。。
次の記事では、ダイスの画像をjavascriptsで表示してみたいと思います！

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

【PR】当サイトにはアフィリエイト広告が含まれています。