趣味猜猜猜数字小游戏简单实现效果

最新推荐文章于 2024-07-22 15:19:55 发布

秃头小锦鲤

最新推荐文章于 2024-07-22 15:19:55 发布

阅读量94

点赞数

分类专栏：小游戏文章标签：前端 javascript 开发语言 html css

本文链接：https://blog.csdn.net/m0_48431810/article/details/130329787

版权

小游戏专栏收录该内容

2 篇文章 0 订阅

订阅专栏

以下是一个简单的实现，你可以将它复制到一个HTML文件中运行：

<!DOCTYPE html>
<html>
<head>
	<title>猜数字小游戏</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<header>
		<h1>猜数字小游戏</h1>
	</header>
	<main>
		<div>
			<label for="guess">请输入1到100之间的一个整数：</label>
			<input type="number" id="guess" name="guess" min="1" max="100">
			<button id="submit">提交</button>
		</div>
		<div id="message"></div>
	</main>
	<script>
		// 生成1到100之间的随机整数
		const answer = Math.floor(Math.random() * 100) + 1;
		
		const guessInput = document.getElementById('guess');
		const submitButton = document.getElementById('submit');
		const messageDiv = document.getElementById('message');
		
		let guessCount = 0;
		
		// 处理“提交”按钮的点击事件
		submitButton.addEventListener('click', () => {
			const guess = parseInt(guessInput.value);
			if (isNaN(guess) || guess < 1 || guess > 100) {
				messageDiv.textContent = '请输入1到100之间的一个整数！';
				return;
			}
			guessCount++;
			if (guess > answer) {
				messageDiv.textContent = '猜的数字太大了！';
			} else if (guess < answer) {
				messageDiv.textContent = '猜的数字太小了！';
			} else {
				messageDiv.textContent = `恭喜你，猜对了！你猜了${guessCount}次。`;
				guessInput.disabled = true;
				submitButton.disabled = true;
			}
		});
	</script>
</body>
</html>