数当てゲーム

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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>
		h1 {
			text-align: center;
		}
		form {
			margin: 0 auto;
			text-align: center;
		}
		input[type="number"] {
			width: 60%;
			margin-bottom: 10px;
			padding: 5px;
			border-radius: 5px;
			border: 1px solid gray;
		}
		button[type="submit"] {
			background-color: lightblue;
			color: white;
			padding: 10px 20px;
			border-radius: 5px;
			border: none;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>数当てゲーム</h1>
	<form onsubmit="return guessNumber()">
		<p>1~100の間の数を当ててください。</p>
		<input type="number" id="guess">
		<button type="submit">答えを確認する</button>
	</form>
	<script>
		var answer = Math.floor(Math.random() * 100) + 1;
		var attempts = 0;
		var maxAttempts = 10;
		
		function guessNumber() {
			var guess = document.getElementById("guess").value;
			if (guess == answer) {
				alert("正解です！" + attempts + "回目で当てました。");
				return false;
			}
			else if (guess > answer) {
				attempts++;
				if (attempts >= maxAttempts) {
					alert("残念！答えは" + answer + "でした。");
					return false;
				}
				else {
					alert("もっと小さいです。");
					return false;
				}
			}
			else {
				attempts++;
				if (attempts >= maxAttempts) {
					alert("残念！答えは" + answer + "でした。");
					return false;
				}
				else {
					alert("もっと大きいです。");
					return false;
				}
			}
		}
	</script>
</body>
</html>

※注意点：絵文字の使用は可能ですが、必須ではありません。また、スマホでの操作を前提としたデザインになっていますが、スマホ以外でも遊ぶことは可能です。