<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>24点</title>
<!-- 引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://lib.baomitu.com/element-ui/2.13.2/index.js"></script>
<!-- <script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="https://cdn.bootcss.com/canvas-nest.js/2.0.4/canvas-nest.js"></script> -->
</head>
<body>
<div id="app" class="app">
<el-row style='margin-top: 20px;'>
<el-form ref="form" label-width='80px'>
<el-col :span="5">
<el-form-item label="输入框1">
<el-input v-model="input1"></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="输入框2">
<el-input v-model="input2"></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="输入框3">
<el-input v-model="input3"></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="输入框4">
<el-input v-model="input4"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-button type="primary" plain icon="el-icon-success" @click='confirm'>确定</el-button>
</el-col>
</el-form>
</el-row>
<div style='border:2px solid pink;padding:20px'>
<el-row>
<el-col :span="24">
<div style="margin-bottom:20px">不加括号</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
所有(总共:{{result.length}}个)
<div v-for='(item,index) in result'
style='padding:5px;display: flex;justify-content: space-between;border: 1px solid cyan;'>
<div>{{index+1}} </div>
<div>{{item}} </div>
</div>
</el-col>
<el-col :span="12">
结果等于24(总共:{{result24.length}}个)
<div v-for='(item,index) in result24'
style='padding:5px;display: flex;justify-content: space-between;border: 1px solid cyan;'>
<div>{{index+1}} </div>
<div>{{item}} </div>
</div>
</el-col>
</el-row>
</div>
<div style='border:2px solid red;padding:20px;margin-top: 30px;'>
<el-row>
<el-col :span="24">
<div style="margin-bottom:20px">加括号</div style="margin-bottom:20px">
</el-col>
</el-row>
<el-row>
<el-col :span="8">
所有(总共:{{r.length}}个)
<div v-for='(item,index) in r'
style='padding:5px;display: flex;justify-content: space-between;border: 1px solid cyan;'>
<div>{{index+1}} </div>
<div>{{item}} </div>
</div>
</el-col>
<el-col :span="8">
所有结果等于24(总共:{{r24.length}}个)
<div v-for='(item,index) in r24'
style='padding:5px;display: flex;justify-content: space-between;border: 1px solid cyan;'>
<div>{{index+1}} </div>
<div>{{item}} </div>
</div>
</el-col>
<el-col :span="8">
去除多余括号结果等于24(总共:{{newSetR24.length}}个)
<div v-for='(item,index) in newSetR24'
style='padding:5px;display: flex;justify-content: space-between;border: 1px solid cyan;'>
<div>{{index+1}} </div>
<div>{{item}} </div>
</div>
</el-col>
</el-row>
</div>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app', //选择器
data: {
input1: '',
input2: '',
input3: '',
input4: '',
result: [],
result24: [],
r: [],
r24: [],
newSetR24: []
},
methods: {
/**
* 方法1：直接使用js的eval方法
* */
confirm() {
if (this.input1 && this.input2 && this.input3 && this.input4) {
this.result = [];
this.result24 = [];
this.r = [];
this.r24 = [];
this.newSetR24 = [];
// 运算法则
let soul = ['+', '-', '*', '/'];
let list = [this.input1, this.input2, this.input3, this.input4]
// let list = [1, 2, 3, 4]
let a = list[0];
let b = list[1];
let c = list[2];
let d = list[3];
// 锁住第一个数字位置
for (let i = 0; i < 4; i++) {
// 锁住第二个数字位置
for (let j = 0; j < 4; j++) {
// 锁住第三个数字位置
for (let k = 0; k < 4; k++) {
// =========数据是字符串：用的方法1和2============================
// //不加括号
// let s = `${a}${soul[i]}${b}${soul[j]}${c}${soul[k]}${d}`;
// let z = this.evil(s)
// // let z = eval(s) eval方法有些不能用，就用上面的this.evil()方法代替
// // this.myEval(s)
// if (z == 24) {
// this.result24.push(s + '=' + z)
// }
// this.result.push(s + '=' + z)
// //加括号
// let s1 = `(${a}${soul[i]}${b})${soul[j]}${c}${soul[k]}${d}`;
// let z1 = eval(s1)
// if (z1 == 24) {
// this.r24.push(s1 + '=' + z1)
// }
// //去重1
// if (z1 == 24) {
// if (['+', '-'].includes(soul[j]) || ['*', '/'].includes(soul[i])) {
// //找出所有可以去除括号的条件
// } else {
// this.newSetR24.push(s1 + '=' + z1)
// }
// }
// let s2 = `${a}${soul[i]}(${b}${soul[j]}${c})${soul[k]}${d}`;
// let z2 = eval(s2)
// if (z2 == 24) {
// this.r24.push(s2 + '=' + z2)
// }
// //去重2
// if (z2 == 24) {
// if (['+'].includes(soul[i]) || (['-'].includes(soul[i]) && ['*', '/'].includes(soul[j])) || (['*'].includes(soul[i]) && ['*', '/'].includes(soul[j]))) {
// //找出所有可以去除括号的条件
// } else {
// this.newSetR24.push(s2 + '=' + z2)
// }
// }
// let s3 = `${a}${soul[i]}${b}${soul[j]}(${c}${soul[k]}${d})`;
// let z3 = eval(s3)
// if (z3 == 24) {
// this.r24.push(s3 + '=' + z3)
// }
// //去重3
// if (z3 == 24) {
// if (['+'].includes(soul[j]) || (['-'].includes(soul[j]) && ['*', '/'].includes(soul[k])) || (['*'].includes(soul[j]) && ['*', '/'].includes(soul[k]))) {
// //找出所有可以去除括号的条件
// } else {
// this.newSetR24.push(s3 + '=' + z3)
// }
// }
// let s4 = `(${a}${soul[i]}${b}${soul[j]}${c})${soul[k]}${d}`;
// let z4 = eval(s4)
// if (z4 == 24) {
// this.r24.push(s4 + '=' + z4)
// }
// //去重4
// if (z4 == 24) {
// if (['+', '-'].includes(soul[k]) || (['*', '/'].includes(soul[k]) && ['*', '/'].includes(soul[i]) && ['*', '/'].includes(soul[j]))) {
// //找出所有可以去除括号的条件
// } else {
// this.newSetR24.push(s4 + '=' + z4)
// }
// }
// let s5 = `${a}${soul[i]}(${b}${soul[j]}${c}${soul[k]}${d})`;
// let z5 = eval(s5)
// if (z5 == 24) {
// this.r24.push(s5 + '=' + z5)
// }
// //去重5
// if (z5 == 24) {
// if (['+'].includes(soul[i]) || (['-'].includes(soul[i]) && ['*', '/'].includes(soul[j]) && ['*', '/'].includes(soul[k])) || (['*'].includes(soul[i]) && ['*', '/'].includes(soul[j]) && ['*', '/'].includes(soul[k]))) {
// //找出所有可以去除括号的条件
// } else {
// this.newSetR24.push(s5 + '=' + z5)
// }
// }
// let s6 = `(${a}${soul[i]}${b})${soul[j]}(${c}${soul[k]}${d})`;
// let z6 = eval(s6)
// if (z6 == 24) {
// this.r24.push(s6 + '=' + z6)
// }
// //去重6
// if (z6 == 24) {
// if (['+'].includes(soul[j]) || (['-'].includes(soul[j]) && ['+', '-', '*', '/'].includes(soul[i])) || (['-'].includes(soul[j]) && ['*', '/'].includes(soul[k])) || (['*'].includes(soul[j]) && ['*', '/'].includes(soul[i]) && ['*', '/'].includes(soul[k]))) {
// //找出所有可以去除括号的条件
// } else {
// this.newSetR24.push(s6 + '=' + z6)
// }
// }
// this.r.push(s1 + '=' + z1, s2 + '=' + z2, s3 + '=' + z3,
// s4 + '=' + z4, s5 + '=' + z5, s6 + '=' + z6)
// =======数据是数组：用的方法3========================
let s = [a, soul[i], b, soul[j], c, soul[k], d,]
let q=this.createSuffixExp(s)
let w=this.calcExp(q)
let str = `${a}${soul[i]}${b}${soul[j]}${c}${soul[k]}${d}`;
if (w == 24) {
this.result24.push(str + '=' + w)
}
this.result.push(str + '=' + w)
//加括号
let s1 = ['(',a, soul[i], b,')', soul[j], c, soul[k], d,];
let q1=this.createSuffixExp(s1)
let w1=this.calcExp(q1)
let str1 = `(${a}${soul[i]}${b})${soul[j]}${c}${soul[k]}${d}`;
if (w1 == 24) {
this.r24.push(str1 + '=' + w1)
}
//去重1
if (w1 == 24) {
if (['+', '-'].includes(soul[j]) || ['*', '/'].includes(soul[i])) {
//找出所有可以去除括号的条件
} else {
this.newSetR24.push(str1 + '=' + w1)
}
}
let s2 = [a, soul[i], '(',b, soul[j], c, ')',soul[k], d,];
let q2=this.createSuffixExp(s2)
let w2=this.calcExp(q2)
let str2 = `${a}${soul[i]}(${b}${soul[j]}${c})${soul[k]}${d}`;
if (w2 == 24) {
this.r24.push(str2 + '=' + w2)
}
//去重2
if (w2 == 24) {
if (['+'].includes(soul[i]) || (['-'].includes(soul[i]) && ['*', '/'].includes(soul[j])) || (['*'].includes(soul[i]) && ['*', '/'].includes(soul[j]))) {
//找出所有可以去除括号的条件
} else {
this.newSetR24.push(str2 + '=' + w2)
}
}
let s3 = [a, soul[i], b, soul[j],'(', c,soul[k], d, ')'];
let q3=this.createSuffixExp(s3)
let w3=this.calcExp(q3)
let str3 = `${a}${soul[i]}${b}${soul[j]}(${c}${soul[k]}${d})`;
if (w3 == 24) {
this.r24.push(str3 + '=' + w3)
}
//去重3
if (w3 == 24) {
if (['+'].includes(soul[j]) || (['-'].includes(soul[j]) && ['*', '/'].includes(soul[k])) || (['*'].includes(soul[j]) && ['*', '/'].includes(soul[k]))) {
//找出所有可以去除括号的条件
} else {
this.newSetR24.push(str3 + '=' + w3)
}
}
let s4 = ['(',a, soul[i], b, soul[j], c, ')',soul[k], d];
let q4=this.createSuffixExp(s4)
let w4=this.calcExp(q4)
let str4 = `(${a}${soul[i]}${b}${soul[j]}${c})${soul[k]}${d}`;
if (w4 == 24) {
this.r24.push(str4 + '=' + w4)
}
//去重4
if (w4 == 24) {
if (['+', '-'].includes(soul[k]) || (['*', '/'].includes(soul[k]) && ['*', '/'].includes(soul[i]) && ['*', '/'].includes(soul[j]))) {
//找出所有可以去除括号的条件
} else {
this.newSetR24.push(str4 + '=' + w4)
}
}
let s5 = [a, soul[i],'(', b, soul[j], c,soul[k], d, ')'];
let q5=this.createSuffixExp(s5)
let w5=this.calcExp(q5)
let str5 = `${a}${soul[i]}(${b}${soul[j]}${c}${soul[k]}${d})`;
if (w5 == 24) {
this.r24.push(str5 + '=' + w5)
}
//去重5
if (w5 == 24) {
if (['+'].includes(soul[i]) || (['-'].includes(soul[i]) && ['*', '/'].includes(soul[j]) && ['*', '/'].includes(soul[k])) || (['*'].includes(soul[i]) && ['*', '/'].includes(soul[j]) && ['*', '/'].includes(soul[k]))) {
//找出所有可以去除括号的条件
} else {
this.newSetR24.push(str5 + '=' + w5)
}
}
let s6 = ['(',a, soul[i], b, ')', soul[j],'(', c,soul[k], d, ')'];
let q6=this.createSuffixExp(s6)
let w6=this.calcExp(q6)
let str6 = `(${a}${soul[i]}${b})${soul[j]}(${c}${soul[k]}${d})`;
if (w6 == 24) {
this.r24.push(str6 + '=' + w6)
}
//去重6
if (w6 == 24) {
if (['+'].includes(soul[j]) || (['-'].includes(soul[j]) && ['+', '-', '*', '/'].includes(soul[i])) || (['-'].includes(soul[j]) && ['*', '/'].includes(soul[k])) || (['*'].includes(soul[j]) && ['*', '/'].includes(soul[i]) && ['*', '/'].includes(soul[k]))) {
//找出所有可以去除括号的条件
} else {
this.newSetR24.push(str6 + '=' + w6)
}
}
this.r.push(str1 + '=' + w1,str2 + '=' + w2,str3 + '=' + w3,str4 + '=' + w4,str5 + '=' + w5,str6 + '=' + w6,)
}
}
}
} else {
this.$message.error('请输入数字');
}
},
/**
* 方法2：用evil代替js的eval方法
* */
//计算表达式的值
evil(fn) {
var Fn = Function; //一个变量指向Function，防止有些前端编译工具报错
return new Fn('return ' + fn)();
},
/**
* 方法3：自己计算，通过中缀表达式转后缀表达式的方法
* */
//将中缀表达式转换成后缀表达式
// 这里传入的arr必须是一个数组，不然没法处理大于等于10的数
createSuffixExp(arr) {
let suffixExp = []//数字栈
let opeStack = []//符号栈
let numReg = /^[0-9]+$/;
for (let i of arr) {
if (numReg.test(i)) {
suffixExp.push(i);
} else if (['*', '/'].indexOf(i) >= 0) {
if (['*', '/'].indexOf(opeStack[opeStack.length - 1]) > -1) {// 如果运算符里有优先级相同的，就先弹栈，再压栈
suffixExp.push(opeStack.pop());
opeStack.push(i);
continue;
}
opeStack.push(i);
} else if ([')'].indexOf(i) >= 0) {
// 弹栈，直到弹出来的是左括号为止
let ele = opeStack.pop();//这个是返回的去除最后一个后的新数组
while (ele !== '(') {
suffixExp.push(ele);
ele = opeStack.pop();
}
} else if (i === '(') {
opeStack.push(i);
} else if (opeStack.length > 0) {
// 如果没有括号隔着，不会有*在+的下面
while (opeStack.length > 0 && opeStack[opeStack.length - 1] !== '(') {
suffixExp.push(opeStack.pop());
}
opeStack.push(i);
} else {
opeStack.push(i);
}
}
while (opeStack.length > 0) {
suffixExp.push(opeStack.pop());
}
return suffixExp
},
//计算
calcExp(arr) {
while (arr.length > 1) {
for (let i = 0; i < arr.length; i++) {
if (['+', '-', '*', '/'].indexOf(arr[i]) > -1) {
let num1 = Number(arr[i - 2]);
let num2 = Number(arr[i - 1]);
let ret = 0;
switch (arr[i]) {
case '+':
ret = num1 + num2;
break;
case '-':
ret = num1 - num2;
break;
case '*':
ret = num1 * num2;
break;
case '/':
ret = num1 / num2;
break;
}
arr.splice(i - 2, 3, ret);//splice的替换方法，参数1：起始下标，参数2：替换几个数，参数3：替换的数据
break;
}
}
}
// 使用pop是为了置空arr，从而让js的垃圾回收机制收回内存。
//这里使用pop方法是因为最后一个数据算出来是[10],相当于提取一下最后一个数据
let result=arr.pop()
return result;
},
}
})
</script>
<style type="text/css">
html,
body,
#app {
margin: 0;
padding: 0;
width: 100%;
text-align: center;
/* border: 1px solid crimson; */
}
</style>
</html>
24点游戏 VUE
于 2022-08-09 09:29:11 首次发布
扫一扫
3383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
