當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

创建数独小游戏uniapp/vue

發(fā)布時(shí)間：2023/12/14 vue 24 豆豆

生活随笔收集整理的這篇文章主要介紹了创建数独小游戏uniapp/vue 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

數(shù)獨(dú)是一種邏輯解謎游戲，它規(guī)則稍復(fù)雜，解題過程富有挑戰(zhàn)性。

游戲規(guī)則：很簡單。游戲棋盤是一個(gè)9x9的格網(wǎng)，被劃分成3x3個(gè)區(qū)域，每個(gè)區(qū)域是一塊九宮格。玩家需要在格內(nèi)填入1到9的數(shù)字，其中一些數(shù)字在游戲開始時(shí)已經(jīng)給出。每一行，每一列，以及每一塊九宮格區(qū)域內(nèi)的數(shù)字必須是唯一的，不允許出現(xiàn)重復(fù)。簡單的還需要又2*2以滿足初級(jí)玩家游玩。

首先需要做出棋盤，數(shù)據(jù)模式來源于接口返回值，大多為字符串格式，我們首先要把他轉(zhuǎn)換為多維數(shù)組。

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)]) } //輸出數(shù)據(jù)是 //gameData=> [['1','.','2','.'],['2','3','.','4'],['.','2','3','1'],['.','1','4','2'], ]

此時(shí)的數(shù)據(jù)就如同初級(jí)的4*4宮格數(shù)獨(dú)了，但是我們還需要區(qū)分常量和變量，點(diǎn)的是可以切換數(shù)據(jù)的，帶數(shù)字的則是引導(dǎo)常量。其次，還需要有標(biāo)記功能在單個(gè)宮格內(nèi)。

此時(shí)則可以渲染棋盤了

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宮格 // 點(diǎn)擊得當(dāng)前宮格checkCurrent(i, j) {const result = this.touchCurrent[0] == i && this.touchCurrent[1] == jreturn result}, //當(dāng)前定值的宮格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',}}, //核心算法：判斷是否存在同行同列或同單元格一致的用戶填入數(shù)據(jù)hitSame(i, j) {const needNum = this.userMap[i][j].key >= 0 ? this.userMap[i][j].key : this.userMap[i][j].id// //求左上角的點(diǎn)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++) {//行l(wèi)et 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//單元格內(nèi)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},// 設(shè)置棋盤宮內(nèi)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);}}}}

此時(shí)我們就完成了棋盤的開發(fā)。接下來需要底部的數(shù)字按鈕和操作按鈕

<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為真則是標(biāo)記模式<view class="word">{{ marked ? '填字' : '標(biāo)記' }}</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;}}}

首先點(diǎn)擊數(shù)字按鈕，將數(shù)字action存儲(chǔ)到data中，再宮格，獲取[i,j]也就是坐標(biāo)。再對數(shù)值的正確度進(jìn)行判斷。

// 方塊點(diǎn)擊事件 blockClick(i, j) {this.touchCurrent = [i, j] },// 點(diǎn)擊下方數(shù)字按鈕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) {//此時(shí)為標(biāo)記模式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)//結(jié)果判斷l(xiāng)et 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) {//游戲闖關(guān)成功，調(diào)用提交接口uni.showModal({content: '成功',showCancel: false,})// 彈窗提示}},

點(diǎn)擊底部的數(shù)字，會(huì)首先判斷是否標(biāo)記模式，標(biāo)記模式則會(huì)將數(shù)字push到該宮格內(nèi)的marked中。否則則會(huì)判斷userMap[i][j].key是否不為-1(非定值)，然后再將action賦值給userMap[i][j].key。頂部的textWrong則會(huì)判斷是否正確，錯(cuò)誤則標(biāo)紅并伴有回彈動(dòng)畫。之后actionChange中會(huì)重置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 ? '填字' : '標(biāo)記' }}</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' //標(biāo)記 export default {name: '',components: {marked,},data() {return {list: '',gameData: [],userMap: [],mapSku: 2,touchCurrent: [],action: '',marked: false,}},onLoad() {this.initData()},methods: {// 方塊點(diǎn)擊事件blockClick(i, j) {this.touchCurrent = [i, j]},// 點(diǎn)擊底部刪除按鈕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) {//當(dāng)前標(biāo)記方格清空this.userMap[i][j].marked = []return false}// 非標(biāo)記模式將當(dāng)前宮格內(nèi)的數(shù)值置空this.userMap[i][j].key = 0this.action = 0},// 點(diǎn)擊下方數(shù)字按鈕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) {//此時(shí)為標(biāo)記模式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)//結(jié)果判斷l(xiāng)et 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) {//游戲闖關(guān)成功，調(diào)用提交接口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},// 點(diǎn)擊得當(dāng)前宮格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) {// // 判斷是否存在同行同列或同單元格一致的用戶填入數(shù)據(jù)const needNum = this.userMap[i][j].key >= 0 ? this.userMap[i][j].key : this.userMap[i][j].id// //求左上角的點(diǎn)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++) {//行l(wèi)et 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//單元格內(nèi)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},// 設(shè)置棋盤宮內(nèi)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>

總結(jié)

以上是生活随笔為你收集整理的创建数独小游戏uniapp/vue的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：局域网网络流量监控_LINUX常见性能监
下一篇： Windows内核面试题（持续更新，目前