DOM project3：Number Guesser

最新推荐文章于 2024-08-30 08:03:04 发布

豌豆射手GCC

最新推荐文章于 2024-08-30 08:03:04 发布

阅读量158

点赞数

分类专栏： JavaScript Project JavaScript

本文链接：https://blog.csdn.net/BLUEsang/article/details/106889679

版权

JavaScript 同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

JavaScript Project

9 篇文章 1 订阅

订阅专栏

ui框架：skeleton

https://cdnjs.com/libraries/skeleton

建立HTML UI

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" integrity="sha256-ECB9bbROLGm8wOoEbHcHRxlHgzGqYpDtNTgDTyDz0wg=" crossorigin="anonymous" />
  <title>Number Guesser</title>
  
</head>
<body>
  <div class="container">
    <h1>Number Guesser</h1>
    <div id="game">
      <p>Guess a number between <span class="min-num">1</span> and <span class="max-num">10</span></p>
      <input type="number" id="guess-input" placeholder="Enter your guess...">
      <input type="submit" value="submit" id="guess-value">
      <p class="message"></p>
    </div>
  </div>

  <script src="app.js"></script>
</body>
</html>

在这里插入图片描述

设定guess功能

/*
GAME FUNCTION:
-Player must guess a number between a min and max
-Player gets a certain amount of guesses 
-Notify player of guesses remaining
-Notify player of the correct answer if lose
-Let player choose to play again
*/

设定game参数

//Game values
let min =1,
    max =10,
    winningNum=2,
    guessLeft=3;

获取UI标签

  //UI element
const game=document.getElementById('game'),
      minNum=document.querySelector('.min-num'),
      maxNum=document.querySelector('.max-num'),
      guessBtn=document.querySelector('#guess-btn'),
      guessInput=document.querySelector('#guess-input'),
      message=document.querySelector('.message');

设定UI中的范围参数

//Assign UI min and max
minNum.textContent=min;
maxNum.textContent=max;

设定input按钮事件

（1）超出范围：显示提示；
（2）猜对：显示正确+disable input；

//Listen for guess
guessBtn.addEventListener('click',function(){
  let guess=parseInt(guessInput.value);
  console.log(guess);
  //Validate
  if(isNaN(guess) || guess <min || guess >max){
    //不能用guess===NaN  要用isNaN(guess)
    setMessage(`Please enter a number between ${min} and ${max}`,'red');
  }

  //Check if won
  if(guess === winningNum){
    //Disable input
    guessInput.disabled=true;   //input不能再输入
    //Change border color
    guessInput.style.borderColor='green';
    //Set message
    setMessage(`${winningNum} is Correct, YOU WIN`,'green');
  }else{

  }
});

//Set message
function setMessage(msg,color){
  message.style.color=color;
  message.textContent=msg;
}

设定失败显示

gameover则显示over；

//Listen for guess
guessBtn.addEventListener('click',function(){
  let guess=parseInt(guessInput.value);
  console.log(guess);
  //Validate
  if(isNaN(guess) || guess <min || guess >max){
    //不能用guess===NaN  要用isNaN(guess)
    setMessage(`Please enter a number between ${min} and ${max}`,'red');
  }

  //Check if won
  if(guess === winningNum){
    //Game over - Won
    //Disable input
    guessInput.disabled=true;   //input不能再输入
    //Change border color
    guessInput.style.borderColor='green';
    //Set message
    setMessage(`${winningNum} is Correct, YOU WIN`,'green');
  }else{
    //Wrong number
    guessLeft -=1; //剩余的猜测次数

    if(guessLeft === 0){
      // // Game over lost
      //     //Disable input
      //   guessInput.disabled=true;   //input不能再输入
      //   //Change border color
      //   guessInput.style.borderColor='red';
      //   //Set message
      //   setMessage(`Game over ,you lost. The correct number was${winningNum}`,'red');
      gameOver(false,`Game over ,you lost. The correct number was${winningNum}`);
    }else{
      //Game continues - anwer wrong
      //change border color
      guessInput.style.borderColor='red';
      //Clear input
      guessInput.value="";
      //tell user its the wrong number
      setMessage(`${guess} is not correct, ${guessLeft} guesses left`);
    }
  }
});

