程序员思维

学习编程，语法本身并不难，真正困难的是如何应用它来解决现实世界的问题。你要开始像程序员那样思考。一般来讲，这种思考包括了解你程序运行的目的，为达到该目的应选定的代码类型，以及如何使这些代码协同运行，并把一个任务拆分为一个个代码逻辑。

实现一个猜数字游戏

猜数字

 <h1>猜数字游戏</h1>
    <p>我已经想好了一个1到100之间的数字。你能猜到吗？</p>
    <input type="text" id="guessField" placeholder="输入你的猜测">
    <button id="guessButton">猜</button>
    <button id="resetButton">重置</button>
    <p id="result"></p>
    <p id="history"></p>

// 生成1到100之间的随机数
var randomNumber = Math.floor(Math.random() * 100) + 1;
//querySelector 选择元素
var guesses = document.querySelector('#history');
var lastResult = document.querySelector('#result');
var guessSubmit = document.querySelector('#guessField');
var guessButton = document.querySelector('#guessButton');
var resetButton = document.querySelector('#resetButton');

// 处理用户猜测
guessButton.addEventListener('click', function() {
    var userGuess = Number(guessSubmit.value);
    //清空输入框
    guessSubmit.value = ""
    if (userGuess < 1 || userGuess > 100) {
        lastResult.textContent = '请输入1到100之间的数字。';
    } else {
        if (userGuess === randomNumber) {
            lastResult.textContent = '恭喜你，猜对了！';
            lastResult.style.backgroundColor = 'green';
            setGameOver();
        } else if (userGuess < randomNumber) {
            lastResult.textContent = '太小了，再试试！';
        } else if (userGuess > randomNumber) {
            lastResult.textContent = '太大了，再试试！';
        }
        guesses.textContent +=  userGuess + ' ';
    }
});

// 监听重置游戏按钮
resetButton.addEventListener('click', function() {
    resetGame();
});
//结束游戏
function setGameOver() {
    guessButton.disabled = true;
    resetButton.disabled = false;
    lastResult.style.color = 'white';
}
//重置游戏
function resetGame() {
    resetButton.disabled = true;
    guessButton.disabled = false;
    guessSubmit.value = '';
    lastResult.textContent = '';
    guesses.textContent = '';
    randomNumber = Math.floor(Math.random() * 100) + 1;
}

任务拆解

1. 随机生成一个 1 到 100 之间的自然数。
2. 记录玩家当前的轮数。从 1 开始。
3. 为玩家提供一种猜测数字的方法。
4. 一旦有结果提交，先将其记录下来，以便用户可以看到他们先前的猜测。
5. 然后检查它是否正确。
6. 如果正确:

• 显示祝贺消息。
• 阻止玩家继续猜测。
• 显示控件允许玩家重新开始游戏。

7. 如果出错，并且玩家有剩余轮次：

• 告诉玩家他们错了。
• 允许他们输入另一个猜测。

8. 显示控件允许玩家重新开始游戏。
9. 一旦游戏重启，确保游戏的逻辑和 UI 完全重置，然后返回步骤 1。

把步骤变为代码

html

<h1>猜数字游戏</h1>
<p>我已经想好了一个1到100之间的数字。你能猜到吗？</p>
<input type="text" id="guessField" placeholder="输入你的猜测">
<button id="guessButton">猜</button>
<button id="resetButton">重置</button>
<p id="result"></p>
<p id="history"></p>

javascript

// 生成1到100之间的随机数
var randomNumber = Math.floor(Math.random() * 100) + 1;
//querySelector 选择元素
var guesses = document.querySelector('#history');
var lastResult = document.querySelector('#result');
var guessSubmit = document.querySelector('#guessField');
var guessButton = document.querySelector('#guessButton');
var resetButton = document.querySelector('#resetButton');

// 处理用户猜测
guessButton.addEventListener('click', function() {
    var userGuess = Number(guessSubmit.value);
    //清空输入框
    guessSubmit.value = ""
    if (userGuess < 1 || userGuess > 100) {
        lastResult.textContent = '请输入1到100之间的数字。';
    } else {
        if (userGuess === randomNumber) {
            lastResult.textContent = '恭喜你，猜对了！';
            lastResult.style.backgroundColor = 'green';
            setGameOver();
        } else if (userGuess < randomNumber) {
            lastResult.textContent = '太小了，再试试！';
        } else if (userGuess > randomNumber) {
            lastResult.textContent = '太大了，再试试！';
        }
        guesses.textContent +=  userGuess + ' ';
    }
});

// 监听重置游戏按钮
resetButton.addEventListener('click', function() {
    resetGame();
});
//结束游戏
function setGameOver() {
    guessButton.disabled = true;
    resetButton.disabled = false;
    lastResult.style.color = 'white';
}
//重置游戏
function resetGame() {
    resetButton.disabled = true;
    guessButton.disabled = false;
    guessSubmit.value = '';
    lastResult.textContent = '';
    guesses.textContent = '';
    randomNumber = Math.floor(Math.random() * 100) + 1;
}