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

No:3917

1151

Ahh~! The sound of hydrogen~!
Developer もちきなこ｜Date and time 23/6/26 23:45:59
Build time 45.575 sec｜Game capacity 3.659KB｜

はい、了解しました。それでは、スマホでも遊べるシンプルな「数当てゲーム」を作ってみましょう。以下が実際のHTMLファイルです。JavaScript部分はscriptタグで囲まれています。

数当てゲーム

1から100までの数字を当ててみよう！

このゲームは、1から100までのランダムな数字が用意されており、プレイヤーはその数字を当てることが目的です。数字を入力し、チェックボタンを押すことで、それが答えと一致するか、それより大きいか小さいかを表示します。答えを当てたら、inputを無効化し、リセットボタンを押すことで新しい数字を生成することができます。スタイリングにはCSSを使用し、ボタンや入力欄には読みやすいフォントサイズや、使いやすいようにカーソルを変更するなどの細かな工夫を加えました。また、正解や不正解の表示には色分けをして、プレイヤーに分かりやすくしています。このゲームはスマホでも快適に遊べるように設計されているため、スマホでアクセスすると思った通りに動作します。絵文字は使用していませんが、わかりやすいUIで作成しているので、遊びやすい点には代わりありません。

→ 　

0　

0　

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

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

(C)2023 HisashiApp

はい、了解しました。それでは、スマホでも遊べるシンプルな「数当てゲーム」を作ってみましょう。

以下が実際のHTMLファイルです。JavaScript部分はscriptタグで囲まれています。

```
<!DOCTYPE html>
<html>
<head>
	<title>数当てゲーム</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-family: sans-serif;
			text-align: center;
		}
		button {
			padding: 1rem;
			font-size: 1.2rem;
			margin: 0.5rem;
			border-radius: 5px;
			background-color: #e6e6e6;
			border: 2px solid #333;
			cursor: pointer;
			transition: all 0.2s ease;
		}
		button:hover {
			background-color: #333;
			color: white;
		}
		input {
			padding: 1rem;
			font-size: 1.2rem;
			margin: 0.5rem;
			border-radius: 5px;
			background-color: #e6e6e6;
			border: 2px solid #333;
			color: #333;
			text-align: center;
			width: 40%;
			max-width: 300px;
			box-sizing: border-box;
		}
		.correct {
			color: green;
			font-weight: bold;
		}
		.incorrect {
			color: red;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<h1>数当てゲーム</h1>
	<p>1から100までの数字を当ててみよう！</p>
	<p id="result"></p>
	<input type="number" id="guess" placeholder="数字を入力">
	<div>
		<button id="checkBtn">チェック</button>
		<button id="resetBtn">リセット</button>
	</div>
	<script>
		var answer = Math.floor(Math.random() * 100) + 1;	// 1から100までのランダムな数字
		var guessInput = document.getElementById("guess");
		var resultText = document.getElementById("result");

// チェックボタンのクリックイベント
		document.getElementById("checkBtn").addEventListener("click", function() {
			var guess = parseInt(guessInput.value);
			if (guess === answer) {
				resultText.innerHTML = "正解！";
				resultText.classList.add("correct");
				guessInput.disabled = true;
			} else if (guess < answer) {
				resultText.innerHTML = "もっと大きいよ！";
				resultText.classList.add("incorrect");
			} else {
				resultText.innerHTML = "もっと小さいよ！";
				resultText.classList.add("incorrect");
			}
			guessInput.value = "";
			guessInput.focus();
		});

// リセットボタンのクリックイベント
		document.getElementById("resetBtn").addEventListener("click", function() {
			answer = Math.floor(Math.random() * 100) + 1;
			resultText.innerHTML = "";
			guessInput.disabled = false;
			guessInput.value = "";
			guessInput.focus();
		});
	</script>
</body>
</html>
```

このゲームは、1から100までのランダムな数字が用意されており、プレイヤーはその数字を当てることが目的です。数字を入力し、チェックボタンを押すことで、それが答えと一致するか、それより大きいか小さいかを表示します。答えを当てたら、inputを無効化し、リセットボタンを押すことで新しい数字を生成することができます。

スタイリングにはCSSを使用し、ボタンや入力欄には読みやすいフォントサイズや、使いやすいようにカーソルを変更するなどの細かな工夫を加えました。また、正解や不正解の表示には色分けをして、プレイヤーに分かりやすくしています。

このゲームはスマホでも快適に遊べるように設計されているため、スマホでアクセスすると思った通りに動作します。絵文字は使用していませんが、わかりやすいUIで作成しているので、遊びやすい点には代わりありません。