JavaScript实现猜数字游戏

最新推荐文章于 2024-01-27 21:56:08 发布

置顶 Code小小白

最新推荐文章于 2024-01-27 21:56:08 发布

阅读量2.8k

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/zmxsycy/article/details/115099939

版权

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

这个博客介绍了一个使用JavaScript编写的猜数字游戏。游戏规则是生成一个1到100之间的随机数，用户有10次机会猜测，猜对则显示恭喜信息，猜错会提示过高或过低。当猜测次数达到10次或猜对数字时，游戏结束，并提供重新开始游戏的选项。通过此游戏，可以学习和实践JavaScript的事件监听、DOM操作以及条件判断等基础知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript实现猜数字游戏

主要思想：设置一个随机数，然后从输入框获取用户输入的数字，然后进行比较，如果获取的数字猜低了给个提示，获取的数字高了，给一个提示，猜对了给一个提示，最后再一个猜题次数，必须小于等于10，否则游戏结束。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>猜数字游戏</title>
</head>
<body>
	<label for="guessNum">请猜一个数字：</label>
	<input type="text" id="guessNum" class="guessNum" />
	<input type="submit" name="" id="" value="确定" class="guessSubmit"/>
	<p class="guesses"></p>
	<p class="lastResult"></p>
	<p class="lowOrHi"></p>
	
	
</body>
<script type="text/javascript">
	//开始编写 JavaScript 代码
	let randomNumber = Math.floor(Math.random()* 100) + 1;
	
	const guesses = document.querySelector('.guesses');
	const lastResult = document.querySelector('.lastResult')
	const lowOrHi = document.querySelector('.lowOrHi')
	
	const guessSubmit = document.querySelector('.guessSubmit')
	const guessNum = document.querySelector('.guessNum')
	
	let guessCount = 1;
	let resetButton;
	function checkGuess(){
		let userGuess = Number(guessNum.value);
		if(guessCount === 1){
			guesses.textContent = '上次猜的数字：';
		}
		guesses.textContent += userGuess + ' '
		
		if(userGuess === randomNumber){
			lastResult.textContent = '恭喜你！猜对了';
			lastResult.style.backgroundColor = 'green';
			lowOrHi.textContent = '';
			setGameOver();
		}else if(guessCount === 10){
			lastResult.textContent = '答题次数过多，游戏结束！'
			setGameOver();
		}else{
			lastResult.textContent = '回答错误！';
			lastResult.style.backgroundColor = 'red';
			if(userGuess < randomNumber){
				lowOrHi.textContent = '猜低了！'
			}else if(userGuess > randomNumber){
				lowOrHi.textContent = '猜高了！'
			}
		}
		guessCount ++;
		guessNum.value = '';
		//获取较焦点
		guessNum.focus();
		
	}
	
	guessSubmit.addEventListener('click',checkGuess);
	function setGameOver(){
		guessNum.disabled = true;
		guessSubmit.disabled = true;
		resetButton = document.createElement('button');
		resetButton.textContent = '开始新游戏！';
		document.body.appendChild(resetButton);
		resetButton.addEventListener('click',resetGame);
	}
	
	function resetGame(){
		guessCount = 1;
		const resetParas = document.querySelectorAll('.resultParas p');
		for(let i = 0; i < resetParas.length;i ++){
			resetParas[i].textContent = '';
		}
		resetButton.parentNode.removeChild(resetButton);
		
		guessNum.disabled = false;
		guessSubmit.disabled = false;
		guessNum.value = '';
		guessNum.focus();
		
		lastResult.style.backgroundColor = 'burlywood';
		
		randomNumber = Math.floor(Math.random() * 100) + 1;
	}
</script>
</html>

在这里插入图片描述