数字当てゲーム

30~50の間の数字を当ててください。

数字入力欄に数字を入力して、チェックボタンを押すと、より大きい数字、より小さい数字、正解のいずれかが表示されます。正解の場合は入力欄が無効になります。

←

Prev　Next

→ 　

Back　

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

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

は、カウントダウン式の数字当てゲームを作ります。

以下が実装例になります。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>数字当てゲーム</title>
	<style>
		body {
			background-color: #f3f3f3;
			font-family: Arial, sans-serif;
			text-align: center;
		}

input[type=number] {
			padding: 5px;
			font-size: 24px;
			margin: 10px;
			border-radius: 10px;
			border: none;
			background-color: #ffffff;
		}

button {
			padding: 10px 20px;
			font-size: 18px;
			border-radius: 10px;
			border: none;
			background-color: #ff9900;
			color: #ffffff;
			cursor: pointer;
		}

h1 {
			font-size: 48px;
			margin: 0;
		}

p {
			font-size: 24px;
			margin: 10px;
		}
	</style>
</head>
<body>
	<h1>数字当てゲーム</h1>
	<p>30~50の間の数字を当ててください。</p>
	<input type="number" id="guess" placeholder="数字を入力">
	<br>
	<button onclick="checkGuess()">チェック</button>
	<br>
	<p id="result"></p>