//Gameover
function gameOver(won,msg){
    // Game over lost
    let color;
    won === true? colo = "green" : color="red";
    //Disable input
    guessInput.disabled=true;   //input不能再输入
    //Change border color
    guessInput.style.borderColor=color;
    //Set message
    setMessage(msg,color);
}

//Set message
function setMessage(msg,color){
  message.style.color=color;
  message.textContent=msg;
}

优化代码——减少重复

//Listen for guess
guessBtn.addEventListener('click',function(){
  let guess=parseInt(guessInput.value);
  console.log(guess);
  //Validate
  if(isNaN(guess) || guess <min || guess >max){
    //不能用guess===NaN  要用isNaN(guess)
    setMessage(`Please enter a number between ${min} and ${max}`,'red');
  }

  //Check if won
  if(guess === winningNum){
    // //Game over - Won
    gameOver(true,`${winningNum} is Correct, YOU WIN`);
  }else{
    //Wrong number
    guessLeft -=1; //剩余的猜测次数

    if(guessLeft === 0){
      // // Game over lost
      gameOver(false,`Game over ,you lost. The correct number was ${winningNum}`);
    }else{
      //Game continues - anwer wrong
      //change border color
      guessInput.style.borderColor='red';
      //Clear input
      guessInput.value="";
      //tell user its the wrong number
      setMessage(`${guess} is not correct, ${guessLeft} guesses left`);
    }
  }
});

完整代码

将数字设为随机数；

/*
GAME FUNCTION:
-Player must guess a number between a min and max
-Player gets a certain amount of guesses 
-Notify player of guesses remaining
-Notify player of the correct answer if lose
-Let player choose to play again
*/

//Game values
let min =1,
    max =5,
    winningNum=getrandomnum(min,max);
    console.log(winningNum);
    //winningNum=2;
    guessLeft=3;

  //UI element
const gameWrapper=document.getElementById('game'),
      minNum=document.querySelector('.min-num'),
      maxNum=document.querySelector('.max-num'),
      guessBtn=document.querySelector('#guess-btn'),
      guessInput=document.querySelector('#guess-input'),
      message=document.querySelector('.message');

//Assign UI min and max
minNum.textContent=min;
maxNum.textContent=max;


//Play again event listener
gameWrapper.addEventListener('mouseup',function(e){  //若为click，则按下去已经gameover，松开来就直接刷新了
  if(e.target.className==='play-again'){
    window.location.reload();
  }
});

//Listen for guess
guessBtn.addEventListener('click',function(){
  let guess=parseInt(guessInput.value);
  console.log(guess);
  //Validate
  if(isNaN(guess) || guess <min || guess >max){
    //不能用guess===NaN  要用isNaN(guess)
    setMessage(`Please enter a number between ${min} and ${max}`,'red');
  }

  //Check if won
  if(guess === winningNum){
    // //Game over - Won
    gameOver(true,`${winningNum} is Correct, YOU WIN`);
  }else{
    //Wrong number
    guessLeft -=1; //剩余的猜测次数

    if(guessLeft === 0){
      // // Game over lost
      gameOver(false,`Game over ,you lost. The correct number was ${winningNum}`);
    }else{
      //Game continues - anwer wrong
      //change border color
      guessInput.style.borderColor='red';
      //Clear input
      guessInput.value="";
      //tell user its the wrong number
      setMessage(`${guess} is not correct, ${guessLeft} guesses left`);
    }
  }
});


//Gameover
function gameOver(won,msg){
    // Game over lost
    let color;
    won === true? color = "green" : color="red";
    //Disable input
    guessInput.disabled=true;   //input不能再输入
    //Change border color
    guessInput.style.borderColor=color;
    //Set message
    setMessage(msg,color);

    //Play again
    guessBtn.value="Play again";
    guessBtn.className +='play-again';
    //因为改类为load之后添加，所以需要用到event继承
}

//Get winning num
function getrandomnum(min, max){
  //js中hoisted 会自动把function放在最前面，所以可以定义在后面
  return Math.floor(min+(max-min)*Math.random()+1);
}

//Set message
function setMessage(msg,color){
  message.style.color=color;
  message.textContent=msg;
}