JavaScriptゲーム入門｜ハイ＆ローを作ろう【プログラミング】

うさタブ

今回は ハイ＆ロー ゲームを作るッピ！

ユウキ

ハイ＆ロー？？　なにそれ

うさタブ

・・・・！？

ユウキくんはハイ＆ローを知らないッピか・・・純粋な子ッピね・・・。

ハイ＆ローは、ゲームセンターのメダルゲーム等で、

場にあるトランプカードが、次にめくるカードより大きいか小さいかを当てるゲームッピ！

ユウキ

へ～　面白そうじゃん！　さっそくやっていこうぜ

サンプルゲーム

＊

場にあるカードは１

次のカードは場にあるカードより高いか低いか考えてみよう！

うさタブ

サンプルゲームを置いとくッピ！

どんなものか試して遊んでみるッピよ～！！

この記事で学べること

変数の配列（リスト）の作り方
プログラムのセットの作り方（関数）
プログラムを動かすボタンの設置
数字の高低差 / 勝ち負けの判定（条件分岐）
JavaScriptによる画像の差し替え

ハイ＆ローゲームの全体コード

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

	let card = 1;// 場にあるトランプのカード番号

	let Hi_L = 0;// Low(0) と High(1) どっちを選んだか仮の数字（実際にはクリックで決める）
	let Result = "●●を選んで、あなたの●●";//勝ち負けの結果


function High_Low(Hi_L) {

        document.getElementById("Card_img_Before").src="s_" + card + ".jpg";

	let trump = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,]; // ハイアンドローをするカード番号
	let trump_n = Math.floor( Math.random() * 13) +1 ;// ランダムで数字を決める


	if (card < trump[trump_n]) {//賭けカードが、伏せカードより大きい場合
		if (Hi_L === 0){ Result = "　LOWを選んで、あなたの<span style='background:blue;'>『 負け 』</span>";}
		if (Hi_L === 1){ Result = "　HIGHを選んで、あなたの<span style='background:red;'>【 勝ち 】</span>";}
	}

	else if (card > trump[trump_n]) {//賭けカードが、伏せカードより小さい場合
		if (Hi_L === 0){ Result = "　LOWを選んで、あなたの<span style='background:red;'>【 勝ち 】</span>";}
		if (Hi_L === 1){ Result = "　HIGHを選んで、あなたの<span style='background:blue;'>『 負け 』</span>";}
	}

	else {Result = "引き分け！！";}

        document.getElementById("Card_img_After").src="s_" + trump_n + ".jpg";

	document.getElementById("After").innerHTML ="伏せカードは" + trump[trump_n] + Result + "<br />次のカードが今の数字より高いか低いか考えてみよう！";
	document.getElementById("Before").innerHTML ="場にあるカードは" + card ;

	card = trump[trump_n];//場にあるカードを新しく引いたカードに変える

}

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

	<img id="Card_img_Before" src="s_1.jpg" width="100" height="150" align="left">
	＊
	<img id="Card_img_After" src="s_0.jpg" width="100" height="150">

	<p id="Before">場にあるカードは１</p>
	<p id="After">次のカードは場にあるカードより高いか低いか考えてみよう！</p>

	<input type="button" value="High" onclick="High_Low(1);"/>
	<input type="button" value="Low" onclick="High_Low(0);"/>


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

</body>
</html>

うさタブ

このプログラムをひとつひとつ、わかりやすく解説しながら作っていくッピ！

楽しみにしてるッピヨ～！

ハイ＆ローゲームの全体コード

HIGH & LOW ゲームを作ろう

HIGH & LOW ゲームを作ろう

ユウキ

どんなゲームかだいたいわかったよ！

あれが作れるなんてワクワクするな～

うさタブ

むふふふ、ユウキくんも２時間もあればアレを作れるッピよ～！

今までの経験や知識をフル活用してチャレンジするッピ！

うさタブ

下のサンプルコードをベースに学んでいくッピ！

今日も一緒に頑張るッピよ～

<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下に入力してね！↓ -->

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


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

トランプに必要な数字と乱数を作ろう

うさタブ

それではまず、トランプに必要な数字のリストを作るッピ！

これを<head></head>の中に入れるッピよ～

<script>
	let trump = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,];
	let trump_n = Math.floor( Math.random() * 13) +1 ;
</script>

うさタブ

これは

let trumpトランプという名前の変数リストに = [0,1,2,3,4,5,….13,0~13までの数字を入れています];

