JavaScript講座｜サイコロゲームを作ってみよう（WEB）

この記事で学べること

JavaScriptで乱数を作り、サイコロの目を出す結果を毎回変化させる
JavaScriptを動かすボタンを設置する
JavaScriptで関数（プログラムのセット）を使って呼び出す
JavaScriptで画像を差し替える

JavaScriptでサイコロを作ってみよう
サイコロに画像をつけよう

JavaScriptでサイコロを作ってみよう

うさタブ

今回は簡単な【サイコロゲーム】を作ってみるッピよ～

ユウキ

サイコロゲーム？

うさタブ

現実にあるサイコロと同じものッピネ～。

賽さいを振って出た目で遊ぶゲームッピ！

うさタブ

今回は、JavaScriptで乱数、

関数・ボタンの配置を学ぶッピよ！

楽しみにしているッピ！

サイコロのプログラムコードと解説

<!-- 見えない部分 -->
<html>
<head>
<script>

function Saikoro() {

	let saikoro = Math.floor( Math.random() * 6) +1;//ランダムで１～６の数字を作ります
	document.getElementById("kekka").innerHTML = saikoro;//結果をid="kekka"に表示します
        document.getElementById("sainome").src= saikoro + ".jpg";//画像をid="sainome"に表示します

}

</script>
</head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね！↓ -->

<p><img id="sainome" src="1.jpg" width="50" height="50"></p>
<p><button onclick="Saikoro();">　サイコロを振る　</button></p>
<p id="kekka"></p>

<!-- ここまで！ -->

</body>
</html>

うさタブ

今回はこのコードを解説していくッピよ～

乱数を作ってみよう

うさタブ

さっそくプログラムのための【乱数】を作ってみるッピ

サンプルコードを用意するから、それを元に作っていくッピよ～

ユウキ

その前に乱数とかランダムとか意味わかんないんだけど・・・

うさタブ

乱数やランダムというのは、行動を起こすごとに結果が変わることッピネ！

ポケ○ンで乱数調整・色違い伝説とか聞いたことないッピか？

ユウキ

そんなディープな話題わかんないって・・・

オレまだ純粋な子供だよ？

ベースコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね！↓ -->
<script>



</script>
<!-- ここまで！ -->

</body>
</html>

うさタブ

このベースコードを元にプログラミングをしていくッピ！

うさタブ

さっそく<sprict></script>の間に

let saikoro = Math.floor( Math.random() * 6) +1;
	document.write(saikoro)

と記述するッピネ！

できたらファイルをダブルクリックして、ブラウザで確認するッピよ～

うさタブ

ページを起動したら、赤枠の中にある更新ボタンをクリックしてみるッピ。

ユウキ

赤枠の

かな？

うさタブ

そうっピ！
何回も更新してみるッピよ～！

ユウキ

スゲエエ　全部違う結果になった～！

ここまでのコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね！↓ -->
<script>

	let saikoro = Math.floor( Math.random() * 6) +1;
	document.write(saikoro);

</script>
<!-- ここまで！ -->

</body>
</html>

うさタブ

今回のコードを解説すると

let saikoro saikoro という変数を使います= Math.Floor小数点を切り捨てて整数にしてください　(Math.random() * 60~5の整数を作って下さい) +1　それに 1 をたしてください;

document.write書き出して(saikoro変数saikoro の中身を);

という意味ッピ！

ユウキ

なんで Math.Floor小数点を切り捨てる命令文をするんだよ？

うさタブ

それはッピネ～

この【Math.Floor小数点を切り捨てて】で小数点を切り捨てないと、ランダムで作った数字に小数点が加わってしまうッピ。

例えば、3.14159265358979…..みたいな感じッピ！

ユウキ

じゃあこの

Math.random() * 60~5 の乱数を作ってください +1;は？

なんで【＋１】でたさなきゃいけないの？

うさタブ

