完整教程：使用前端框架vue做一个小游戏

游戏介绍：随机生成4个数字，通过加减乘除，是最后的结果为24。

不足之处：

随机生成的数字可能不能通过运算得出结果24，你们也可以在我的基础上进行修改。
我的“确认”按钮每次只能进行两个数的运算。

闲谈：这是我这年暑假做的（挺久的），感觉还不是很成熟。很久没写了，都有些生疏了（^-^)

一、游戏布局

1.1页面布局介绍

不包含标题的情况下，大体上有三个版块：

第一个版块包含了时间、解决问题数、规则
第二个版块包含了运算需要的数字和字符
第三个版块包含了主要的功能按钮

1.2代码

下面是我部分代码（后面有我的详细介绍）

1.3具体语法介绍

1）v-for:这个类似于for循环，在vue中v-for 是一个用于渲染列表的指令

我这里使用v-for渲染随机生成的数字，和运算符。这样很大程度上节省了较多时间去创建更多的容器、标签。

texts是我在<script>中定义的数组
item：当前遍历到的数组元素值
index：当前元素的索引位置（从0开始）
texts：数据源数组
：key="index"：类似于数据库中表的主键，都是具有唯一标识。使用索引作为 key
{{item}}：显示当前遍历的内容

2）v-if：用于条件渲染一块内容，这块内容只会在指令的表达式返回真值时才被渲染。

我这里用v-if来显示规则，"show_tip"这个变量初始化为false（不显示具体规则）,只有点击“规则”才赋值为true


      使用给定的4个数字(每个数字必须且只能使用一次)，通过加、减、乘、除和括号运算，使最终结果等于24。

二、游戏中按钮功能

2.1按钮功能介绍

按钮大概有7个

规则：通过"show_tip"变量来确定是否显示规则。

    tipHandle() {    //规则展开
      this.show_tip = true
    },
    conHandle() {    //规则关闭
      this.show_tip = false
    },

数字/运算符：处理用户选择的数字和运算符

    numHandle(index) {    //对数字的处理
      if (this.str1 == 0)
        this.str1 = this.texts[index]    //赋值
      else
        this.str2 = this.texts[index]
      this.str = this.str + String(this.texts[index])    //转换成字符类型，str是要在文本框显示的
      this.texts.splice(index, 1)    //对选择的字符进行删除
    },
    openerHandle(index) {    //对运算符的处理
      this.open = this.openers[index]
      this.str = this.str + open
    },

确认：通过用户确定的操作数和运算符，进行计算。

canHandle() {    //计算
      if (this.str1 > 0 && this.str1 < 10 && this.str2 > 0 && this.str2 < 10 && this.open !== '') {
        switch (this.open) {
          case '+':
            this.sum = this.str1 + this.str2;
            break;
          case '-':
            this.sum = this.str1 - this.str2;
            break;
          case '*':
            this.sum = this.str1 * this.str2;
            break;
          case '/':
            this.sum = this.str1 / this.str2;
            break;
        }
        this.texts.push(this.sum)
        this.str1 = 0    //计算后数值又回到初始状态
        this.str2 = 0
        this.str = ""
        if (this.texts.length == 1 && this.sum == 24) {
          ++this.number;        //已解决的数量加1
          this.nextHandle()    //下一题（后面有介绍）
        }
      }
      else{
        alert('不能计算')
        this.clearHandle()    //清空，也就是重置（后面有介绍）
      }
    },
  }
}

下一题：生成随机数

nextHandle() {
      //this.totalTime=0;    每次点击下一题，计时要重新开始（我认为没必要）
      let i = 4;
      for (let j = 0; j < i; j++) {
        this.texts[j] = Math.floor(Math.random() * (9)) + 1
        //console.log(texts[0])
      }
      this.copy = this.texts
      this.sum = 0
      this.str = ""
      this.copy = [...this.texts]    //浅拷贝，copy这个数组是独立的，就是方便重置的。
      //this.copy = this.texts  这是引用赋值，对texts操作也会影响到copy，这里不能使用
    },

- Math.random() * 9 生成 0-8.999... 的随机数
- Math.floor() 向下取整得到 0-8
- +1 后得到 1-9
清空

clearHandle() {
      this.texts = [...this.copy]    //重置回之前的状态
      this.str = ""
      this.str1 = 0
      this.str2 = 0
    },

计时：

