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);      
    }