【JavaScript】(一)解读一个js小游戏

【前言】

        离公司近的好处,就在于每天都能利用自己的下班时间,更好地查漏补缺,充实技能。

        最近小编做的项目需要写js偏多,而我不擅长写前端js,利用工作之余,开始学习,下面通过一个成型的js小游戏,开始我的js再次学习之旅。


【需求】

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

          【JavaScript】(一)解读一个js小游戏_第1张图片

         界面基本如上所示。

【思路】

     因为我是在MDN论坛里学习到的这个小游戏,他给出了很好的设计思路:

1.生成1到100之间的随机数。
2.记录玩家在第几轮。从1开始。
3.为玩家提供一种猜测数字的方法。
4.一旦提交了猜测,首先将它记录在某处,以便用户可以看到他们先前的猜测。
5.接下来检查它是否是正确的数字。
6.如果是正确的:
   1.显示祝贺消息。
   2.阻止玩家输入更多的猜测(这会使游戏混乱)。
   3.显示控制允许玩家重新开始游戏。
7.如果它错了,并且玩家有剩余轮次:
   1.告诉玩家他们错了。
   2.允许他们输入另一个猜测。
   3.将圈数增加1。
8.如果它是错误的,并且玩家没有剩余轮次:
   1.告诉玩家游戏结束。
   2.阻止玩家输入更多的猜测(这会使游戏混乱)。
   3.显示控制允许玩家重新开始游戏。
9.一旦游戏重新启动,请确保游戏逻辑和用户界面完全重置,然后返回步骤1。
     因为是为了学习js,就按照MDN给出的思路来写。


【实现】

     1.静态网页:



  
    

    Number guessing game

    
  

  
      

Number guessing game

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.

     如上代码新建一个.htm文件,用浏览器打开之后,则显示了上述截图的静态部分。页面分2大块:

     1)form,用于用户输入guess的数字,以及submit按钮;

     2)resultParas,用于响应用户的输出结果,显示成功、失败状态(以及guess的历史记录,便于用户做新的判断)

     2.动态代码
     这里我先放代码:

       如上所述,同样对js感兴趣的你,可以将这两段代码粘到一个html文件中跑一跑,玩几次这个猜数字游戏之后,了解了它的一些功能设计,再往下来一起探讨。


【探讨】

     一、静态部分

    核心输入

是静态部分的重心,
其实用于存储变量时,起了很大作用。“guess”,“lastResult”,“loworhi”分别用于:


    二、动态部分

    这块主要3个function实现游戏过程,checkGuess(),setGameOver(),resetGame(),分别递进地实现游戏逻辑。

    1.checkGuess()

     玩过几把游戏之后,发现每次单击这里:

     就会触发checkGuess()中的内容,如上所示,并没有onclick()来触发,那究竟是怎么回事?

     在

你可能感兴趣的:(【JavaScript】(一)解读一个js小游戏)