猜数字游戏

写一个猜数字游戏，功能实现了，写的很繁琐，反思下。

我的代码：

html:

css:

js:

我的思路：

1.随机生成一个100以内的自然数

2.记录玩家的游戏轮数，从0开始

3.为玩家提供一种猜数字的方法

4.一旦有结果提交，获取差值。。。。巴拉巴拉

5.还忘记重置随机数了。。

 

学习思路：

     https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash

1. 随机生成一个 100 以内的自然数。
2. 记录玩家当前的轮数。从 1 开始。
3. 为玩家提供一种猜测数字的方法。
4. 一旦有结果提交，先将其记录下来，以便用户可以看到他们先前的猜测。
5. 然后检查它是否正确。
6. 如果正确：
   1. 显示祝贺消息。
   2. 阻止玩家继续猜测（这会使游戏混乱）。
   3. 显示控件允许玩家重新开始游戏。
7. 如果出错，并且玩家有剩余轮次：
   1. 告诉玩家他们错了。
   2. 允许他们输入另一个猜测。
   3. 轮数加 1。
8. 如果出错，并且玩家没有剩余轮次：
   1. 告诉玩家游戏结束。
   2. 阻止玩家继续猜测（这会使游戏混乱）。
   3. 显示控件允许玩家重新开始游戏。
9. 一旦游戏重启，确保游戏的逻辑和UI完全重置，然后返回步骤1。

总结：

        (0).因为判断的是number，要确保该值是一个数字。

        (1). 无论猜对猜错，都要记录，放在第一步。在轮数是1的时候，初始化内容，再加记录数字。

        (2). 判断结果，有猜对猜错2种，猜对的情况只有一种，其他都是猜错。所以先判断猜对。

               最后的p至为空，这样就没有行高了。方便html中加按钮的显示位置。如果猜对，可重新开始游戏。

        (3). 猜错的情况下，分有轮数和没有轮数，没有轮数只有一种，所以先判断没有轮数。如果没轮数，可重新开始游戏。

        (4). 在有轮数的情况下，有2中错误，猜高了和猜低了。

        (5). 轮数加1

        (6).清空表单，并focus，方便玩家下次输入。

textContent和innerText属性的区别 https://blog.csdn.net/dexing07/article/details/77947333

注：var a=document.querySelector("input");

       var b=document.querySelector("input").value;

       a.value="内容"；

       b="内容"；

       b是不能改变input的value的，我犯傻了。。

MDN是火狐的文档