let trump_ntrump_nという変数を作ります = Math.floor　小数点を切り捨て( Math.random() *13　0~12のランダムな数字を作って下さい) +1　それに+1をして下さい ;

という意味ッピ！

ユウキ

コンピュータの数字は、 [ 1 ] はじまりじゃなく、[ 0 ] はじまりなんだよな！

うさタブ

そうッピ！

だから『Math.random() *13 』（13個の乱数を作って）という命令文なのに、0~12 の数字ができてしまうッピ！

それをわかりやすくするために、最後に【 +1 】をするッピよ～！

プログラムのセット【関数】を作ろう

うさタブ

次はプログラムの命令文セット、【関数】を作るッピ！

ユウキ

もう何回もやってるからバッチリだぜ！

ユウキ

Function 関数名 ( ) {命令文;} で、

好きなときにプログラムのセットを呼び出せるんだよな！

うさタブ

そのとおりッピ！

ユウキくん、だんだんプログラマーに近づいてきたでッピヨ～

うさタブ

一気に作るのではなく、少しずつ動作を確認しながら積み上げていくッピ！

まずは、さっき作ったランダム数字のトランプカードを文字表示してみるッピよ～

<head>
<script>
function High_Low(Hi_L) {
	let trump = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,];
	let trump_n = Math.floor( Math.random() * 13) +1 ;
	document.getElementById("Before").innerHTML ="場にあるカードは" + trump[trump_n] ;
}
</script>
</head>

うさタブ

上のスプリクトを、<head></head>に、

下のスプリクトを<body></body>内に入れるッピ！

JavaScript入門講座｜命令文のセット【関数】ついて学ぼう

JavaScript入門｜命令文のセット【関数】ついて学ぼう｜会話形式で楽しく学べる｜関数functionについて学ぼう

<body>
<p id="Before">場にあるカードは１</p>
</body>

ユウキ

これで合ってる？

うさタブ

いい感じッピネ！

次はこのプログラムを呼び出すボタンを作ってテストしてみるッピ！

プログラムを呼び出すボタンを設置しよう

<input type="button" value="プログラムを呼び出す" onClick="High_Low();">

うさタブ

上のHTMLコード（タグ）を<body></body>に入れるッピ！

<input type=”button”ボタンを設置します value　ボタンの名前は=”プログラムを呼び出す” onClick呼び出すプログラムは=”High_Low();”>　

という意味になるッピね～

うさタブ

ちなみに

<button onClick=”High_Low();”> プログラムを呼び出す </button>

でもOKっピ！　コチラのほうが新しい記述方式ッピね～！

プログラミングも日々やり方が進化してるッピよ～

<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下に入力してね！↓ -->
<script>
function High_Low(Hi_L) {
	let trump = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,]; // ハイアンドローをするカード番号
	let trump_n = Math.floor( Math.random() * 13) +1 ;// ランダムで数字を決める
	document.getElementById("Before").innerHTML ="場にあるカードは" + trump[trump_n] ;
}
</script>
</head>

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

<p id="Before">場にあるカードは１</p>
<input type="button" value="プログラムを呼び出す" onClick="High_Low();">

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

うさタブ

ボタンをクリックして、数字が変わるか試してみるッピよ～

ユウキ

できてるできてる！

賭けのカードと伏せカード、２枚のカードを作ろう

うさタブ

HIGH & LOW は

賭けカードが、次にめくる伏せカードより、数字が大きいか小さいかを当てるゲームッピ！

つまりは賭けカードと伏せカード、2枚のカードを作らなきゃいけないッピネ～～！

	let card = 1;

うさタブ

２枚めのカードのプログラムはこんな感じッピ！

let cardcard という変数を使います = 1; 中身は 1 です

という意味ッピネ。

これを<script></script>の中の、最初に記述するッピ！

ユウキ

ずいぶん短いコードだな～

２枚めのカードは【 1~13 】まで作らないのか？？

うさタブ

HIGH & LOW は、

今伏せているカードが、次の賭けカードにもなるゆえ・・・

勝敗が決まったあと、賭けカードの数字をコピーすれば良いッピよ～

ユウキ

うーん、よくわからん・・・

うさタブ

考えるな・感じろッピ！！！！！！！

難しいことは考えなくて良いッピヨ～

プログラミングなんてやってればカラダが自然に覚えるッピネ！！

ユウキ

なんか雑だなあ・・・

うさタブ

ついでにバグ防止に、他の変数も初期化しておくッピ！

