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

2014年11月17日 javascripts


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

 

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

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

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

 

 

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

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

 

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

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

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

 

 

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

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

3行目の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コードを追記します。

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

 

 

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

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

 

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

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

 

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

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

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

 

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

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

 

 

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

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


コメント

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

カテゴリ

CONTACT

管理人:いのり

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

お問い合わせ