cocorobo-24/src/components/pages/twentyFour.vue

<template>
  <el-container class="content">
    <el-header style="text-align: center">
      <div @click="goTo('/index')" class="return"></div>
      <div style="margin: 0 auto">入门级</div>
    </el-header>

    <el-main>
      <div class="main">
        <div class="top">
          <div style="color: #fff">
            当前为第<span style="color: #2c628a; margin: 0 5px">{{
              count + 1
            }}</span
            >关
          </div>
          <!-- <div class="left"></div> -->
          <div class="right">
            <div class="ts" @click="reduceTs"></div>
            <div class="howPlay" @click="dialogVisible1 = true"></div>
          </div>
        </div>
        <!-- 计算公式 -->

        <!-- <el-card shadow="always">
					{{ result }}
				</el-card> -->

        <!-- 随机数字 -->

        <el-row :gutter="20">
          <el-col :span="12" v-for="(num, index) in randomNum" :key="index">
            <div class="card-sep">
              <el-card
                v-if="index == 0"
                class="cardF"
                v-show="!num == '' || num === 0"
                :class="{
                  xuanFIsClick:
                    (num1 == num && nIndex == index) ||
                    (num2 == num && nIndex2 == index),
                }"
                shadow="always"
                @click.native="getVal(num, index)"
              >
                {{ num }}
              </el-card>
              <el-card
                v-else-if="index == 1"
                class="cardS"
                v-show="!num == '' || num === 0"
                :class="{
                  xuanSIsClick:
                    (num1 == num && nIndex == index) ||
                    (num2 == num && nIndex2 == index),
                }"
                shadow="always"
                @click.native="getVal(num, index)"
              >
                {{ num }}
              </el-card>
              <el-card
                v-else-if="index == 2"
                class="cardT"
                v-show="!num == '' || num === 0"
                :class="{
                  xuanTIsClick:
                    (num1 == num && nIndex == index) ||
                    (num2 == num && nIndex2 == index),
                }"
                shadow="always"
                @click.native="getVal(num, index)"
              >
                {{ num }}
              </el-card>
              <el-card
                v-else
                class="cardFour"
                v-show="!num == '' || num === 0"
                :class="{
                  xuanFourIsClick:
                    (num1 == num && nIndex == index) ||
                    (num2 == num && nIndex2 == index),
                }"
                shadow="always"
                @click.native="getVal(num, index)"
              >
                {{ num }}
              </el-card>
            </div>
          </el-col>

          <!-- <el-col :span="12">
						    <el-card shadow="hover">
						      3
						    </el-card>
						  </el-col>
						</el-row>
						<el-row :gutter="20">
						  <el-col :span="12">
						    <el-card shadow="always">
						      8
						    </el-card>
						  </el-col>
						  <el-col :span="12">
						    <el-card shadow="hover">
						      9
						    </el-card>
						  </el-col> -->
        </el-row>

        <!-- 运算符选择 -->
        <div class="operator">
          <div
            class="add"
            :class="{ addIsClick: calc == '+' }"
            @click="add"
          ></div>

          <div
            class="inc"
            :class="{ reduceIsClick: calc == '-' }"
            @click="inc"
          ></div>
        </div>
        <!-- <el-row class="h-sep">
					<el-col :span="4"> -->
        <!-- <el-button type="primary" plain icon="el-icon-plus" @click="add"
							>加</el-button
						> -->
        <!-- <div class="add" @click="add"></div>
					</el-col> -->

        <!-- <el-col :span="4"> -->
        <!-- <el-button type="primary" plain icon="el-icon-minus" @click="inc"
							>减</el-button
						> -->
        <!-- <div class="inc" @click="inc"></div>
					</el-col> -->

        <!-- <el-col :span="4">
						<el-button type="primary" plain icon="el-icon-close" @click="mul"
							>乘</el-button
						>
					</el-col>

					<el-col :span="4">
						<el-button type="primary" plain icon="" @click="div"
							>/&nbsp;&nbsp;除</el-button
						>
					</el-col>

					<el-col :span="4">
						<el-button
							type="primary"
							plain
							icon="el-icon-arrow-left"
							@click="left"
							>括</el-button
						>
					</el-col>

					<el-col :span="4">
						<el-button
							type="primary"
							plain
							icon="el-icon-arrow-right"
							@click="right"
							>号</el-button
						>
					</el-col> -->
        <!-- </el-row> -->

        <!-- <el-row :gutter="20" class="footBtn">
					<el-col :span="4">
						<el-button
							type="primary"
							plain
							icon="el-icon-success"
							@click="confirm"
							>确定</el-button
						>
					</el-col>
					<el-col :span="4">
						<el-button
							type="primary"
							plain
							icon="el-icon-refresh-right"
							@click="clean"
							>清除</el-button
						>
					</el-col>
					<el-col :span="4">
						<el-button
							type="primary"
							plain
							icon="el-icon-refresh"
							@click="resert"
							>换题</el-button
						>
					</el-col>
				</el-row> -->
        <div class="bottom">
          <div class="bottomT">
            <div class="answer" @click="reduceTs"></div>
            <div class="clean" @click="clean"></div>
          </div>
          <div class="next" @click="confirm"></div>
        </div>
      </div>
    </el-main>
    <!-- <div
			id="cas"
			style="
				position: absolute;
				width: 200px;
				height: 200px;
				left: 200px;
				z-index: 99999;
			"
		></div> -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="80%"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div class="tsAnswer">{{ rightAnswer }}</div>
      <dir class="haveCount">今天还剩{{ ts }}次提示喔</dir>
    </el-dialog>
    <el-dialog
      title="入门级玩法介绍"
      :visible.sync="dialogVisible1"
      :append-to-body="true"
      width="80%"
      :before-close="handleClose"
      class="dialog_diy1"
    >
      <div style="font-size: 0.9rem">
        24 点是把 4 个整数(一般是正整数)通过加减乘除运算,使最后的计算结果是 24
        的一个数学游戏,可以考验人的智力和数学敏感性。任意抽取4个数字,用加、减、乘、除(可加括号)把牌面上的数算成
        24。
      </div>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible2"
      :append-to-body="true"
      width="80%"
      :before-close="handleClose"
      class="dialog_diy1"
    >
      <div style="margin-bottom: 15px">您已成功算成24点，恭喜你！</div>
      <div
        style="
          width: 90px;
          height: 25px;
          border: 1px solid #75a8da;
          text-align: center;
          margin: 0 auto;
          background: #75a8da;
          color: #fff;
          line-height: 25px;
        "
        @click="dialogVisible2 = false"
      >
        确定
      </div>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible3"
      :append-to-body="true"
      width="80%"
      :before-close="handleClose"
      class="dialog_diy1"
    >
      <div style="margin-bottom: 15px">计算错误！</div>
      <div
        style="
          width: 90px;
          height: 25px;
          border: 1px solid #75a8da;
          text-align: center;
          margin: 0 auto;
          background: #75a8da;
          color: #fff;
          line-height: 25px;
        "
        @click="dialogVisible3 = false"
      >
        确定
      </div>
    </el-dialog>
    <audio ref="source">
      <source src="../../assets/twentyFour/clickM.mp3" type="audio/mpeg" />
    </audio>
    <audio ref="vm">
      <source src="../../assets/twentyFour/vM.mp3" type="audio/mpeg" />
    </audio>
    <audio ref="errs">
      <source src="../../assets/twentyFour/err.mp3" type="audio/mpeg" />
    </audio>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      randomNum: ["", "", "", ""],
      result: "",
      tempResult: "",
      flag0: false,
      flag1: false,
      flag2: false,
      flag3: false,
      calc: "",
      num1: "",
      nIndex: "",
      nIndex2: "",
      num2: "",
      saveRandomNum: ["", "", "", ""],
      count: 0,
      rightAnswer: "",
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      ts: 3,
      tiMu: [],
      nowGq: 0,
    };
  },

  mounted() {
    this.getRandomNum();
  },
  watch: {},

  methods: {
    cards(randomNum) {
      var array = randomNum;
      var args = [];
      if (array.length == 4) {
        for (var i = 0; i < 4; i++) {
          var j = parseInt(array[i]);
          if (isNaN(j)) {
            return;
          }
          args[i] = j;
        }
        var ret = this.find(args, 24);
        var a = args.sort().toString();
        if (ret.length == 0) {
          this.getRandomNum();
        } else {
          if (this.tiMu.length > 0) {
            for (var i = 0; i < this.tiMu.length; i++) {
              if (this.tiMu[i] == a) {
                this.getRandomNum();
              }
            }
            this.rightAnswer = ret + "=24";
          } else {
            this.rightAnswer = ret + "=24";
          }
        }
      } else {
        console.log("len: " + array.length);
      }
    },

    handleClose(done) {
      done();
    },

    goTo(path) {
      this.$router.push(path);
    },

    reduceTs() {
      this.dialogVisible = true;
      if (this.nowGq > 0) {
        return;
      }
      this.ts -= 1;
      this.nowGq++;
      if (this.ts == -1) {
        this.rightAnswer = "今日提示已达上限";
        this.ts = 0;
      }
    },

    find3(a, b, target) {
      if (a + b === target) {
        return a + "+" + b;
      } else if (a - b == target) {
        return a + "-" + b;
      } else if (b - a == target) {
        return b + "-" + a;
      }
      return "";
    },
    remove(array, index) {
      var out = [];
      var j = 0;
      for (var i = 0; i < array.length; i++) {
        if (i == index) {
          continue;
        }
        out[j] = array[i];
        j++;
      }
      return out;
    },
    find(array, target) {
      // js 中必须用var声明，限制作用域。
      var out = "";
      var ret = "";
      var i = 0;
      var left;

      if (array.length == 2) {
        out = this.find3(array[0], array[1], target);
        if (out.length > 0) {
          return "(" + out + ")";
        }
        return "";
      }

      var x;
      for (i = 0; i < array.length; i++) {
        x = array[i];
        left = this.remove(array, i);

        // if (target != 0 && (target % x == 0 || x % target == 0)) {
        // 	if (target > x) {
        // 		ret = find(left, target / x);
        // 		if (ret.length > 0) {
        // 			out = x + "*" + ret;
        // 			break;
        // 		}
        // 	} else {
        // 		ret = find(left, x / target);
        // 		if (ret.length > 0) {
        // 			out = x + "/" + ret;
        // 			break;
        // 		}
        // 	}
        // }

        if (target > x) {
          ret = this.find(left, target - x);
          if (ret.length > 0) {
            out = x + "+" + ret;
            break;
          }
        } else {
          ret = this.find(left, x - target);
          if (ret.length > 0) {
            out = x + "-" + ret;
            break;
          }
        }

        // ret = this.find(left, x * target);
        // if (ret.length > 0) {
        // 	out = ret + "/" + x;
        // 	break;
        // }
        ret = this.find(left, target + x);
        if (ret.length > 0) {
          out = ret + "-" + x;
          break;
        }
      }

      if (out.length > 0) {
        if (array.length == 4) {
          return out;
        } else {
          return "(" + out + ")";
        }
      }
      return "";
    },
    getRandomNum() {
      this.randomNum = [];
      for (var i = 0; i < 4; i++) {
        // 生成1-9的随机数

        this.randomNum.push(Math.floor(Math.random(9) * 10 + 1));
      }
      this.saveRandomNum = [...this.randomNum];
      this.cards(this.randomNum);
    },
    // isTrue(){

    // },
    getVal(num, index) {
      var num = parseInt(num);
      var b = 0;
      let a = 0;
      this.$refs.source.play();
      if (this.num1 && this.calc) {
        this.num2 = num;
      } else {
        this.num1 = num;
      }

      if (this.nIndex === index) {
        this.nIndex = "";
        this.num1 = "";
      } else if (this.nIndex === "") {
        this.nIndex = index;
      } else if (this.nIndex !== "" && this.calc) {
        this.nIndex2 = index;
      } else {
        this.nIndex = index;
      }
      if (
        (this.nIndex || this.nIndex === 0) &&
        (this.nIndex2 || this.nIndex2 === 0) &&
        this.calc
      ) {
        // this.result += num;
        if (this.calc === "+") {
          this.result = this.num1 + this.num2;
          this.randomNum[this.nIndex] = "";
          this.randomNum[this.nIndex2] = this.result;
          if (this.result == "24") {
            for (var i = 0; i < this.randomNum.length; i++) {
              if (this.randomNum[i] != "") {
                b++;
              } else {
                a++;
              }
            }
            if (b == 1) {
              this.dialogVisible2 = true;
              this.$refs.vm.play();
            } else if (a == this.randomNum.length - 1) {
              this.dialogVisible3 = true;
              this.$refs.errs.play();
            }
          } else {
            for (var i = 0; i < this.randomNum.length; i++) {
              if (this.randomNum[i] == "") {
                a++;
              }
            }
            if (a == this.randomNum.length - 1) {
              this.dialogVisible3 = true;
              this.$refs.errs.play();
            }
          }
          this.resertFlag();
        } else if (this.calc === "-") {
          this.result = this.num1 - this.num2;
          this.randomNum[this.nIndex] = "";
          this.randomNum[this.nIndex2] = this.result;
          if (this.result == "24") {
            for (var i = 0; i < this.randomNum.length; i++) {
              if (this.randomNum[i] != "") {
                b++;
              } else {
                a++;
              }
            }
            if (b == 1) {
              this.dialogVisible2 = true;
              this.$refs.vm.play();
            } else if (a == this.randomNum.length - 1) {
              this.dialogVisible3 = true;
              this.$refs.errs.play();
            }
          } else {
            for (var i = 0; i < this.randomNum.length; i++) {
              if (this.randomNum[i] == "") {
                a++;
              }
            }
            if (a == this.randomNum.length - 1) {
              this.dialogVisible3 = true;
              this.$refs.errs.play();
            }
          }
          this.resertFlag();
        }
      }
      // this.randomNum[0] = num;
    },

    // 重置flag标识

    resertFlag() {
      this.nIndex = "";
      this.nIndex2 = "";
      this.calc = "";
      this.num2 = "";
      this.num1 = "";
    },

    add() {
      this.$refs.source.play();
      if (this.calc == "+") {
        this.calc = "";
      } else {
        this.result += "+";
        this.calc = "+";
      }
    },

    inc() {
      this.$refs.source.play();
      if (this.calc == "-") {
        this.calc = "";
      } else {
        this.result += "-";
        this.calc = "-";
      }
    },

    // mul() {
    // 	this.result += "*";
    // },

    // div() {
    // 	this.result += "/";
    // },

    // left() {
    // 	this.result += "(";
    // },

    // right() {
    // 	this.result += ")";
    // },

    clean() {
      this.result = "";
      this.randomNum = [...this.saveRandomNum];
      this.resertFlag();
    },

    confirm() {
      // 计算结果：直接将字符串转成js语句执行, 也可以用队列来实现
      var count = 0;
      for (var i = 0; i < this.randomNum.length; i++) {
        if (this.randomNum[i] == "") {
          count++;
        }
      }
      this.tempResult = eval(this.result);
      if (count == 3) {
        if (this.tempResult === 24) {
          this.$message.success("计算正确！");
          this.tiMu.push([...this.saveRandomNum].sort().toString());

          // this.$message({

          //   showClose: true,

          //   message: '正确',

          //   type: 'success'

          // });
          this.nowGq = 0;
          this.result = "";
          this.count += 1;
          if (this.count == 4) {
            this.$message.success("恭喜你通关成功");
            this.$router.push("/index");
          } else {
            this.getRandomNum();
          }
        } else {
          this.$message.error("计算错误！");

          this.result = "";

          this.resertFlag();
        }
      } else {
        this.$message.error("每个数字都要用到！");
      }
    },

    resert() {
      //刷新题目
      this.getRandomNum();

      this.resertFlag();

      this.result = "";
    },
  },
  created() {
    this.getRandomNum();
  },
};
</script>



