创建数独小游戏uniapp/vue

数独是一种逻辑解谜游戏，它规则稍复杂，解题过程富有挑战性。

游戏规则：很简单。游戏棋盘是一个9x9的格网，被划分成3x3个区域，每个区域是一块九宫格。玩家需要在格内填入1到9的数字，其中一些数字在游戏开始时已经给出。每一行，每一列，以及每一块九宫格区域内的数字必须是唯一的，不允许出现重复。简单的还需要又2*2以满足初级玩家游玩。

首先需要做出棋盘，数据模式来源于接口返回值，大多为字符串格式，我们首先要把他转换为多维数组。

let gameOriginData=1.2.23.4.231.142

for (let i = 0; i < gameOriginData.length; i += 4) {this.gameData.push([...gameOriginData.slice(i, i + 4)])
}
//输出数据是
//gameData=>
[['1','.','2','.'],['2','3','.','4'],['.','2','3','1'],['.','1','4','2'],
]

此时的数据就如同初级的4*4宫格数独了，但是我们还需要区分常量和变量，点的是可以切换数据的，带数字的则是引导常量。其次，还需要有标记功能在单个宫格内。

const kk = []for (let i = 0; i < this.gameData.length; i++) {kk[i] = []for (let j = 0; j < this.gameData[i].length; j++) {kk[i].push({id: this.gameData[i][j] == '.' ? '.' : parseInt(this.gameData[i][j]),marked: [],key: this.gameData[i][j] == '.' ? 0 : -1,//0则代表可以更改的值，-1代表定值不能改变})}}this.userMap = kk
//输出的数据结构是
//userMap =>
[[{id:1,key:-1,marked:[]},{id:'.',key:0,marked:[]},{id:2,key:-1,marked:[]},{id:'.',key:0,marked:[]},],[{id:2,key:-1,marked:[]},{id:3,key:-1,marked:[]},{id:'.',key:0,marked:[]},{id:4,key:-1,marked:[]},],[{id:'.',key:0,marked:[]},{id:2,key:-1,marked:[]},{id:3,key:-1,marked:[]},{id:1,key:-1,marked:[]},],[{id:'.',key:0,marked:[]},{id:1,key:-1,marked:[]},{id:4,key:-1,marked:[]},{id:2,key:0,marked:[]},]
]

此时则可以渲染棋盘了

html部分

<view class="qiPan"><view class="noticeView"><view v-for="(line, i) in userMap" :key="i" class="line"><viewv-for="(block, j) in line":key="j":class="{borderGreen: checkCurrent(i, j),block9: mapSku > 2,block4: mapSku == 2,}":style="[getBlockStyle(j, i)]"><viewv-if="block.key == -1":style="[getBlockStyleNpc(j, i)]":class="{textWrong: hitSame(i, j),textGrey: !hitSame(i, j),}">{{ block.id }}</view><viewv-else-if="block.key > 0"class="handleAction":class="{textWrong: hitSame(i, j),textGreen: !hitSame(i, j),rockStart: hitSame(i, j),}"@tap="blockClick(i, j)">{{ block.key }}</view><!-- 此处为空白宫格，可以点击 --><view v-else class="handleAction" @tap="blockClick(i, j)"></view></view></view>
</view>

js部分

//this.mapSku为2 则是2*2宫格 3则是3*3宫格
// 点击得当前宫格checkCurrent(i, j) {const result = this.touchCurrent[0] == i && this.touchCurrent[1] == jreturn result},
//当前定值的宫格cssgetBlockStyleNpc(i, j) {return {background: '#fffae1',width: '100%',height: '100%','border-top-left-radius': i == 0 && j == 0 ? '10rpx' : '0rpx','border-top-right-radius': j == 0 && i == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx','border-bottom-left-radius':i == 0 && j == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx','border-bottom-right-radius':i == this.mapSku * this.mapSku - 1 && j == this.mapSku * this.mapSku - 1? '10rpx': '0rpx',}},
//核心算法：判断是否存在同行同列或同单元格一致的用户填入数据hitSame(i, j) {const needNum = this.userMap[i][j].key >= 0 ? this.userMap[i][j].key : this.userMap[i][j].id// //求左上角的点const block_x = parseInt(i / this.mapSku) * this.mapSkuconst block_y = parseInt(j / this.mapSku) * this.mapSkuif (needNum == 0) return falsefor (let k = 0; k < this.mapSku * this.mapSku; k++) {//行let theNum = this.userMap[i][k].key >= 0 ? this.userMap[i][k].key : this.userMap[i][k].idif (theNum == needNum && theNum > 0 && j != k) return true//列theNum = this.userMap[k][j].key >= 0 ? this.userMap[k][j].key : this.userMap[k][j].idif (theNum == needNum && theNum > 0 && i != k) return true//单元格内const thex = block_x + parseInt(k % this.mapSku)const they = block_y + parseInt(k / this.mapSku)theNum =this.userMap[thex][they].key >= 0? this.userMap[thex][they].key: this.userMap[thex][they].idif (theNum == needNum && theNum > 0 && !(i == thex && j == they)) {return true}}return false},// 所有宫格宽高getBlockSize(val) {let result = 0if (val) {result = parseInt((680 + 4) / (this.mapSku * this.mapSku)) - 8} else {result = parseInt((680 + 4) / (this.mapSku * this.mapSku))}return result},// 设置棋盘宫内div的边框getBlockStyle(i, j) {return {width: this.getBlockSize() + 'rpx',height: this.getBlockSize() + 'rpx','over-flow': 'hidden','line-height': this.getBlockSize('lh') + 'rpx',// background: '#f8e7a4','border-top-left-radius': i == 0 && j == 0 ? '10rpx' : '0rpx','border-top-right-radius': j == 0 && i == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx','border-bottom-left-radius':i == 0 && j == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx','border-bottom-right-radius':i == this.mapSku * this.mapSku - 1 && j == this.mapSku * this.mapSku - 1? '10rpx': '0rpx',borderLeft:i == 0? '#ae7a36 4rpx solid': i % this.mapSku == 0? '#ae7a36 2rpx solid': '#dab88a 1rpx solid',borderRight:i == this.mapSku * this.mapSku - 1? '#ae7a36 4rpx solid': i % this.mapSku == this.mapSku - 1? '#ae7a36 2rpx solid': '#dab88a 1rpx solid',borderTop:j == 0? '#ae7a36 4rpx solid': j % this.mapSku == 0? '#ae7a36 2rpx solid': '#dab88a 1rpx solid',borderBottom:j == this.mapSku * this.mapSku - 1? '#ae7a36 4rpx solid': j % this.mapSku == this.mapSku - 1? '#ae7a36 2rpx solid': '#dab88a 1rpx solid',}},

css部分

.qiPan {padding-top: 20rpx;.noticeView {margin: 0 auto;border-radius: 10rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;.line {display: flex;flex-direction: row;align-items: center;justify-content: center;.handleAction {width: 100%;height: 100%;position: relative;}.block4 {font-size: 68rpx;text-align: center;}.block9 {font-size: 50rpx;text-align: center;}}.textWrong {background-color: #f14e28 !important;color: #6c4e27 !important;}.textGreen {color: #519d07;}.textGrey {color: #6c4e27;}.borderGreen {border: 4rpx solid #73d217 !important;}.rockStart {animation: chanDong 1s linear;}@keyframes chanDong {5% {-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);}6%,8%,10%,12% {-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 10deg);transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 10deg);}7%,9%,11% {-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);}13% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}}}}

此时我们就完成了棋盘的开发。接下来需要底部的数字按钮和操作按钮

<viewclass="actionUl":style="{ 'justify-content': mapSku * mapSku <= 4 ? 'space-around' : 'start' }"><viewv-for="(item, index) in mapSku * mapSku":key="index":class="{actionLi4: mapSku * mapSku <= 4,actionLi9: mapSku * mapSku > 4,}"@click="actionChange(item + 1)">{{ item + 1 }}</view><viewclass="bt":style="{ 'margin-left': mapSku * mapSku <= 4 ? '' : '36rpx' }"@click="marked = !marked">
//marked为真则是标记模式<view class="word">{{ marked ? '填字' : '标记' }}</view></view><viewclass="bt":style="{ 'margin-left': mapSku * mapSku <= 4 ? '' : '36rpx' }"@click="deleteSudo()"><view class="word">删除</view></view></view>

.actionUl {display: flex;flex-direction: row;flex-wrap: wrap;width: 680rpx;margin: 0 auto;padding-top: 50rpx;position: relative;z-index: 10;.actionLi4 {width: 126rpx;height: 126rpx;border-radius: 40rpx;border: solid 5rpx #fd6f10;font-size: 61rpx;text-align: center;line-height: 126rpx;font-weight: bold;cursor: pointer;margin-bottom: 20rpx;}.actionLi9:nth-child(7) {margin-right: 0;}.actionLi9 {width: 86rpx;margin-right: (78/6) + rpx;height: 86rpx;background-color: #ffab51;border-radius: 30rpx;border: solid 4rpx #fd6f10;font-size: 46rpx;text-align: center;line-height: 79rpx;font-weight: bold;cursor: pointer;margin-bottom: 20rpx;}.bt {width: 206rpx;height: 90rpx;border-radius: 24rpx;font-size: 34rpx;display: flex;flex-direction: row;align-items: center;justify-content: center;border: solid 5rpx #000000;text-align: center;line-height: 56rpx;cursor: pointer;position: relative;.icon {width: 34rpx;height: 34rpx;margin-right: 10rpx;}.word {padding-left: 10rpx;font-size: 34rpx;font-weight: bold;}}}

首先点击数字按钮，将数字action存储到data中，再宫格，获取[i,j]也就是坐标。再对数值的正确度进行判断。

// 方块点击事件
blockClick(i, j) {this.touchCurrent = [i, j]
},// 点击下方数字按钮async actionChange(val) {const that = thisif (this.touchCurrent.length == 0) {this.$tips.toast('请先选择方格')return false}const i = this.touchCurrent[0]const j = this.touchCurrent[1]this.action = valif (this.marked) {//此时为标记模式const io = this.userMap[i][j].marked.findIndex((value, index, arr) => {return value == val})if (io < 0) {this.userMap[i][j].marked.push(val)} else {this.userMap[i][j].marked.splice(io, 1)}this.$forceUpdate()return false}if (this.userMap[i][j].key != -1) {if (this.userMap[i][j].id != this.action) {this.userMap[i][j].key = parseInt(this.action)}this.$forceUpdate()}setTimeout(function () {if (that.hitSame(i, j)) {that.userMap[i][j].key = 0}}, 3000)//结果判断let canPass = truefor (let m = 0; m < this.mapSku * this.mapSku; m++) {for (let n = 0; n < this.mapSku * this.mapSku; n++) {if (this.hitSame(m, n) || this.userMap[m][n].key == 0) {canPass = falsebreak}}}if (canPass) {//游戏闯关成功，调用提交接口uni.showModal({content: '成功',showCancel: false,})// 弹窗提示}},

点击底部的数字，会首先判断是否标记模式，标记模式则会将数字push到该宫格内的marked中。否则则会判断userMap[i][j].key是否不为-1(非定值)，然后再将action赋值给userMap[i][j].key。顶部的textWrong则会判断是否正确，错误则标红并伴有回弹动画。之后actionChange中会重置userMap[i][j].key为0；

下面贴出完整代码

<template><view class="allPage"><view class="page"><view class="qiPan"><view class="noticeView"><view v-for="(line, i) in userMap" :key="i" class="line"><viewv-for="(block, j) in line":key="j":class="{borderGreen: checkCurrent(i, j),block9: mapSku > 2,block4: mapSku == 2,}":style="[getBlockStyle(j, i)]"><viewv-if="block.key == -1":style="[getBlockStyleNpc(j, i)]":class="{textWrong: hitSame(i, j),textGrey: !hitSame(i, j),}">{{ block.id }}</view><viewv-else-if="block.key > 0"class="handleAction":class="{textWrong: hitSame(i, j),textGreen: !hitSame(i, j),rockStart: hitSame(i, j),}"@tap="blockClick(i, j)">{{ block.key }}</view><!-- 此处为空白宫格，可以点击 --><view v-else class="handleAction" @tap="blockClick(i, j)"><marked:width="getBlockSize()":list="block.marked":marked="marked":action="action":map-sku="mapSku"/></view></view></view></view></view><viewclass="actionUl":style="{ 'justify-content': mapSku * mapSku <= 4 ? 'space-around' : 'start' }"><viewv-for="(item, index) in mapSku * mapSku":key="index":class="{actionLi4: mapSku * mapSku <= 4,actionLi9: mapSku * mapSku > 4,}"@click="actionChange(item + 1)">{{ item + 1 }}</view><viewclass="bt":style="{ 'margin-left': mapSku * mapSku <= 4 ? '' : '36rpx' }"@click="marked = !marked"><view class="word">{{ marked ? '填字' : '标记' }}</view></view><viewclass="bt":style="{ 'margin-left': mapSku * mapSku <= 4 ? '' : '36rpx' }"@click="deleteSudo()"><view class="word">删除</view></view></view></view></view>
</template><script>
import { mapState } from 'vuex'
import marked from './components/marked.vue' //标记
export default {name: '',components: {marked,},data() {return {list: '',gameData: [],userMap: [],mapSku: 2,touchCurrent: [],action: '',marked: false,}},onLoad() {this.initData()},methods: {// 方块点击事件blockClick(i, j) {this.touchCurrent = [i, j]},// 点击底部删除按钮deleteSudo() {const that = thisif (this.touchCurrent.length == 0) {this.$tips.toast('请先选择方格')return false}const i = this.touchCurrent[0]const j = this.touchCurrent[1]if (this.marked) {//当前标记方格清空this.userMap[i][j].marked = []return false}// 非标记模式 将当前宫格内的数值置空this.userMap[i][j].key = 0this.action = 0},// 点击下方数字按钮async actionChange(val) {const that = thisif (this.touchCurrent.length == 0) {this.$tips.toast('请先选择方格')return false}const i = this.touchCurrent[0]const j = this.touchCurrent[1]this.action = valif (this.marked) {//此时为标记模式const io = this.userMap[i][j].marked.findIndex((value, index, arr) => {return value == val})if (io < 0) {this.userMap[i][j].marked.push(val)} else {this.userMap[i][j].marked.splice(io, 1)}this.$forceUpdate()return false}if (this.userMap[i][j].key != -1) {if (this.userMap[i][j].id != this.action) {this.userMap[i][j].key = parseInt(this.action)}this.$forceUpdate()}setTimeout(function () {if (that.hitSame(i, j)) {that.userMap[i][j].key = 0}}, 3000)//结果判断let canPass = truefor (let m = 0; m < this.mapSku * this.mapSku; m++) {for (let n = 0; n < this.mapSku * this.mapSku; n++) {if (this.hitSame(m, n) || this.userMap[m][n].key == 0) {canPass = falsebreak}}}if (canPass) {//游戏闯关成功，调用提交接口uni.showModal({content: '成功',showCancel: false,})// 弹窗提示}},// 初始化游戏async initData() {await this.loadData()},async loadData() {const gameOriginData = '1.2.23.4.231.142'for (let i = 0; i < gameOriginData.length; i += 4) {this.gameData.push([...gameOriginData.slice(i, i + 4)])}const kk = []for (let i = 0; i < this.gameData.length; i++) {kk[i] = []for (let j = 0; j < this.gameData[i].length; j++) {kk[i].push({id: this.gameData[i][j] == '.' ? '.' : parseInt(this.gameData[i][j]),marked: [],key: this.gameData[i][j] == '.' ? 0 : -1,})}}this.userMap = kk},// 点击得当前宫格checkCurrent(i, j) {const result = this.touchCurrent[0] == i && this.touchCurrent[1] == jreturn result},getBlockStyleNpc(i, j) {return {background: '#fffae1',width: '100%',height: '100%','border-top-left-radius': i == 0 && j == 0 ? '10rpx' : '0rpx','border-top-right-radius': j == 0 && i == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx','border-bottom-left-radius':i == 0 && j == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx','border-bottom-right-radius':i == this.mapSku * this.mapSku - 1 && j == this.mapSku * this.mapSku - 1? '10rpx': '0rpx',}},hitSame(i, j) {// // 判断是否存在同行同列或同单元格一致的用户填入数据const needNum = this.userMap[i][j].key >= 0 ? this.userMap[i][j].key : this.userMap[i][j].id// //求左上角的点const block_x = parseInt(i / this.mapSku) * this.mapSkuconst block_y = parseInt(j / this.mapSku) * this.mapSkuif (needNum == 0) return falsefor (let k = 0; k < this.mapSku * this.mapSku; k++) {//行let theNum = this.userMap[i][k].key >= 0 ? this.userMap[i][k].key : this.userMap[i][k].idif (theNum == needNum && theNum > 0 && j != k) return true//列theNum = this.userMap[k][j].key >= 0 ? this.userMap[k][j].key : this.userMap[k][j].idif (theNum == needNum && theNum > 0 && i != k) return true//单元格内const thex = block_x + parseInt(k % this.mapSku)const they = block_y + parseInt(k / this.mapSku)theNum =this.userMap[thex][they].key >= 0? this.userMap[thex][they].key: this.userMap[thex][they].idif (theNum == needNum && theNum > 0 && !(i == thex && j == they)) {return true}}return false},// 宫格宽高getBlockSize(val) {let result = 0if (val) {result = parseInt((680 + 4) / (this.mapSku * this.mapSku)) - 8} else {result = parseInt((680 + 4) / (this.mapSku * this.mapSku))}return result},// 设置棋盘宫内div的边框getBlockStyle(i, j) {return {width: this.getBlockSize() + 'rpx',height: this.getBlockSize() + 'rpx','over-flow': 'hidden','line-height': this.getBlockSize('lh') + 'rpx',// background: '#f8e7a4','border-top-left-radius': i == 0 && j == 0 ? '10rpx' : '0rpx','border-top-right-radius': j == 0 && i == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx','border-bottom-left-radius':i == 0 && j == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx','border-bottom-right-radius':i == this.mapSku * this.mapSku - 1 && j == this.mapSku * this.mapSku - 1? '10rpx': '0rpx',borderLeft:i == 0? '#ae7a36 4rpx solid': i % this.mapSku == 0? '#ae7a36 2rpx solid': '#dab88a 1rpx solid',borderRight:i == this.mapSku * this.mapSku - 1? '#ae7a36 4rpx solid': i % this.mapSku == this.mapSku - 1? '#ae7a36 2rpx solid': '#dab88a 1rpx solid',borderTop:j == 0? '#ae7a36 4rpx solid': j % this.mapSku == 0? '#ae7a36 2rpx solid': '#dab88a 1rpx solid',borderBottom:j == this.mapSku * this.mapSku - 1? '#ae7a36 4rpx solid': j % this.mapSku == this.mapSku - 1? '#ae7a36 2rpx solid': '#dab88a 1rpx solid',}},},
}
</script>
<style lang="scss" scoped>
.allPage {background: #ffe97e;min-height: 100vh;.page {position: relative;width: 100%;.qiPan {padding-top: 20rpx;.noticeView {margin: 0 auto;border-radius: 10rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;.line {display: flex;flex-direction: row;align-items: center;justify-content: center;.handleAction {width: 100%;height: 100%;position: relative;}.block4 {font-size: 68rpx;text-align: center;}.block9 {font-size: 50rpx;text-align: center;}}.textWrong {background-color: #f14e28 !important;color: #6c4e27 !important;}.textGreen {color: #519d07;}.textGrey {color: #6c4e27;}.borderGreen {border: 4rpx solid #73d217 !important;}.rockStart {animation: chanDong 1s linear;}@keyframes chanDong {5% {-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);}6%,8%,10%,12% {-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 10deg);transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 10deg);}7%,9%,11% {-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);}13% {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}}}}.actionUl {display: flex;flex-direction: row;flex-wrap: wrap;width: 680rpx;margin: 0 auto;padding-top: 50rpx;position: relative;z-index: 10;.actionLi4 {width: 126rpx;height: 126rpx;border-radius: 40rpx;border: solid 5rpx #fd6f10;font-size: 61rpx;text-align: center;line-height: 126rpx;font-weight: bold;cursor: pointer;margin-bottom: 20rpx;}.actionLi9:nth-child(7) {margin-right: 0;}.actionLi9 {width: 86rpx;margin-right: (78/6) + rpx;height: 86rpx;background-color: #ffab51;border-radius: 30rpx;border: solid 4rpx #fd6f10;font-size: 46rpx;text-align: center;line-height: 79rpx;font-weight: bold;cursor: pointer;margin-bottom: 20rpx;}.bt {width: 206rpx;height: 90rpx;border-radius: 24rpx;font-size: 34rpx;// color: #ffffff;display: flex;flex-direction: row;align-items: center;justify-content: center;border: solid 5rpx #000000;cursor: pointer;position: relative;.icon {width: 34rpx;height: 34rpx;margin-right: 10rpx;}.word {padding-left: 10rpx;font-size: 34rpx;font-weight: bold;}}}}
}
</style>

marked组件代码如下

<template><view class="marked" :style="{ padding: mapSku > 2 ? '4rpx' : '0rpx' }"><view class="markedLi" :style="{ 'margin-left': mapSku > 2 ? '6rpx' : '0rpx' }"><viewv-for="(item, index) in markedList":key="index"class="markedItem":style="[getBlockStyleMaked()]">{{ item }}</view></view></view>
</template><script>
export default {name: 'Marked',props: {mapSku: {type: Number,default: 2,},list: {type: Array,default: () => [],},action: {type: Number,default: 0,},marked: {type: Boolean,default: false,},width: {type: [Number, String],default: 0,},},data() {return {markedList: [],}},watch: {list: function (val) {this.markedList = val},},created() {console.log('width是', this.width)this.markedList = this.list},methods: {getBlockStyleMaked() {const number4 = parseInt((this.width - 20) / this.mapSku) + 'rpx'const number9 = parseInt((this.width - 36) / this.mapSku) + 'rpx'console.log('number4是', number4)return {'text-align': 'center','font-size': (this.mapSku > 2 ? 20 : 30) + 'rpx',width: this.mapSku > 2 ? number9 : number4,height: this.mapSku > 2 ? number9 : number4,'line-height': this.mapSku > 2 ? number9 : number4,}},},
}
</script><style scoped lang="scss">
.marked {width: 100%;height: 100%;display: flex;background: #f8e7a4;flex-direction: row;align-items: center;position: absolute;left: 0;top: 0;.markedLi {display: flex;flex-direction: row;flex-wrap: wrap;text-align: center;margin: 0 auto;}
}
</style>