我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

本来想做老师的猜你心里想的1-100中的一个数案例，展示30个数，玩家只需点在于不在，几轮下来就能显示玩家心里想的数。自己搞了一下发现有点小难，就写了一个猜数游戏

项目效果

项目实现

html

v-model.number 自动将用户的输入值转为数值类型
为什么不用type="number"
因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串
其他都是一些常用标签

  <div class="guess-num-container">
    <h2>猜数游戏</h2>
    <p>玩家有三次机会, 猜1-20中的数字</p>
    <input type="text" v-model.number="value">
    <button class="submit" @click="submitFn">确定</button><br>
    <button @click="startFn">{{text}}</button>
    <p>运行结果</p>
    <div>{{result}}</div>
  </div>

script

准备数据

初始化一些用得到数据

2. 核心代码

sum是玩家的可玩次数，根据自己需求灵活调整
提示都在代码旁边, 逻辑不是很复杂

    // 点击确认按钮
    submitFn () {
      if (this.text === '开始游戏') return this.result = '请先开始游戏！'
      // 判断不合法的输入
      if (this.value < 1 || this.value > 20 || typeof this.value !== 'number') return this.result = '请输入游戏规定的数字！'
      this.sum-- // 游戏次数减1
      this.text = `你还有${this.sum}次机会` // 替换文字
      if (this.sum === 0) { // 重新赋值
        this.result = '游戏失败，再接再厉！'
        this._reset('重新开始') // 重置游戏的自定义函数
        return
      }
      // 判断
      if (this.value > this.random) {
       this.result = '猜大了！'
      }
      if (this.value < this.random) {
       this.result = '猜小了！'
      }
      if (this.value === this.random) {
        this.result = '恭喜你，猜对了，游戏通关了！'
        this._reset('游戏通关') // 重置游戏的自定义函数
      }
      this.value = null // 清空输入框
    }

点击下方开始游戏按钮

Math.random() * 20 + 1中的20是猜数游戏的数字长度

css

都是一些常用的css

body{
  background: #09203f;
}
.guess-num-container{
    width: 400px;
    margin: auto;
    padding: 10px;
    background: #2b6876;
    text-align: center;
    h2, p {
        color: #fff;
    }
    button{
        padding: 10px;
        margin-top: 10px;
        background: pink;
        border: 1px solid #000;
        border-radius: 10px;
        cursor: pointer; // 将鼠标指针变为小手
    }
    .submit{
        padding: 5px;
        margin-left: 10px;
        font-size: 14px;
    }
    div{
      color: #fff;
    }
}

vue超简单猜数游戏

项目效果

项目实现

html

script

css