<style scoped>
html,
body,
#app {
  text-align: center;
  height: 100%;
  margin: 0;
  padding: 0;
}

.el-header {
  height: 40px !important;
  background: #f4f4f4;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

.el-container {
  height: 100%;
}

.el-row {
  margin-top: 2.5rem;
  height: 260px;
}

.el-col-12 {
  height: 130px;
}

.el-card__body {
  height: 3.75rem;
  font-size: xx-large;
  line-height: 3.75rem;
}

.footBtn {
  margin-left: 0 !important;
}

.card-sep {
  margin-bottom: 0.5rem;
}

.cardF {
  background-image: url("../../assets/twentyFour/xuanF.png");
  height: 120px;
  opacity: 0.4;
}
.cardS {
  background-image: url("../../assets/twentyFour/xuanS.png");
  height: 120px;
  opacity: 0.4;
}
.cardT {
  background-image: url("../../assets/twentyFour/xuanT.png");
  height: 120px;
  opacity: 0.4;
}
.cardFour {
  background-image: url("../../assets/twentyFour/xuanFour.png");
  height: 120px;
  opacity: 0.4;
}

.h-sep {
  margin-top: 1.375rem;
}

.top {
  height: 35px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.content,
.left,
.ts,
.howPlay,
.cardF,
.cardS,
.cardT,
.cardFour,
.add,
.inc,
.answer,
.clean,
.next,
.xuanFIsClick,
.xuanSIsClick,
.xuanTIsClick,
.xuanFourIsClick,
.addIsClick,
.reduceIsClick {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.content {
  background-image: url("../../assets/twentyFour/gameBg.png");
  position: relative;
}
.content >>> .el-main {
  padding: 0 !important;
  overflow: unset !important;
}

.left {
  background-image: url("../../assets/twentyFour/now.png");
  width: 40%;
  height: 20px;
}
.right {
  width: 60%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  height: 35px;
}
.ts {
  background-image: url("../../assets/twentyFour/ts.png");
  width: 35px;
}
.howPlay {
  background-image: url("../../assets/twentyFour/howPlay.png");
  width: 35px;
  margin-left: 5px;
}

.card-sep >>> .is-always-shadow {
  box-shadow: none !important;
}
.card-sep >>> .el-card {
  border: none !important;
  background-color: transparent !important;
}
.card-sep >>> .el-card__body {
  color: #fff;
  text-align: center;
  height: 120px;
  line-height: 120px;
  font-size: 60px;
  padding: 0 !important;
}

.add {
  background-image: url("../../assets/twentyFour/add.png");
  height: 60px;
  width: 60px;
}
.inc {
  background-image: url("../../assets/twentyFour/reduce.png");
  height: 60px;
  width: 60px;
}
.operator {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 35px;
}
.bottom {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin-top: 25px;
}
.bottomT {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.answer {
  background-image: url("../../assets/twentyFour/answer.png");
  height: 45px;
  width: 50%;
}
.clean {
  background-image: url("../../assets/twentyFour/clean.png");
  height: 45px;
  width: 50%;
}
.next {
  background-image: url("../../assets/twentyFour/next.png");
  height: 50px;
  width: 100%;
  margin-top: 10px;
}
.xuanFIsClick {
  background-image: url("../../assets/twentyFour/xuanFIsClick.png") !important;
  opacity: 1;
}
.xuanSIsClick {
  background-image: url("../../assets/twentyFour/xuanSIsClick.png") !important;
  opacity: 1;
}
.xuanTIsClick {
  background-image: url("../../assets/twentyFour/xuanTIsClick.png") !important;
  opacity: 1;
}
.xuanFourIsClick {
  background-image: url("../../assets/twentyFour/xuanFourIsClick.png") !important;
  opacity: 1;
}
.addIsClick {
  background-image: url("../../assets/twentyFour/addIsClick.png") !important;
  opacity: 1;
}
.reduceIsClick {
  background-image: url("../../assets/twentyFour/reduceIsClick.png") !important;
  opacity: 1;
}
.dialog_diy >>> .el-dialog__header {
  background: #fa7258;
  text-align: center;
  padding: 10px 0 !important;
}
.dialog_diy1 >>> .el-dialog__header {
  background: #f6c14a;
  text-align: center;
  padding: 10px 0 !important;
}
.dialog_diy1 >>> .el-dialog__body {
  padding: 20px;
}
.dialog_diy1 >>> .el-dialog__title {
  color: #fff !important;
}
.dialog_diy >>> .el-dialog__title {
  color: #fff !important;
}
.tsAnswer {
  color: #fa7258;
  font-size: 20px;
  text-align: center;
}
.haveCount {
  text-align: center;
  padding: 0;
  margin-top: 20px;
  font-size: 11px;
  color: #cbcbcb;
  font-family: FZShuTi;
}
.dialog_diy >>> .el-dialog__headerbtn {
  background: url("../../assets/twentyFour/close.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  top: 13px !important;
  right: 13px !important;
}
.dialog_diy1 >>> .el-dialog__headerbtn {
  background: url("../../assets/twentyFour/close.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  top: 13px !important;
  right: 13px !important;
}
.dialog_diy >>> .el-dialog__close,
.dialog_diy1 >>> .el-dialog__close {
  color: transparent !important;
}

.return {
  background: url("../../assets/twentyFour/fanhui.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 25px;
  height: 25px;
  position: absolute;
}
</style>