記述するコードはこんな感じッピよ～

<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下に入力してね！↓ -->
<script>

	let card = 1;// 場にあるトランプのカード初期化番号

	let Hi_L = 0;// Low(0) と High(1) どっちを選んだか仮の数字（実際にはクリックで決める）
	let Result = "●●を選んで、あなたの●●";//勝ち負けの結果の初期値

function High_Low(Hi_L) {
	let trump = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,]; // ハイアンドローをするカード番号
	let trump_n = Math.floor( Math.random() * 13) +1 ;// ランダムで数字を決める
	document.getElementById("Before").innerHTML ="場にあるカードは" + trump[trump_n] ;
}

</script>
</head>

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

<p id="Before">場にあるカードは１</p>
<input type="button" value="プログラムを呼び出す" onClick="High_Low();">

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

HIGH & LOW の勝敗の判定機を作ろう

うさタブ

次は勝ち負けの判定機を作るッピ！

if文とelse文を駆使して、場のカードが伏せカードより数字が高いか低いかを判別し、さらに予想が合っているか外れているかを判定するッピネ！

うさタブ

ついでに HIGH ボタンと LOW ボタンも設置するッピよ～～！

<head>
<script>

	let card = 1;// 場にあるトランプのカード番号

	let Hi_L = 0;// Low(0) と High(1) どっちを選んだか仮の数字（実際にはクリックで決める）
	let Result = "●●を選んで、あなたの●●";//勝ち負けの結果


function High_Low(Hi_L) {

	let trump = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,]; // ハイアンドローをするカード番号
	let trump_n = Math.floor( Math.random() * 13) +1 ;// ランダムで数字を決める

/* 追加した判定のプログラム */
	if (card < trump[trump_n]) {//賭けカードが、伏せカードより大きい場合
		if (Hi_L === 0){ Result = "　LOWを選んで、あなたの『 負け 』";}
		if (Hi_L === 1){ Result = "　HIGHを選んで、あなたの【 勝ち 】";}
	}

	else if (card > trump[trump_n]) {//賭けカードが、伏せカードより小さい場合
		if (Hi_L === 0){ Result = "　LOWを選んで、あなたの【 勝ち 】";}
		if (Hi_L === 1){ Result = "　HIGHを選んで、あなたの『 負け 』";}
	}

	else {Result = "引き分け！！";}

	document.getElementById("After").innerHTML ="伏せカードは" + trump[trump_n] + Result + "<br />次のカードが今の数字より高いか低いか考えてみよう！";
	document.getElementById("Before").innerHTML ="場にあるカードは" + card ;

	card = trump[trump_n];//場にあるカードを新しく引いたカードに変える

}

</script>
</head>

<body>
	<p id="Before">場にあるカードは１</p>
	<p id="After">次のカードは場にあるカードより高いか低いか考えてみよう！</p>

	<input type="button" value="High" onclick="High_Low(1);"/>
	<input type="button" value="Low" onclick="High_Low(0);"/>
</body>

ユウキ

おおおおおっ！　できてるじゃーん！！

うさタブ

今回追加したしたプログラムについて解説していくッピネ！

２つのカードの説明

うさタブ

まずは今の場にどんなカードが置いているかを表示する命令文ッピ！

document.プログラムを動かしてgetElement場所はById(“Before“)id=”Before”.innerHTMLの中のHTMLを書き換えて = “場にあるカードは” + card;

うさタブ

次は、伏せカードを表示するプログラムッピよ～！

document.プログラムを動かしてgetElementByIdid=”After” という場所で以下のように(“After“).innerHTMLHTMLを書き換えて下さい = “伏せカードは” + trumptrump という変数の[trump_n　1~13 のランダムな数字を表示] + Result 勝負の結果を表示+ “<br改行 />次のカードが今の数字より高いか低いか考えてみよう！“;

うさタブ

card賭けカード（場のカード）を = trump[trump_n] 伏せカードの数字にコピーする;

という感じッピ！

ユウキ

プログラミングって本当にイロイロあってややこしいなあ～

うさタブ

まだまだ終わらないッピよ～

次は判定機の解説ッピ！

判定機の解説

うさタブ

ifもしも (card < trump[trump_m]伏せカード(trump)が賭けカード(card)よりも大きい場合) {

if 　(Hi_L === 0プレイヤーは伏せカードが【小さい】と答えたので) {Result結果を表示する変数 Result は = “　LOWを選んで、あなたの負け” ;}

if (Hi_L === 1)プレイヤーは伏せカードが【大きい】と答えたので {Result 結果を表示する変数 Result は= “　HIGHを選んで、あなたの勝ち” ;}

}

