JS基础学习第二天：猜数字游戏

像程序员一样思考

      编程中学习的最困难的事情之一不是我们需要学习的语法，而是如何应用它来解决现实世界的问题。 您需要像一个程序员一样开始思考——这通常涉及到对程序需要做什么样描述，以及实现这些东西需要什么代码特性，以及如何使它们一起工作。

这需要努力工作，编程语法的经验和实践的混合，以及一点创造力。 我们编写的代码越多，我们的本领就越好。 我们不能保证您将在5分钟内开发“程序员大脑”，但我们将给您很多机会像整个课程中的程序员一样练习思维。
考虑到这一点，让我们看看我们将在本文中构建的示例，并查看将其分解为有形任务的一般过程。

例子-猜数字游戏

           在本文中。我们将演示如何构建下面看到的简单游戏

--------------------------------------------------------------------------------------------------------

我想让你创建一个可以猜数字的游戏，它会在1~100以内随机选择一个数, 然后让玩家挑战在10轮以内猜出这个数字，每一轮都要告诉玩家正确或者错误， 如果出错了，则告诉他数字是低了还是高了，并且还要告诉玩家之前猜的数字是什么。 一旦玩家猜测正确，或者他们用完了回合，游戏将结束。 游戏结束后，可以让玩家选择再次开始

---------------------------------------------------------------------------------------------------------

看到这个要求，我们可以做的第一件事是开始把它分解成简单的可操作的任务，尽可能从程序员的思维去思考：
1.生成1到100之间的随机数。
2.记录玩家在第几轮。从1开始。
3.为玩家提供一种猜测数字的方法。
4. 一旦提交了猜测，首先将它记录在某处，以便用户可以看到他们先前的猜测。
5.接下来检查它是否是正确的数字。
6. 如果是正确的：
      1.显示祝贺消息。
      2.阻止玩家输入更多的猜测（这会使游戏混乱）。
      3.显示控制允许玩家重新开始游戏。
7.如果它错了，并且玩家有剩余轮次：
      1.告诉玩家他们错了。
      2.允许他们输入另一个猜测。
      3.将圈数增加1。
8.如果它是错误的，并且玩家没有剩余轮次：
     1.告诉玩家游戏结束。
     2.阻止玩家输入更多的猜测（这会使游戏混乱）。
     3.显示控制允许玩家重新开始游戏。
9一旦游戏重新启动，请确保游戏逻辑和用户界面完全重置，然后返回步骤1。

让我们继续，看看我们如何将这些步骤转换为代码，构建示例，并探索JavaScript的功能。

初始化设置

//css        html {            font-family: sans-serif;        }        body {            width: 50%;            max-width: 800px;            min-width: 480px;            margin: 0 auto;        }        .lastResult {            color: white;            padding: 3px;        }

//html    <h1>Number guessing game</h1>    <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p>    <div class="form">        <label for="guessField">Enter a guess: </label>        <input type="text" id="guessField" class="guessField">        <input type="submit" value="Submit guess" class="guessSubmit">    </div>    <div class="resultParas">        <p class="guesses"></p>        <p class="lastResult"></p>        <p class="lowOrHi"></p>    </div>

添加变量保存数据

//js    var randomNumber = Math.floor(Math.random() * 100) + 1;    console.log(randomNumber)    var guesses = document.querySelector('.guesses');    var lastResult = document.querySelector('.lastResult');    var lowOrHi = document.querySelector('.lowOrHi');    var guessSubmit  =document.querySelector('.guessSubmit');    var guessField  =document.querySelector('.guessField');    var guessCount = 1;    var resetButton;

条件

    function checkGuess() {        var userGuess = Number(guessField.value);        if (guessCount === 1) {            guesses.textContent = 'prevous guesses: ';        }        guesses.textContent += userGuess + ' ';        if (userGuess === randomNumber) {            lastResult.textContent = 'Congratulations! You got it right!';            lastResult.style.backgroundColor = 'green';            lowOrHi.textContent = '';            setGameOver();        } else if (guessCount === 10) {           lastResult.textContent = '!!!GAME OVER!!!';            setGameOver();         } else {            lastResult.textContent = 'Wrong!';            lastResult.style.backgroundColor = 'red';            if(userGuess < randomNumber) {              lowOrHi.textContent = 'Last guess was too low!';            } else if(userGuess > randomNumber) {              lowOrHi.textContent = 'Last guess was too high!';            }        }        guessCount++;        guessField.value = '';        guessField.focus();    }

事件

点击Submit按钮，检测输入的值是否等于randomNumber!

guessSubmit.addEventListener('click', checkGuess);

完善

宣布游戏结束 并重置游戏！

    function setGameOver() {        guessField.disabled = true;        guessSubmit.disabled = true;        resetButton = document.createElement('button');        resetButton.textContent = 'Start new game!';        document.body.appendChild(resetButton);        resetButton.addEventListener('click',resetGame);    }    function resetGame() {        guessCount = 1;        var resetParas = document.querySelectorAll('.resultParas p');        for (var i = 0 ; i < resetParas.length ; i++) {            resetParas[i].textContent = '';        };        resetButton.parentNode.removeChild(resetButton);        guessField.disabled = false;        guessSubmit.disabled = false;        guessField.value = '';        guessField.focus();        lastResult.style.backgroundColor = 'white';        randomNumber = Math.floor(Math.random() * 100) + 1;          console.log(randomNumber);          }