renewHandle() {
      if (!this.isok) return;
      if (this.isok) {
        this.totalTime++;
        const min = Math.floor(this.totalTime / 60);
        const sec = Math.floor(this.totalTime % 60);
        this.time = `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;
      }
      setTimeout(() => this.renewHandle(), 1000);    //1000是毫秒，也就是1秒。1秒后调用自身
    },

isok：来控制计时器是否启动
totalTime++: 累计经过的秒数
min: 分钟数（总秒数÷60取整）
sec: 秒数（总秒数÷60的余数）
padStart(2, '0'): 补零操作，确保显示为两位数
toString（）：转换成字符串
setTimeout():异步执行不会阻塞后续代码,在指定毫秒后执行回调函数

暂停：

stopHandle() {
      this.btn = this.isok ? "开始" : "暂停"
      this.isok = !this.isok;
      this.renewHandle();
    },

开始：

startHandle() {
      this.totalTime = 0
      this.renewHandle()    //重新计算
      this.nextHandle()    //随机数生成
    },

2.2代码

<script>
export default {
  data() {
    return {
      time: "00:00",
      totalTime: 0,
      isok: true,
      number: 0,
      show_tip: false,
      num: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      openers: ['+', '-', '*', '/'],
      texts: [0, 0, 0, 0],
      copy: [0, 0, 0, 0],
      btn: "暂停",
      str1: 0,
      str2: 0,
      sum: 0,
      str: "",
      open: ""
    }
  },
  methods: {
    tipHandle() {
      this.show_tip = true
    },
    conHandle() {
      this.show_tip = false
    },
    renewHandle() {
      if (!this.isok) return;
      if (this.isok) {
        this.totalTime++;
        const min = Math.floor(this.totalTime / 60);
        const sec = Math.floor(this.totalTime % 60);
        this.time = `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;
      }
      setTimeout(() => this.renewHandle(), 1000);
    },
    nextHandle() {
      //this.totalTime=0;
      let i = 4;
      for (let j = 0; j < i; j++) {
        this.texts[j] = Math.floor(Math.random() * (9)) + 1
        //console.log(texts[0])
      }
      this.sum = 0
      this.str = ""
      this.copy = [...this.texts]
      //this.copy = this.texts  这是引用赋值，对texts操作也会影响到copy，这里不能使用
    },
    clearHandle() {
      this.texts = [...this.copy]
      this.str = ""
      this.str1 = 0
      this.str2 = 0
    },
    stopHandle() {
      this.btn = this.isok ? "开始" : "暂停"
      this.isok = !this.isok;
      this.renewHandle();
    },
    startHandle() {
      this.totalTime = 0
      this.renewHandle()
      this.nextHandle()
    },
    numHandle(index) {
      if (this.str1 == 0)
        this.str1 = this.texts[index]
      else
        this.str2 = this.texts[index]
      this.str = this.str + String(this.texts[index])
      this.texts.splice(index, 1)
    },
    openerHandle(index) {
      this.open = this.openers[index]
      this.str = this.str + this.open
    },
    canHandle() {
      if (this.str1 > 0 && this.str1 < 10 && this.str2 > 0 && this.str2 < 10 && this.open !='') {
        switch (this.open) {
          case '+':
            this.sum = this.str1 + this.str2;
            break;
          case '-':
            this.sum = this.str1 - this.str2;
            break;
          case '*':
            this.sum = this.str1 * this.str2;
            break;
          case '/':
            this.sum = this.str1 / this.str2;
            break;
        }
        this.texts.push(this.sum)
        this.str1 = 0
        this.str2 = 0
        this.str = ""
        if (this.texts.length == 1 && this.sum == 24) {
          ++this.number;
          this.nextHandle()
        }
      }
      else{
        alert('不能计算')
        this.clearHandle()
      }
    },
  }
}
</script>

三、源代码

全部代码，包括css


<script>
export default {
  data() {
    return {
      time: "00:00",
      totalTime: 0,
      isok: true,
      number: 0,
      show_tip: false,
      num: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      openers: ['+', '-', '*', '/'],
      texts: [0, 0, 0, 0],
      copy: [0, 0, 0, 0],
      btn: "暂停",
      str1: 0,
      str2: 0,
      sum: 0,
      str: "",
      open: ""
    }
  },
  methods: {
    tipHandle() {
      this.show_tip = true
    },
    conHandle() {
      this.show_tip = false
    },
    renewHandle() {
      if (!this.isok) return;
      if (this.isok) {
        this.totalTime++;
        const min = Math.floor(this.totalTime / 60);
        const sec = Math.floor(this.totalTime % 60);
        this.time = `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;
      }
      setTimeout(() => this.renewHandle(), 1000);
    },
    nextHandle() {
      //this.totalTime=0;
      let i = 4;
      for (let j = 0; j < i; j++) {
        this.texts[j] = Math.floor(Math.random() * (9)) + 1
        //console.log(texts[0])
      }
      this.sum = 0
      this.str = ""
      this.copy = [...this.texts]
      //this.copy = this.texts  这是引用赋值，对texts操作也会影响到copy，这里不能使用
    },
    clearHandle() {
      this.texts = [...this.copy]
      this.str = ""
      this.str1 = 0
      this.str2 = 0
    },
    stopHandle() {
      this.btn = this.isok ? "开始" : "暂停"
      this.isok = !this.isok;
      this.renewHandle();
    },
    startHandle() {
      this.totalTime = 0
      this.renewHandle()
      this.nextHandle()
    },
    numHandle(index) {
      if (this.str1 == 0)
        this.str1 = this.texts[index]
      else
        this.str2 = this.texts[index]
      this.str = this.str + String(this.texts[index])
      this.texts.splice(index, 1)
    },
    openerHandle(index) {
      this.open = this.openers[index]
      this.str = this.str + this.open
    },
    canHandle() {
      if (this.str1 > 0 && this.str1 < 10 && this.str2 > 0 && this.str2 < 10 && this.open !='') {
        switch (this.open) {
          case '+':
            this.sum = this.str1 + this.str2;
            break;
          case '-':
            this.sum = this.str1 - this.str2;
            break;
          case '*':
            this.sum = this.str1 * this.str2;
            break;
          case '/':
            this.sum = this.str1 / this.str2;
            break;
        }
        this.texts.push(this.sum)
        this.str1 = 0
        this.str2 = 0
        this.str = ""
        if (this.texts.length == 1 && this.sum == 24) {
          ++this.number;
          this.nextHandle()
        }
      }
      else{
        alert('不能计算')
        this.clearHandle()
      }
    },
  }
}
</script>

发表于 2025-12-06 20:44 jzssuanfa 阅读(10) 评论(0) 收藏举报

刷新页面返回顶部

完整教程：使用前端框架vue做一个小游戏

一、游戏布局

1.1页面布局介绍

1.2代码

1.3具体语法介绍

二、游戏中按钮功能

2.1按钮功能介绍

2.2代码

三、源代码

导航