微客导航 » 文章资讯 » 基于JavaScript实现猜数字游戏代码实例

基于JavaScript实现猜数字游戏代码实例

2023-07-19 14:48:08 336

环境

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次以内猜中它。每次我都会告诉你所猜的结果是高了还是低了。


请猜数:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

基于JavaScript实现猜数字游戏代码实例

猜数字游戏

猜数字游戏

热门推荐

随机推荐