今日の授業で、サイコロの目をランダムに表示させました
今日は、JavaScriptを使用してサイコロをランダムに表示できるように作成しました。
下記のように記述して表示させることが出来ました。
①ランダムに表示させる(更新すると表示されるサイコロの目が変わる)。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サイコロの目をランダムに表示させる</title>
</head>
<body>
<script>
var r =Math.floor(Math.random( )*6);
console.log(r);
document.write('<p><img src="img/sk' + r + '.jpg"><p>');
</script>
</body>
</html>
※ フォルダの中に index.html と imgフォルダ（ さいころ画像；0.jpg, 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg ）を作成
②ボタンを押してランダムに表示させました。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サイコロの目をランダムに表示さる(ボタンを押して)</title>
<script>
function dice( ) {
var r =Math.floor(Math.random( )*6);
console.log(r);
document.dimg.src='img/sk' + r + '.jpg';
}
</script>
</head>
<body>
<p><img src="img/sk0.jpg" name="dimg"><p>
<p><button onClick="dice( )">ボタンを押してサイコロを振る</button></p>
</body>
</html>
※ フォルダの中に index.html と imgフォルダ（ さいころ画像；0.jpg, 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg ）を作成
③画像データ名が one.jpg, two.jpg, three.jpg, four.jpg, five.jpg, six.jpg の場合にランダム表示させる。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サイコロの目をランダムに表示さる(ボタンを押して)</title>
<script>
var sai = new Array('one.jpg', 'two.jpg', 'three.jpg', 'four.jpg', 'five.jpg', 'six.jpg');
function dice( ) {
var r =Math.floor(Math.random( )*6);
console.log(r);
document.dimg.src='img2/' + sai[r];
console.log(sai[r]);
}
</script>
</head>
<body>
<p><img src="img2/one.jpg" name="dimg"></p>
<p><button onClick="dice( )">ボタンを押してサイコロを振る</button></p>
</body>
</html>
※ フォルダの中に index.html と img2フォルダ（ さいころ画像；one.jpg, two.jpg, three.jpg, four.jpg, five.jpg, six.jpg ）を作成
