通读MDN之Javascript

Note：您在JavaScript中看到的许多代码特性和其他编程语言类似— 函数、循环，等等。 代码语法看起来不同，但是在概念上是基本类似的。

像程序员一样思考

在编程中学习的最困难的事情之一不是我们需要学习的语法，而是如何应用它来解决现实世界的问题。

完成一个——猜数游戏

在JSFiddle查看

我想让你创建一个可以猜数字的游戏，它会在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。

    var randomNumber = Math.floor(Math.random() * 100) + 1;// 生成随机数

    var guesses = document.querySelector('.guesses'); // 获取Dom节点
    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;
复制代码

查看有关变量的知识

转载于:https://juejin.im/post/5a681da251882573351a7950