JavaScript(二)——猜数字游戏

下面我们将会通过一个小案例——猜数字游戏,来直观地感受一下如何让JavaScript完成任务。

设计要求

假设你的老板给你布置了以下游戏设计任务要求:

我想让你开发一个猜数字游戏。游戏应随机选择一个 100 以内的自然数, 然后邀请玩家在 10 轮以内猜出这个数字。每轮后都应告知玩家的答案正确与否,如果出错了,则告诉他数字是低了还是高了。并且应显示出玩家前一轮所猜的数字。一旦玩家猜对,或者用尽所有机会,游戏将结束。游戏结束后,可以让玩家选择再次开始。

看到这个要求,首先我们要做的是将其分解成简单的可操作的任务,尽可能从程序员的思维去思考:

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

代码实现

让我们继续,看看我们如何将上面这些步骤转换为代码,构建这个示例,从而探索 JavaScript 的功能。

初始设置

首先是静态页面的实现,一个标题,一段游戏说明,和一个用于输入猜测的表单(此时表单不会执行任何操作)。

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>猜数字游戏title>

  head>

  <body>
    <h1>猜数字游戏h1>

    <p>我刚才随机选定了一个100以内的自然数。看你能否在 10 次以内猜中它。每次我都会告诉你所猜的结果是高了还是低了。p>

    <div class="form">
      <label for="guessField">请猜数: label>
      <input type="text" id="guessField" class="guessField">
      <input type="submit" value="确定" class="guessSubmit">
    div>

    <div class="resultParas">
      <p class="guesses">p>
      <p class="lastResult">p>
      <p class="lowOrHi">p>
    div>

  body>
html>

JavaScript(二)——猜数字游戏_第1张图片
再为其添加一些CSS样式

    <style>
      html {
        font-family: sans-serif;
      }

      body {
        width: 50%;
        max-width: 800px;
        min-width: 480px;
        margin: 0 auto;
      }

      .lastResult {
        color: white;
        padding: 3px;
      }
    style>

JavaScript(二)——猜数字游戏_第2张图片
最后我们将在底部的

你可能感兴趣的:(JavaScript,javascript,游戏,开发语言)