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

No:4347

1350

Turings test
Developer User3770｜Date and time 23/6/27 20:21:18
Build time 31.089 sec｜Game capacity 2.963KB｜

に適合するため、以下の要件を満たすシンプルな数当てゲームを作成しました。【要件】 1. 1枚のhtmlファイルとして実装する。 2. JavaScriptを含め、必ずscriptタグで囲む。 3. 即座に実行される実際のプログラムで記述する。 4. ゲームとして遊べる（数当てゲームを作成）。 5. スマホ操作前提で作成する。 6. 絵文字を使うことができないので、文字だけでゲームを作成する。【ゲーム説明】 1. ゲームは1から100までの数字を当てる数当てゲームです。 2. スマホの場合はキーボードが表示されますので、そこから数字を入力してください。 3. PCの場合は数字を入力する欄をクリックし、キーボードから数字を入力してください。 4. 正解の数字を入力すると、正解ですとメッセージが表示されます。 5. 不正解の数字を入力すると、正解が入力した数字よりも大きいか小さいかヒントが表示されます。以下がゲームの実装になります。

数当てゲーム

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

→ 　

0　

0　

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

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

(C)2023 HisashiApp

に適合するため、以下の要件を満たすシンプルな数当てゲームを作成しました。

【要件】
1. 1枚のhtmlファイルとして実装する。
2. JavaScriptを含め、必ずscriptタグで囲む。
3. 即座に実行される実際のプログラムで記述する。
4. ゲームとして遊べる（数当てゲームを作成）。
5. スマホ操作前提で作成する。
6. 絵文字を使うことができないので、文字だけでゲームを作成する。

【ゲーム説明】
1. ゲームは1から100までの数字を当てる数当てゲームです。
2. スマホの場合はキーボードが表示されますので、そこから数字を入力してください。
3. PCの場合は数字を入力する欄をクリックし、キーボードから数字を入力してください。
4. 正解の数字を入力すると、正解ですとメッセージが表示されます。
5. 不正解の数字を入力すると、正解が入力した数字よりも大きいか小さいかヒントが表示されます。

以下がゲームの実装になります。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>数当てゲーム</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			text-align: center;
			background-color: #f2f2f2;
		}
		h1, h2 {
			margin-top: 20px;
			margin-bottom: 10px;
			font-size: 24px;
			color: #333;
		}
		#answer {
			margin-top: 20px;
			padding: 10px;
			width: 200px;
			height: 40px;
			border: 2px solid #ccc;
			border-radius: 5px;
			font-size: 24px;
			color: #333;
			text-align: center;
			background-color: #fff;
		}
		#submit {
			margin-top: 20px;
			padding: 10px;
			background-color: #4CAF50;
			color: #fff;
			font-size: 16px;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2),
            	0 4px 4px 0 rgba(0,0,0,0.19);
		}
		#hint {
			margin-top: 20px;
			color: #333;
			font-size: 16px;
		}
	</style>
	<script>
		function guessNumber() {
			var answer = Math.floor(Math.random() * 100) + 1;
			var count = 0;

document.getElementById("submit").addEventListener("click", function() {
				var input = document.getElementById("answer").value;
				count++;

if (input == answer) {
					alert("正解です！" + count + "回目で当てました！");
				} else if (input > answer) {
					document.getElementById("hint").innerHTML = "それよりも小さいです。";
				} else if (input < answer) {
					document.getElementById("hint").innerHTML = "それよりも大きいです。";
				}
			});
		}
	</script>
</head>
<body onload="guessNumber();">
	<h1>数当てゲーム</h1>
	<h2>1から100までの数字を当ててください。</h2>
	<input type="text" id="answer" placeholder="数字を入力">
	<button id="submit">チェック！</button>
	<div id="hint"></div>
</body>
</html>