Jquery、Vue实现的数独小游戏
效果图
上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到数独游戏</title>
<script src="js/vue2.6.js"></script>
<script src="js/jquery-1.11.0.js"></script>
</head>
<body style="background-color: beige;">
<div id="game"
style="margin: 50px 400px 50px 400px;border: 1px solid blue;width: 600px;height: 600px;padding: 20px;background-color: aquamarine;">
<div>
<button type="button" @click="begin_game" id="begin">开始游戏</button>
<button type="button" @click="reset_game">重新游戏</button>
<button type="button" @click="getInfo">游戏说明</button>
<label>时间监控：{{start}}
<progress id="p1" value="0" max="3600"></progress>
{{end}}</label>
</div>
<table style="margin: 10px 10px;" border="0" cellspacing="0" cellpadding="0">
<!-- <input v-for="(value,index) in matrix" :value="value">-->
<tr v-for="(row,index) in matrix" style="margin: 0px 0px 0px 0px;">
<td v-for="(value,index2) in row" style="display: inline-block;margin: 0px 0px 0px 0px;">
<div style="width: 60px;height: 60px;border: 1px green solid;background-color: aliceblue;position: relative;"
:id="index+''+index2">
<input @blur="judge" :id="'input'+index+''+index2"
style="text-align: center; font-size: 40px;font-family: '宋体'; display: none;width: 55px;height: 55px;background-color: antiquewhite;">
<label style="text-align: center;width: 55px;height: 55px;font-size: 40px;margin: 5px;position: absolute;"
:id="'label'+index+''+index2">{{value}}</label>
</div>
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: "#game",
data: {
start: '00:00',
end: '60:00',
matrix: [//已知的数独数组，之后要将其打乱
[9, 7, 8, 3, 1, 2, 6, 4, 5],
[3, 1, 2, 6, 4, 5, 9, 7, 8],
[6, 4, 5, 9, 7, 8, 3, 1, 2],
[7, 8, 9, 1, 2, 3, 4, 5, 6],
[1, 2, 3, 4, 5, 6, 7, 8, 9],
[4, 5, 6, 7, 8, 9, 1, 2, 3],
[8, 9, 7, 2, 3, 1, 5, 6, 4],
[2, 3, 1, 5, 6, 4, 8, 9, 7],
[5, 6, 4, 8, 9, 7, 2, 3, 1]
],
arr:[],
head:['A','B','C','D','E','F','G','H','I']
},
methods: {
judge(){
let arr = this.arr;
let flag = true;
for (let i = 0; i < arr.length; i++) {
let yuShu = (arr[i]) % 9;
let shang = parseInt((arr[i]) / 9);
//console.log(yuShu, shang);
let _num = shang + '' + yuShu;
let value_input = $("#input"+_num).val();
//let patrn = /^(-)?\d+(\.\d+)?$/;
/*if (parseFloat(value_input).toString() == "NaN"){
alert('输入的不是数字！');
$("#input"+_num).val('');
return;
}
if (parseInt(value_input) > 9 || parseInt(value_input) < 0){
alert('值超出范围！');
$("#input"+_num).val('');
return;
}*/
let temp = value_input.split('');
if (temp.length > 1){
alert('输入不正确！');
$("#input"+_num).val('');
return;
}
if (value_input != this.matrix[shang][yuShu]){
//alert('不相等');
flag = false;
}
}
if (flag){
alert('恭喜你，闯关成功！');
}
},
reset_Row(num) {
let flag = num % 3;
let row_1;
let row_2;
if (flag == 1) {
row_1 = num + 1 - 1;
row_2 = num + 2 - 1;
} else if (flag == 2) {
row_1 = num - 1 - 1;
row_2 = num + 1 - 1;
} else {
row_1 = num - 1 - 1;
row_2 = num - 2 - 1;
}
let temp = this.matrix[row_1];
this.matrix[row_1] = this.matrix[row_2];
this.matrix[row_2] = temp;
},
reset_Col(num) {
let flag = num % 3;
let row_1;
let row_2;
if (flag == 1) {
row_1 = num + 1 - 1;
row_2 = num + 2 - 1;
} else if (flag == 2) {
row_1 = num - 1 - 1;
row_2 = num + 1 - 1;
} else {
row_1 = num - 1 - 1;
row_2 = num - 2 - 1;
}
for (let i = 0; i < 9; i++) {
let temp = this.matrix[i][row_1];
this.matrix[i][row_1] = this.matrix[i][row_2];
this.matrix[i][row_2] = temp;
}
},
reset_Matrix() {
//行变换
let row_1 = parseInt(Math.random() * (3 - 1 + 1) + 1, 10);
//console.log('row_1', row_1);
this.reset_Row(row_1);
let row_2 = parseInt(Math.random() * (6 - 4 + 1) + 4, 10);
//console.log('row_2', row_2);
this.reset_Row(row_2);
let row_3 = parseInt(Math.random() * (9 - 7 + 1) + 7, 10);
//console.log('row_3', row_3);
this.reset_Row(row_3);
//列变换
let col_1 = parseInt(Math.random() * (3 - 1 + 1) + 1, 10);
//console.log('col_1', col_1);
this.reset_Col(col_1);
let col_2 = parseInt(Math.random() * (6 - 4 + 1) + 4, 10);
//console.log('col_2', col_2);
this.reset_Col(col_2);
let col_3 = parseInt(Math.random() * (9 - 7 + 1) + 7, 10);
//console.log('col_3', col_3);
this.reset_Col(col_3);
},
randomNums(n, min, max) {
let arr = [];
for (let i = 0; i < n; i++) {
let ran = Math.ceil(Math.random() * (max - min) + min);
while (this.isExist(arr, ran)) {
ran = Math.ceil(Math.random() * (max - min) + min);
}
arr[i] = ran;
}
return arr;
},
isExist(arr, ran) {
for (let i = 0; i < arr.length; i++) {
if (arr[i] == ran) {
return true;
}
}
return false;
},
reset_Layout() {
let arr = this.randomNums(51, 1, 81);
this.arr = arr;
//console.log(arr);
for (let i = 0; i < arr.length; i++) {
let yuShu = arr[i] % 9;
let shang = parseInt(arr[i] / 9);
//console.log(yuShu, shang);
let _num = shang + '' + yuShu;
//console.log(_num);
$("#label" + _num).hide();
$("#input" + _num).show();
}
console.log(this.matrix);
},
begin_game() {
console.log('开始');
for (let i = 0; i < 10; i++) {
this.reset_Matrix();
}
this.reset_Layout();//重新布局页面
let timer = setInterval(() => {//开始计时
let current = $("#p1").val();
if (eval(current) >= 3600) {
alert('游戏结束，你输了，再接再厉！');
window.location.reload();
}
$("#p1").val(current + 1);
let time = $("#p1").val();
let second = time % 60;
let temp = time / 60;
let minute = parseInt(temp);
//console.log(time, second, minute);
let end_second = 60 - second;
let end_minute = 60 - minute - 1;
if (end_second == 60) {
end_second = 0;
end_minute++;
}
second = second < 10 ? '0' + second : second;
minute = minute < 10 ? '0' + minute : minute;
end_second = end_second < 10 ? '0' + end_second : end_second;
end_minute = end_minute < 10 ? '0' + end_minute : end_minute;
this.start = `${minute}:${second}`;
this.end = `${end_minute}:${end_second}`;
}, 1000);
$("#begin").attr({"disabled": "disabled"});
},
reset_game() {
if (confirm('是否结束游戏，开始新游戏？') == true) {
console.log('结束');
$("#begin").removeAttr("disabled");
window.location.reload();
}
},
getInfo() {
alert('数独不会玩？横竖要满足有1~9九个数字！');
}
}
});
</script>
</body>
</html>
转载请注明出处
扫一扫
897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
