小程序 input 换行_【我们的第一个微信小程序】第五篇：完成我们的游戏

现在我们已经有了两样法宝：

1. 点击“确定”按钮时修改<text>标签里的文本提示
2. 获取文本输入框里的值

那完成小程序版“猜猜我是几？”就只剩下最后一步——根据游戏逻辑修改文本提示内容。也就是把我们第一行的<text>标签当做我们以前的对话框用，在里面显示“猜猜我是几？”、“我大于xx”、“我小于xx”、“猜对了”。

我们把之前完整的“猜猜我是几？”代码再完整的展示一遍，然后我们就要把这些代码一点一点地转移到小程序里了。

var members = ['小明', '小红', '小蓝', '小黑'];
var score = {};
for (var i = 0; i < members.length; ++i) {
  score[members[i]] = 0;
}

var i = 0;
for (;;) {
  var n = Math.ceil(Math.random() * 100);
  var input;
  for (;;) {
    var index = i % members.length;
    input = prompt(members[index] + "，猜猜我是几？");
    if (input == null) {
      break;
    }

    input = Number(input);
    if (isNaN(input)) {
        // 输入的不是数字
        alert("你输入的数字格式不正确，请重新输入");
        continue;
    } else {
        // 输入的不是数字时再给一次猜数字的机会
        // 如果输入的是数字，那么下一次就轮到下一个人猜了
        i = i + 1;
    }

    if (n > input) {
      alert("我大于" + input);
    } else if (n < input) {
      alert("我小于" + input);
    } else {
      alert(members[index] + "，你猜对啦！我是" + n);
      score[members[index]] += 1;
      var str = "得分榜：n";
      for (var j = 0; j < members.length; j=j+1) {
          str = str + members[j] + "得分: " + score[members[j]] + "n";
      }
      alert(str);
      break;
    }
  }

  if (input == null) {
    break;
  }
}

首先是第一部分，初始化游戏参加者的列表和他们的猜对次数。这些代码只需要在游戏开始时执行一次就够了，所以我们可以直接放在最外面。

var members = ['小明', '小红', '小蓝', '小黑'];
var score = {};
for (var i = 0; i < members.length; ++i) {
  score[members[i]] = 0;
}

然后代表现在轮到的人是第几个的变量i我们要放到页面对象的data里才行，我们可以用this.data.i来代表，所以我们把var i = 0;添加到onLoad函数里的this.setData(...)函数中，就像下面这样：

外层循环在小程序里就不需要了，因为小程序是一直运行着的，不会执行完最后一行代码就退出。但是生成随机数n的代码我们同样要放到和i一样的位置上，这样在程序加载的时候就会生成一个我们可以猜的随机数了。不过我们还要在猜对之后更新一下这个随机数，不然每一轮猜的数字就都一样了。我们把对随机数的第一次初始化就直接加在i的下面。

同样的，内层循环现在也不需要了。显示轮到谁了的提示我们先放在一边，先处理后面的部分。获取当前猜的值并判断的代码，我们应该放到点击"确定"按钮的回调函数里，因为我们只有在“确定”按钮被按下后才会开始判断输入的数字和被猜的数字之间的大小关系。

后面的数字检查代码中，我们不再需要alert函数了，而是直接把提示显示在<text>标签的文本提示里。就像下面这样：

这里我们把获取输入值的操作修改成了从this.data.input直接获取，同时把alert改成了用this.setData(...)来修改tip的值。最后还把continue换成了return;，因为我们现在已经不是在循环里了，要退出这一次结果判断就要直接退出现在的这个回调函数。

刷新页面以后，我们输入正确的数字应该是什么反应都没有的，但是如果我们输入了错误的数字，那么就会出现对应的提示——“你输入的数字格式不正确，请重新输入”。

接着我们就可以把结果判断的逻辑也翻译到小程序里了，这次还是一样，我们要把alert(...)换成使用this.setData(...)修改tip的值。

在上面的代码里，我们要猜的数字变量n和现在轮到的人i都是从this.data里取出来的。因为我们在前面就是通过this.setData函数把n和i保存在this.data里的。

之后的大小比较逻辑就一样了，根据n和input的关系判断应该显示“大于”、“小于”还是“猜对了”。这些提示最后是通过this.setData修改tip变量来显示在<text>标签表示的文本提示框里的。

但是我们在猜对时还多加了一步“更新要猜的随机数n”，因为这一轮的数字已经被猜到了，所以我们得生成一个新的随机数来重新开始下一轮的游戏。

到这一步我们的小程序就完成了，让我们先试一试吧！

显示现在轮到谁了

不过我们前面在翻译代码的时候把一个很重要的功能给忽略了，就是显示现在已经轮到谁了。之前的程序里我们是把“轮到谁了”和“大于/小于/猜对”的提示分成两个对话框的，但是现在只有一个<text>标签了，那怎么同时显示两个提示呢？

我们可以用n来表示换行，也就是让后面的文字显示在下一行。我们可以试试在现在显示“大于/小于/猜对了”的代码里做些改动，让第二行显示现在轮到谁了。

刷新页面之后我们来试试效果。

好的，这下两个提示就都显示出来了。然后我们顺便把程序刚加载时把tip设置成Hello World的代码也改成提示第一个人来猜数字。

这里的members[0]就代表了游戏的第一个参加者。

练习

还记得我们在之前的练习里完成的排行榜显示吗？这次的练习就是把我们的排行榜得分真正显示在上面，你能完成它吗？