うさタブ

else ifもしも上の条件以外で　 (card > trump[trump_n伏せカード(trump)が賭けカード(card)よりも小さい場合 ]) {

if ( Hi_L === 0プレイヤーは伏せカードが【小さい】と答えたので ) { Result = “　LOWを選んで、あなたの【勝ち】”;}

if ( Hi_L === 1プレイヤーは伏せカードが【大きい】と答えたので){ Result = “　HIGHを選んで、あなたの『負け』”;}

}

うさタブ

elseそれ以外はすべて { Result = “引き分け！！”;}}

という意味ッピ！

ユウキ

前回のジャンケンより簡単だな！

JavaScript入門講座｜プログラムの分かれ道　～if文・条件分岐について学ぼう～

JavaScript入門｜if文・条件分岐について学ぼう｜会話形式で楽しく学べる｜if文（プログラムの分かれ道）｜else文（条件外の設定）

ボタンと呼び出すプログラムの解説

うさタブ

ボタンについては、さっきも説明したッピが・・・

<input type="button" value="High" onclick="High_Low(1);"/>
<input type="button" value="Low" onclick="High_Low(0);"/>

先程と違うのは　onClick = “High_Low( 0 );” と onClick = “High_Low( 1 );” の部分ッピ！

0 ＝ LOW　1 = HIGH　として、どっちのボタンを選んだかで関数Function High_Low() の動作、Result の結果を変えたッピ！

ユウキ

この High_Low( 0 や 1 ) のことを【引数】って言うんだよな～！

引数で結果を変えられるって便利だよな～

ハイ＆ローゲームに画像をつけてみよう！

うさタブ

次はゲームにイラストをつけてみるッピ！

まずは画像を用意するッピヨ～！

画像を用意しよう

うさタブ

保存した画像ファイルを、下の画像のように、作ったゲームHTMLファイルと同じ場所に置くッピ！

うさタブ

準備ができたら、

画像を追加するコードを書いていくッピ！

<head>
<script>


	let card = 1;// 場にあるトランプのカード番号

	let Hi_L = 0;// Low(0) と High(1) どっちを選んだか仮の数字（実際にはクリックで決める）
	let Result = "●●を選んで、あなたの●●";//勝ち負けの結果


function High_Low(Hi_L) {

        document.getElementById("Card_img_Before").src="s_" + card + ".jpg";

	let trump = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,]; // ハイアンドローをするカード番号
	let trump_n = Math.floor( Math.random() * 13) +1 ;// ランダムで数字を決める


	if (card < trump[trump_n]) {//賭けカードが、伏せカードより大きい場合
		if (Hi_L === 0){ Result = "　LOWを選んで、あなたの『 負け 』";}
		if (Hi_L === 1){ Result = "　HIGHを選んで、あなたの【 勝ち 】";}
	}

	else if (card > trump[trump_n]) {//賭けカードが、伏せカードより小さい場合
		if (Hi_L === 0){ Result = "　LOWを選んで、あなたの【 勝ち 】";}
		if (Hi_L === 1){ Result = "　HIGHを選んで、あなたの『 負け 』";}
	}

	else {Result = "引き分け！！";}

        document.getElementById("Card_img_After").src="s_" + trump_n + ".jpg";

	document.getElementById("After").innerHTML ="伏せカードは" + trump[trump_n] + Result + "<br />次のカードが今の数字より高いか低いか考えてみよう！";
	document.getElementById("Before").innerHTML ="場にあるカードは" + card ;

	card = trump[trump_n];//場にあるカードを新しく引いたカードに変える

}

</script>
</head>

<body>

	<img id="Card_img_Before" src="s_1.jpg" width="100" height="150" align="left">
	＊
	<img id="Card_img_After" src="s_0.jpg" width="100" height="150">

	<p id="Before">場にあるカードは１</p>
	<p id="After">次のカードは場にあるカードより高いか低いか考えてみよう！</p>

	<input type="button" value="High" onclick="High_Low(1);"/>
	<input type="button" value="Low" onclick="High_Low(0);"/>

</body>

うさタブ

<head></head>–<body></body> に、上のコードを書くがッピ！

これでゲームの完成ッピヨ～

ユウキ

できた～～！！

画像を差し替えるプログラムの解説

うさタブ

