JavaScript入門講座|サイコロゲームを作ってみよう

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

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

うさタブ
うさタブ

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

ユウキ
ユウキ

サイコロゲーム

うさタブ
うさタブ

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

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

うさタブ
うさタブ

今回は、JavaScript乱数

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

楽しみにしているッピ!

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


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

function Saikoro() {

	let saikoro = Math.floor( Math.random() * 6) +1;//ランダムで1~6の数字を作ります
	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;は?

なんで【+1】でたさなきゃいけないの?

うさタブ
うさタブ

それはッピネ・・・

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

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

ユウキ
ユウキ

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

うさタブ
うさタブ

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

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タグにつける、住所のようなモノッピね~

詳しくは、HTMLCSSの解説ページで説明するッピ!

ここまでのコード
<!-- 見えない部分 -->
<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(“kekkaid=”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 で指定した場所の、画像を差し替えることができる


スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

実際の教室で自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えておサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんな、キュレオプログラミング教室を受けて
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

JavaScriptJSゲームプログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました