JavaScript入門講座|おみくじを作ってみよう

JavaScript
この記事で学べること
  • おみくじリストを作る
  • 乱数を作り、おみくじの目を出す結果を毎回変化させる
  • ボタンを設置する
  • 関数(プログラムのセット)を使って呼び出す
スポンサーリンク
スポンサーリンク

JavaScriptでおみくじを作ってみよう

うさタブ
うさタブ

今回は簡単な【おみくじ】を作ってみるッピよ~

ユウキ
ユウキ

おみくじ

うさタブ
うさタブ

神社で引く吉凶きっきょうをうらなうゲームッピ!

それをJavaScriptで作るッピ~

うさタブ
うさタブ

今回は、JavaScript乱数

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

楽しみにしているッピ!

おみくじのプログラムコードと解説

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>

<body>
<script>

function Omikuji() {

	let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];
	let r = Math.floor( Math.random() * omikuji.length) ;//おみくじぶんの数字を作ります
	document.getElementById("kekka").innerHTML = omikuji[r];//結果をid="kekka"に表示します
}

</script>

<button onclick="Omikuji();"> おみくじを引く </button>
<p id="kekka"></p>

</body>
</html>
うさタブ
うさタブ

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

サンプルコード

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

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



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

</body>
</html>
うさタブ
うさタブ

今回はこのコードを元にプログラムをつくってみるッピ!

おみくじリストをつくる

うさタブ
うさタブ

まずはおみくじリストをつくってみるッピ!

うさタブ
うさタブ

リスト配列は

let リスト名 = [“なかみ1”,”なかみ2”,];

でつくることができるッピ!

うさタブ
うさタブ
let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];

今回はこんな風におみくじリストをつくってみるッピよ~

ここまでのコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

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

let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];

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

</body>
</html>

乱数を作ってみよう

うさタブ
うさタブ

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

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

ユウキ
ユウキ

乱数~? ってなんだっけ・・・

うさタブ
うさタブ

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

おみくじやサイコロ、いろいろなゲームに使われてるものッピ!

ユウキ
ユウキ

へ~面白そう! さっそくやってみようぜ

うさタブ
うさタブ

<sprict></script>の間に

	let r = Math.floor( Math.random() * omikuji.length) ;
	document.write(omikuji[r]);

と記述するッピネ!

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

うさタブ
うさタブ

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

ユウキ
ユウキ

赤枠の

更新ボタン

かな?

うさタブ
うさタブ

そうっピ!
何回も更新してみるッピよ~!

ユウキ
ユウキ

スゲエエ 全部違う結果になった~!

確認コード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->
<script>
	let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];
	let r = Math.floor( Math.random() * omikuji.length);
	document.write(omikuji[r]);
</script>
<!-- ここまで! -->

</body>
</html>
うさタブ
うさタブ

解説すると

let変数 omikuji omikujiを作ります= [ 中身は“大吉”,”吉”,”中吉”,”小吉”,”末吉”,”凶”,”大凶”];
です

let r変数rをつくって = Math.floor小数点を切り捨て整数へ ( Math.random()ランダムで数字をつくってください * omikuji.length);0からおみくじ分の数字を

document.write書き出してください(omikuji[r]おみくじをランダムで選んだものを);

という意味ッピ!

ユウキ
ユウキ

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

うさタブ
うさタブ

それはッピネ~

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

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

ユウキ
ユウキ

じゃあこの

Math.random() 乱数で選んだ* omikuji.lengthおみくじ分の数字の中の1つ

は? なんで omikuji.おみくじの中の数字のlengthひとつ なの?

うさタブ
うさタブ

この .length は、

文字列だったら文字数を、

数字の場合はケタ数を、

リストだったらリストの中身の個数調べる命令文ってことッピ!

うさタブ
うさタブ

だから omikuji.length

おみくじの中の単語数・・・

let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];

つまりリストの中身の個数・・・7つの数分を表しているッピ!

omikuji.length = 7 という意味ッピよ~

うさタブ
うさタブ

だから

<script>
	let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];
	let r = Math.floor( Math.random() * 7);
	document.write(omikuji[r]);
</script>

直接数字を入れることでもプログラムを動かすことができるッピ~!

ユウキ
ユウキ

なるほどなぁ~!

ボタンを設置してみよう

うさタブ
うさタブ

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

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

ユウキ
ユウキ

ボタン?

うさタブ
うさタブ

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

↑ 押してみてね

ユウキ
ユウキ

あ~ これがボタンか~。よく見たことある!

うさタブ
うさタブ

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

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

サンプルコード
<!-- 見えない部分 -->
<html>
<head>

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




<!-- ここまで! -->
</body>
</html>
うさタブ
うさタブ

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

<button onclick="Omikuji();"> おみくじを引く </button>
<p id="kekka"></p>

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

うさタブ
うさタブ

これは

< button ボタンを設置してね  onclickクリックしたら=”Omikuji ();このプログラムを実行してね” />   おみくじを引く </button>ボタンを終了してください!

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

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

ユウキ
ユウキ

この id = “kekka” って?

うさタブ
うさタブ

id 】・・・

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

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

確認コード
<!-- 見えない部分 -->
<html>
<head>

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

<button onclick="Omikuji();"> おみくじを引く </button>
<p id="kekka"></p>

<!-- ここまで! -->
</body>
</html>
ユウキ
ユウキ

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

うさタブ
うさタブ

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

関数命令文のグループ)を使って、ボタンを押したあとプログラムを実行させることができるッピよ~!

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

ユウキ
ユウキ

へ~! なんかすごそうじゃん!

やってみようぜ!

うさタブ
うさタブ

それではさっそく

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

うさタブ
うさタブ

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

<head>
<script>

function Omikuji() {

	let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];
	let r = Math.floor( Math.random() * omikuji.length) ;
	document.getElementById("kekka").innerHTML = omikuji[r];//結果をid="kekka"に表示します
}

</script>
</head>

と記述していくッピ!

うさタブ
うさタブ

これは

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

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

うさタブ
うさタブ

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

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

.innerHTML HTMLに書いてください = omikuji[r]omikuji を乱数で選んだ結果を;

という感じッピネ!

ユウキ
ユウキ

なるほどなー

ユウキ
ユウキ

スゲエエエ! できたああ!

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>

<body>
<script>

function Omikuji() {

	let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];
	let r = Math.floor( Math.random() * omikuji.length) ;//おみくじぶんの数字を作ります
	document.getElementById("kekka").innerHTML = omikuji[r];//結果をid="kekka"に表示します
}

</script>

<button onclick="Omikuji();"> おみくじを引く </button>
<p id="kekka"></p>

</body>
</html>

完成品のおみくじサンプル

うさタブ
うさタブ

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

全体のコードの確認

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>

<body>
<script>

function Omikuji() {

	let omikuji = ["大吉","吉","中吉","小吉","末吉","凶","大凶"];
	let r = Math.floor( Math.random() * omikuji.length) ;//おみくじぶんの数字を作ります
	document.getElementById("kekka").innerHTML = omikuji[r];//結果をid="kekka"に表示します
}

</script>

<button onclick="Omikuji();"> おみくじを引く </button>
<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 で指定した場所の、画像を差し替えることができる


スポンサーリンク

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

ユウキ
ユウキ

うさタブ!

オレ、もっと本格的にゲームが作りたいんだ

アイカ
アイカ

私もだわ!

もっとたくさん実用的なコードを

学ぶことってできないかしら?

うさタブ
うさタブ

おお、2人ともやる気ッピね!

ゲームの作り方を学ぶなら、コレとかどうッピか?


うさタブ
うさタブ
Udemy」テレビでも有名な動画教材
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

2DアクションRPG脱出ゲーム

3Dゲーム制作講座まで

買い切り講座だからいつでも勉強し放題ッピよ~!

ユウキ
ユウキ

お!いいじゃん!

アイカ
アイカ

あと、どこか素敵な素材を売っているところはないかしら? 公式の素材販売だと、クレカ支払いしかなくて・・・

ユウキ
ユウキ

小学生じゃクレカで支払えないぜ~

うさタブ
うさタブ

ゲームの素材を買いたいなら、

DLsiteBoothとかどうッピか?

うさタブ
うさタブ

素敵なドット絵や音楽素材がいっぱい売ってるッピ!

うさタブ
うさタブ

しかもUnityアセットストアと違って

クレカ支払いじゃなく、コンビニ支払いができるのもポイントッピ!

ユウキ
ユウキ

すげーカッコいい素材がいっぱいある!

アイカ
アイカ

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

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