基于JavaScript实现猜数字游戏代码实例
环境
- vscode1.46
- MicrosoftEdge83
示例
以下内容为了解和熟悉JavaScript,不需要理解,能够复制粘贴并正确运行即可。
新建网页模板
在vscode中新建一个index.html文件,然后输入以下内容。
猜数字游戏 猜数字游戏
我刚才随机选定了一个100以内的自然数。看你能否在10次以内猜中它。每次我都会告诉你所猜的结果是高了还是低了。
请猜数:
定义变量
首先将需要使用的变量都定义出来。
letrandomNumber=Math.floor(Math.random()*100)+1; constguesses=document.querySelector('.guesses'); constlastResult=document.querySelector('.lastResult'); constlowOrHi=document.querySelector('.lowOrHi'); constguessSubmit=document.querySelector('.guessSubmit'); constguessField=document.querySelector('.guessField'); letguessCount=1; letresetButton;
定义猜数字主逻辑
functioncheckGuess(){ letuserGuess=Number(guessField.value); if(guessCount===1){ guesses.textContent='上次猜的数:'; } guesses.textContent+=userGuess+''; if(userGuess===randomNumber){ lastResult.textContent='恭喜你!猜对了'; lastResult.style.backgroundColor='green'; lowOrHi.textContent=''; setGameOver(); }elseif(guessCount===10){ lastResult.textContent='!!!GAMEOVER!!!'; setGameOver(); }else{ lastResult.textContent='你猜错了!'; lastResult.style.backgroundColor='red'; if(userGuessrandomNumber){ lowOrHi.textContent='你猜高了'; } } guessCount++; guessField.value=''; guessField.focus(); }
结束游戏
functionsetGameOver(){ guessField.disabled=true; guessSubmit.disabled=true; resetButton=document.createElement('button'); resetButton.textContent='开始新游戏'; document.body.appendChild(resetButton); resetButton.addEventListener('click',resetGame); }
重置游戏
functionresetGame(){ guessCount=1; constresetParas=document.querySelectorAll('.resultParasp'); for(leti=0;i浏览器打开
用浏览器打开刚刚编写的程序,试试游戏是否能够正常运行。
附录
源码
猜数字游戏 猜数字游戏
我刚才随机选定了一个100以内的自然数。看你能否在10次以内猜中它。每次我都会告诉你所猜的结果是高了还是低了。
请猜数: