数当てゲーム

1 から 100 までの数字を当ててください！

この「数当てゲーム」は、1 から 100 までの数字をランダムに生成し、プレイヤーがその数字を当てるゲームです。プレイヤーは、入力フォームに数字を入力して「チェック！」ボタンをクリックし、正解かどうかを判定します。正解の場合は答えとともに「正解！！」と表示され、それ以外の場合は「もっと大きい数字です！」または「もっと小さい数字です！」と表示されます。正解以外の場合は何度でもチャレンジができます。スマホでも遊べるように、フォントサイズやボタンサイズを調整しました。絵文字を使用することはできませんでしたが、簡単な JavaScript ゲームを作成できました。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

「数当てゲーム」を作成しました。以下が実際のプログラムです。

<!DOCTYPE html>
<html>
<head>
	<title>数当てゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	body {
		text-align: center;
		font-size: 2rem;
		background-color: #e6e6fa;
		padding: 2rem;
	}
	button {
		font-size: 1.5rem;
		padding: 1rem;
		margin: 1rem;
		background-color: #9acd32;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}
	input {
		font-size: 1.5rem;
		padding: 1rem;
		margin: 1rem;
		border-radius: 5px;
		border: none;
	}
	</style>
</head>
<body>
	<h1>数当てゲーム</h1>
	<p>1 から 100 までの数字を当ててください！</p>
	<input type="number" id="input">
	<br>
	<button onclick="check()">チェック！</button>
	<br>
	<p id="result"></p>
	<script>
		let answer = Math.floor(Math.random() * 100) + 1; // 1 から 100 までの乱数を生成
		
		function check() {
			let input = document.getElementById("input").value; // 入力値を取得
			if (input == "") {
				document.getElementById("result").innerHTML = "何か入力してください！";
			} else if (input < answer) {
				document.getElementById("result").innerHTML = "もっと大きい数字です！";
			} else if (input > answer) {
				document.getElementById("result").innerHTML = "もっと小さい数字です！";
			} else {
				document.getElementById("result").innerHTML = `正解！！答えは ${answer} でした！`;
				document.getElementById("input").disabled = true; // 入力フォームを無効化
				document.getElementById("check").disabled = true; // チェックボタンを無効化
			}
		}
	</script>
</body>
</html>