javascriptでのサイコロ作成
javascriptでサイコロを作る方法です。
<body>
<button onclick="dice()">サイコロ</button>
<p id="result"></p>
</body>
ボタンタグをクリックすると1〜6の数字がpタグに表示されます。
onclick属性をbutton要素に記述することでボタンをクリックしたときにjavascriptに作成したdice関数を起動させます。
<head>
<script>
function dice() {
let d = document.getElementById("result");
let r = Math.ceil(Math.random()*6);
d.textContent = r;
}
</script>
</head>
dice関数には変数dとrを定義します。dにはサイコロを振った結果を表示するためにp要素に指定したid属性のresultを取得させます。
rには1〜6のどれかの数字がランダムに取得できるようにします。
「Math.ceil( )」メソッドは引数に指定した値を小数点以下繰り上げしてくれるメソッドです。（仮に1.34という少数なら2に繰り上げてくれます。）
「Math.random( )」メソッドは0より大きく1より小さい値をランダムに返してくれるメソッドです。「Math.random( )*6」とする事で0より大きく6より小さい数値を返してくれます。
この2つのメソッドを組み合わせることで1〜6のランダムな数値を取得できるのでサイコロが完成します。
「d.textContent = r;」で1〜6の結果をid属性でresultを持つp要素に表示することができます。
修正
上記の内容に間違いがあったようなので、修正します。
「Math.random()」メソッドは0より大きく１より小さい値を返すのではなくて、【0以上1未満の値を返す】ようなので、script要素内は下記になります。
<script>
function dice() {
let d = document.getElementById("result");
let r = Math.floor(Math.random()*6+1);
d.textContent = r;
}
</script>
「Math.floor()」メソッドは引数に指定した値を小数点以下切り捨てしてくれるメソッドです。「Math.floor」の引数内は1以上７未満になるので、1〜６の値をランダムに変数rに代入してくれます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dice</title>
<script>
function dice() {
let d = document.getElementById("result");
let r = Math.floor(Math.random()*6+1);
d.textContent = r;
}
</script>
</head>
<body>
<button onclick="dice()">サイコロ</button>
<p id="result"></p>
</body>
</html>
上記のコードをhtmlファイルにコピーすれば試すことができます。