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

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

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

那完成小程序版“猜猜我是几？”就只剩下最后一步——根据游戏逻辑修改文本提示内容。也就是把我们第一行的<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;，因为我们现在已经不是在循环里了，要退出这一次结果判断就要直接退出现在的这个回调函数。

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