それはッピネ・・・

コンピュータの数字はすべて、[ 0 ] からはじまるからッピ！

『＋１』で『１』をたさないと、サイコロの目が【 0, 1, 2, 3, 4, 5 】になってしまうッピ！

ユウキ

あ～　リスト作ったときに確かに『 0 』からだった！

うさタブ

そこで１をたしてあげることで、

【 1, 2, 3, 4, 5, 6 】になるッピよ！

ユウキ

なるほどなぁ～！

ボタンを設置してみよう

うさタブ

毎回更新ボタンを押すのは、分かりにくいし面倒ッピネ～

ここはボタンを設置するッピ！

ユウキ

ボタン？

うさタブ

WEBサイトで見かけるこういうモノッピよ～

↑　押してみてね

ユウキ

あ～　これがボタンか～。よく見たことある！

うさタブ

ボタンを設置するのはHTMLのタグッピネ！

まずは最初のサンプル文をコピーするッピヨ～！

サンプルコード

<!-- 見えない部分 -->
<html>
<head>

</head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下に入力してね！↓ -->




<!-- ここまで！ -->
</body>
</html>

うさタブ

ボタンを設置するにはこのタグを使うッピよ～。

<button onclick="Saikoro();">　サイコロを振る　</button>
<p id="kekka"></p>

今回は<script></script>ではなく、その下・・・<body></body>の中にタグを書いていくッピネ！

うさタブ

これは

< button ボタンを設置してね　 onclickクリックしたら=”Saikoro();このプログラムを実行してね” /> 　サイコロを振る　</buttonボタンを終了してください！>

<p段落をつくってください id=”kekka“　この段落のID は kekka です> </p段落を終了してください>

という意味ッピ！　Saikoro();　の部分はまだ内緒ッピヨ～

ユウキ

この id = “kekka” って？

うさタブ

【 id 】・・・

これはHTMLのタグにつける、住所のようなモノッピね～

詳しくは、HTMLやCSSの解説ページで説明するッピ！

ここまでのコード

<!-- 見えない部分 -->
<html>
<head>

</head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下に入力してね！↓ -->

<button onclick="Saikoro();">　サイコロを振る　</button>
<p id="kekka"></p>

<!-- ここまで！ -->
</body>
</html>

ユウキ

なんか・・・押しても何も変わらないんだけど・・・？？

うさタブ

ふふふふ！　これからがプログラミングの真骨頂しんこっちょうッピ！

【関数】（命令文のグループ）を使って、ボタンを押したあとにプログラムを実行させることができるッピよ～！

うさタブ

今はまだ、ボタンを押したあとに呼び出すプログラムをセットしてないから動かないッピネ～

ユウキ

へ～！　なんかすごそうじゃん！

やってみようぜ！

うさタブ

それではさっそく

【関数】を使って、プログラムのセットを作ってみるッピよ～

うさタブ

今度は <head></head> の部分に注目するッピ！

ユウキ

ここがどうかしたのか？

うさタブ

本来、【JavaScript】のプログラムは、この<head></head>に書くのが普通ッピ！

今までは、わかりやすさを重視して、<body></body>に記述してたッピヨ！

うさタブ

これからのJavaScriptプログラムは、すべて<head></head>に記述していくッピ！

大事なことだから覚えておくでッピよ～！

ユウキ

オッケー！

うさタブ

前置きが長くなったッピネ・・・

では、この<head></head>の中に、ボタンを押したときに作動するプログラムを書いていくッピ！

<head>
<script>

function Saikoro() {

	let saikoro = Math.floor( Math.random() * 6) +1;
	document.getElementById("kekka").innerHTML = saikoro;
}

</script>
</head>

と記述していくッピ！

うさタブ

これは

functionプログラムセット　 Saikorosaikoroを作ります { 命令文をここに書く ;}

という意味で、これこそがズバリ【関数】ッピネ！

うさタブ