関数の最初にあるものは

document.プログラムを動かしてgetElementById場所は(“Card_img_Before“).src=画像を入れ替えて“s_”+card変数card の中身の数字+”.jpg”;　という意味ッピネ

うさタブ

else の後にあるものは

documentプログラムを動作して.getElementById(“Card_img_After“).id = “Card_img_After” という場所src=”s_”+の画像を差し替えてくださいtrump_n変数trump_nの中身の数字+”.jpg”;　という意味ッピヨ～

ユウキ

<body></body>内の画像表示タグはオレにもわかるよ！

<img画像を表示 src表示するファイル名は=”s_1.jpg” idid (HTMLの住所)は=”Card_img_Before“ />

<img画像を表示 src表示するファイル名は=”s_0.jpg” idid (HTMLの住所)は=”Card_img_After“ />

って意味だな！？

うさタブ

そのとおりッピ！　ユウキくんの成長を感じるッピ！

うさタブ

あとは<span>タグで【勝ち】と『負け』にわかりやすく背景色をつけるッピ！

判定機のプログラムを

	if (card < trump[trump_n]) {//賭けカードが、伏せカードより大きい場合
		if (Hi_L === 0){ Result = "　LOWを選んで、あなたの<span style='background:blue;'>『 負け 』</span>";}
		if (Hi_L === 1){ Result = "　HIGHを選んで、あなたの<span style='background:red;'>【 勝ち 】</span>";}
	}

	else if (card > trump[trump_n]) {//賭けカードが、伏せカードより小さい場合
		if (Hi_L === 0){ Result = "　LOWを選んで、あなたの<span style='background:red;'>【 勝ち 】</span>";}
		if (Hi_L === 1){ Result = "　HIGHを選んで、あなたの<span style='background:blue;'>『 負け 』</span>";}
	}

	else {Result = "引き分け！！";}

に書き換えるッピよ～

うさタブ

変更した部分は勝ち負けの部分ッピ！

<spanここの文字を装飾します style=”background:red;背景を【赤】にしてください“>【勝ち】</span>装飾を終わります
<spanここの文字を装飾します style=“background:blue;”背景を『青』にしてください>『負け』</span> 装飾を終わります

っていう意味ッピよ～！

全体のコードの確認

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

	let card = 1;// 場にあるトランプのカード番号

	let Hi_L = 0;// Low(0) と High(1) どっちを選んだか仮の数字（実際にはクリックで決める）
	let Result = "●●を選んで、あなたの●●";//勝ち負けの結果


function High_Low(Hi_L) {

        document.getElementById("Card_img_Before").src="s_" + card + ".jpg";

	let trump = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,]; // ハイアンドローをするカード番号
	let trump_n = Math.floor( Math.random() * 13) +1 ;// ランダムで数字を決める


	if (card < trump[trump_n]) {//賭けカードが、伏せカードより大きい場合
		if (Hi_L === 0){ Result = "　LOWを選んで、あなたの<span style='background:blue;'>『 負け 』</span>";}
		if (Hi_L === 1){ Result = "　HIGHを選んで、あなたの<span style='background:red;'>【 勝ち 】</span>";}
	}

	else if (card > trump[trump_n]) {//賭けカードが、伏せカードより小さい場合
		if (Hi_L === 0){ Result = "　LOWを選んで、あなたの<span style='background:red;'>【 勝ち 】</span>";}
		if (Hi_L === 1){ Result = "　HIGHを選んで、あなたの<span style='background:blue;'>『 負け 』</span>";}
	}

	else {Result = "引き分け！！";}

        document.getElementById("Card_img_After").src="s_" + trump_n + ".jpg";

	document.getElementById("After").innerHTML ="伏せカードは" + trump[trump_n] + Result + "<br />次のカードが今の数字より高いか低いか考えてみよう！";
	document.getElementById("Before").innerHTML ="場にあるカードは" + card ;

	card = trump[trump_n];//場にあるカードを新しく引いたカードに変える

}

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

	<img id="Card_img_Before" src="s_1.jpg" width="100" height="150" align="left">
	＊
	<img id="Card_img_After" src="s_0.jpg" width="100" height="150">

	<p id="Before">場にあるカードは１</p>
	<p id="After">次のカードは場にあるカードより高いか低いか考えてみよう！</p>

	<input type="button" value="High" onclick="High_Low(1);"/>
	<input type="button" value="Low" onclick="High_Low(0);"/>


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

</body>
</html>

学習のまとめ