次のコードはHTMLの書き換え…

document.書き出してください getElement指定する場所はById(“kekka“id=”kekka”です)

.innerHTML HTMLに書いてください = saikoro変数 saicoro の数字を;

という感じッピネ！

ユウキ

なるほどなー

<!-- 見えない部分 -->
<html>
<head>
<script>

function Saikoro() {

	let saikoro = Math.floor( Math.random() * 6) +1;
	document.getElementById("kekka").innerHTML = saikoro;
}

</script>
</head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね！↓ -->

<button onclick="Saikoro();">　サイコロを振る　</button>
<p id="kekka"></p>

<!-- ここまで！ -->

</body>
</html>

ユウキ

スゲエエエ！　できたああ！

うさタブ

サンプルとして、ここまでで作ったサイコロのボタンを置いとくッピネ！

押すたびに結果が変わるッピよ～！

サイコロに画像をつけよう

うさタブ

ムフフ、まだまだ終わらないッピよ～！

次はこのサイコロに画像をつけるッピ。

サイコロ画像を用意しよう

うさタブ

サイコロの画像を用意したッピよ！

上の画像を右クリックで、名前をつけて保存するッピ！

うさタブ

画像の名前はさいの目ごとに

【 1.jpg / 2.jpg / 3.jpg / 4.jpg / 5.jpg/ 6.jpg 】にするッピ！

HTMLファイルと同じ場所に保存するッピよ～！

ユウキ

こんな感じかな

うさタブ

いい感じッピ！

ではさっそくサイコロゲームに画像をつけるッピよ～！

うさタブ

関数 function Saikoro( ) { ;} の中に、下のコードを書くッピ。

document.getElementById("sainome").src= saikoro + ".jpg";

これは、

document動作してください.getElementこれから指定するByIdid= (“sainome“sainome”という場所で“) 　.src画像を表示して = saikoro 変数 saikoro の数字を +“.jpg“ jpg ファイルで;

という意味ッピね～！

ここまでのコード

<head>
<script>
function Saikoro() {

	let saikoro = Math.floor( Math.random() * 6) +1;
	document.getElementById("kekka").innerHTML = saikoro;
        document.getElementById("sainome").src= saikoro + ".jpg";

}
</script>
</head>

うさタブ

画像は<body></body>の間に

<p><img id="sainome" src="1.jpg" width="50" height="50" /></p>

と記述して表示するッピ！

うさタブ

これは

<p>段落を作って　<img画像を表示 id =”sainome”　id(住所)は sainome です　 src=”1.jpg”表示するファイルは 1.jpg です width =”50″ 　横の長さは 50 です height=”50″タテの長さは50です /></p>段落を終了してください

という意味ッピヨ～！

全体のコードの確認

<!-- 見えない部分 -->
<html>
<head>
<script>

function Saikoro() {

	let saikoro = Math.floor( Math.random() * 6) +1;
	document.getElementById("kekka").innerHTML = saikoro;
        document.getElementById("sainome").src= saikoro + ".jpg";

}

</script>
</head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね！↓ -->

<p><img id="sainome" src="1.jpg" width="50" height="50"></p>
<p><button onclick="Saikoro();">　サイコロを振る　</button></p>
<p id="kekka"></p>

<!-- ここまで！ -->

</body>
</html>

完成品のサイコロゲーム

うさタブ

完成品はこんな感じッピ！　みんな上手くできたッピか？

学習のまとめ

Math.random( )で乱数をつくり、Math.floor( )で小数点を切り捨てる
<input type=”button”>タグでボタンを設置できる
関数を作り、ボタンの onclick を使うことで、ボタンを押してJavaScriptプログラムを動作させることができる
document.getElementById( “id名” ).innerHTML =で、 id で指定した場所の、文字を書き換えたりタグを書き換えたりできる
document.getElementById( “id名” ).src =で、 id で指定した場所の、画像を差し替えることができる