用vue開發一個所謂的數獨
1.前言
最近的後臺管理系統頁面，功能暫時沒有新的需求，就在想首頁放什麼東西，最近我想到的就是放個所謂的數獨，爲何是所謂的數獨，由於規則不一樣於標準的數獨，只要求每一行每一列數字不同就能夠了！這個實例也是基於vue的，代碼分享給你們。給你們代碼，並非要讓你們直接拷貝代碼，而是但願能讓你們當作是一個練手的項目，或者學習到知識。若是你們以爲我哪裏寫得很差，寫錯了，歡迎指出，讓你們交流意見，一塊兒進步。代碼上傳到github了：有須要的能夠star一下！vue-demoscss
2.運行效果
3.實現步驟
實現步驟，感受說得有點繞，建議你們邊寫邊看文章，這樣不會懵。或者直接去看源碼（ sudoku），把源碼看懂！這個項目也不復雜！
3-1.準備數據和排版
排版的html+css代碼我很少說了，排版很簡單，這個相信都難不倒你們的。複雜一點的就是數據的交互！
下面開始第一步，把數獨的數據先準備好，數據是什麼，你們都知道，就是像下面這樣的數據！html
排版出來的效果就是下面這樣。vue
html代碼以下git
<div class="num-table" @mouseleave="hoverCol=''" :class="{'shake':isShake}">
<!--遍歷每一行-->
<div v-for="row,index in allNum" class="num-row chearfix">
<!--遍歷行裏面的每一列-->
<div v-for="num1,indexSub in row" class="num-col">
{{allNumText[index][indexSub]}}
</div>
</div>
</div>複製代碼
代碼也很簡單，以下github
mounted(){
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let row = [], rowCol = 0;
for (let i = 0, len = arr1.length; i < len; i++) {
row = Object.assign([], arr1);
this.allNum.push(row);
//刪除第一個數字並記錄下來
rowCol = arr1.splice(0, 1)[0];
//在最後面插入數字
arr1.push(rowCol)
}
}複製代碼
你們也能夠發現，這個數據，的每一行和每一列的數字都是不一樣樣的！數組
3-2.打亂行
以後就是隨機打亂順序了，打亂順序這個得保證一個前提，就是保證每一行每一列的數字都不同。這樣的話，我用了一個簡單粗暴的方法-以行或者列爲單位，進行打亂。好比，第一行和第三行進行位置交互，第一列和第五列進行位置的交換。下面說下以行爲單位的打亂順序！
行的打亂，很簡單，就是隨機打亂數組而已！一行代碼搞定！bash
this.allNum.sort((n1, n2) => Math.random() - 0.5);
複製代碼
3-3.打亂列
行打亂了，下面進行以列爲單位的打亂，這個稍微複雜一點。
你們想下，好比第二列是第五列的值進行交換，那就是每一行的第二個格子的值和第五個格子的值進行交換，那麼就須要遍歷每一行！來進行交換，至於前面說的第二列和第五列的這個列數，能夠用一個函數實現！
下面看代碼！微信
//隨機獲取兩列的索引
function randomText() {
let rondomIndex = 0, rondomIndexAfter = 0;
//獲取第一列的索引
rondomIndex = Math.floor(Math.random() * 9);
function randomDo() {
rondomIndexAfter = Math.floor(Math.random() * 9);
//若是第一列和第二列索引同樣，第二列的索引再次從新隨機獲取
if (rondomIndexAfter === rondomIndex) {
randomDo();
}
}
randomDo();
//返回兩列的索引
return [rondomIndex, rondomIndexAfter]
}
//打亂列
let randomArr = [], nowValue = 0;
//一樣遍歷9次
for (let i = 0; i < 9; i++) {
randomArr = Object.assign([], randomText());
//遍歷每一行，給每一行的隨機兩列交換值
for (let j = 0, len = this.allNum.length; j < len; j++) {
//隨機兩列交換值
nowValue = this.allNum[j][randomArr[0]];
this.allNum[j][randomArr[0]] = this.allNum[j][randomArr[1]];
this.allNum[j][randomArr[1]] = nowValue;
}
}
複製代碼
3-3.隨機掏空單元格
掏空單元格就是把一些格子隨機設空，而後讓玩數獨的人。把這些單元格給填上！
需求，我如今實現的就是，每一行有把兩個格子設空，這裏個人作法是，把每個格子的座標先記錄下來，而後再從記錄的座標裏面隨機獲取座標，用獲取到的座標，進行設空！
首先，獲取全部點的座標dom
//記錄全部座標
let rowText = '', arrText = []
for (let i = 0; i < 9; i++) {
rowText = ''
for (let j = 0; j < 9; j++) {
rowText += i + '-' + j + ',';
}
arrText.push(rowText.substr(0, rowText.length - 1))
}
console.log(arrText);
複製代碼
看到這個座標，你們很容易的知道，數組的一個元素，就是第一行，‘0-0’就是第一行第一個格子。數組最後一個元素，就是最後一行，‘8-8’就是最後一行，最後一個格子，其餘如此類推！
下面進行隨機掏空，代碼也很簡單！函數
//隨機掏空
let nowItme = [], _option, nowOption = [];
for (let i = 0; i < 9; i++) {
//抽取當前行的全部座標
nowItme = arrText[i].split(',');
nowOption = [];
//當前行的隨機兩個座標掏空
for (let j = 0; j < 2; j++) {
//抽取當前行的隨機一個座標
_option = Math.floor(Math.random() * nowItme.length);
//分割座標的x,y
nowOption = nowItme.splice(_option,1)[0].split("-");
this.allNum[nowOption[0]][nowOption[1]] = '';
}
}
複製代碼
這樣相信你們都以爲奇怪，下面進行下樣式的該寫，就是把設空了的格子的樣式改一下！.no這個class對應的樣式我在css那裏寫好了，你們注意下。
<!--遍歷每一行-->
<div v-for="row,index in allNum" class="num-row chearfix">
<!--遍歷行裏面的每一列-->
<!--
no:被掏空數組的樣式
-->
<div v-for="num1,indexSub in row" :class="{'no':num1===''}" class="num-col">
{{allNumText[index][indexSub]}}
</div>
</div>
複製代碼
3-4.顯示數字鍵盤
首先，我簡單的用一個流程圖說下邏輯，以下
而後關於數字鍵盤的位置，看下圖（數字鍵盤的樣式我很少說了，就是一個是相對定位，一個絕對定位的設置而已）
如上圖，我點擊的是第一行第三個格子，首先，我期待被點擊的格子的樣式有所改變，方便我區分，這個不難，用一個class改變樣式就能夠了，這個能夠看下面的代碼，我用一個.cur的class控制樣式。還有一個就是期待數字鍵盤在第二行，第四個格子那裏出現。這樣的話，你們就知道，數字鍵盤的位置是怎麼定位的了！數字鍵盤的top就是，被點擊格子所在的行的索引+1
60（60是格子的寬高），
60（60是格子的寬高）。好比上圖，第一行第三個格子，
left就是，被點擊格子所在的列的索引+1
top=(0+1)*60+'px',left=(2+1)*60+'px'。
代碼以下
<!--遍歷每一行-->
<div v-for="row,index in allNum" class="num-row chearfix">
<!--遍歷行裏面的每一列-->
<!--
no:被掏空數組的樣式
cur:格子被點擊時觸發，被點擊的格子樣式
-->
<div v-for="num1,indexSub in row"
:class="{'no':num1==='', 'cur':curRow===index&&indexSub===curCol}"
@click="showCheck(index,indexSub)" class="num-col">
{{allNumText[index][indexSub]}}
</div>
</div>
<!--數字鍵盤-->
<div class="num-check chearfix" :style="{'top':(curRow+1)*60+'px','left':(curCol+1)*60+'px'}"
v-show="checkShow">
<ul>
<li @click="inputText(1)">1</li>
<li @click="inputText(2)">2</li>
<li @click="inputText(3)">3</li>
<li @click="inputText(4)">4</li>
<li @click="inputText(5)">5</li>
<li @click="inputText(6)">6</li>
<li @click="inputText(7)">7</li>
<li @click="inputText(8)">8</li>
<li @click="inputText(9)">9</li>
</ul>
</div>複製代碼
js代碼
/**
* @description 顯示數字鍵盤
* @param i1
* @param i2
*/
showCheck(i1, i2){
//點擊的格子是不是被掏空的格子
if (this.allNum[i1][i2] !== '') {
return
}
//點擊的格子若是是上一次點擊的格子（當前格子）
if (i1 === this.curRow && i2 === this.curCol) {
//隱藏數字鍵盤，curRow和curCol設空
this.checkShow = false;
this.curRow = '';
this.curCol = '';
}
else {
//隱藏數字鍵盤，curRow和curCol分別設置成當前的點
this.checkShow = true;
this.curRow = i1;
this.curCol = i2;
}
},
複製代碼
運行效果
3-5.高亮顯示同行同列
這一步很簡單，首先，高亮顯示行，你們都知道怎麼作了，就是行對應的div，設置一個:hover，而後對應設置單元格的樣式而已！這個很少說！
而後，高亮顯示列，複雜一點，可是也很簡單，原理我想你們也知道，就是當鼠標進如格子的時候，在data裏面，用一個變量儲存進入的格子的列的索引，而後加上判斷，若是格子的列的索引等於進入的格子的列的索引。就加上一個class，這裏我用.cur-col。代碼以下
<!--遍歷每一行-->
<div v-for="row,index in allNum" class="num-row clear">
<!--遍歷行裏面的每一列-->
<!--
no:被掏空數組的樣式
cur:格子被點擊時觸發，被點擊的格子樣式
cur-col:鼠標進入的時候觸發，和被點擊格子同一列的格子的樣式
-->
<div v-for="num1,indexSub in row"
:class="{'no':num1==='', 'cur':curRow===index&&indexSub===curCol, 'cur-col':hoverCol===indexSub}"
@click="showCheck(index,indexSub)" @mouseenter="hoverCol=indexSub;" class="num-col">
{{allNumText[index][indexSub]}}
</div>
</div>
複製代碼
運行效果
3-6.填寫操做和錯誤提示
這一步的操做函數，我直接發代碼吧，看代碼比我說的會清晰些，畢竟說的有點繞
<!--遍歷每一行-->
<div v-for="row,index in allNum" class="num-row clear">
<!--遍歷行裏面的每一列-->
<!--
no:被掏空數組的樣式
cur:格子被點擊時觸發，被點擊的格子樣式
cur-col:鼠標進入的時候觸發，和被點擊格子同一列的格子的樣式
err：填寫錯誤的時候觸發的樣式
-->
<div v-for="num1,indexSub in row"
:class="{'no':num1==='', 'cur':curRow===index&&indexSub===curCol, 'cur-col':hoverCol===indexSub, 'err':(optionNow.x===index&&optionNow.y===indexSub)||(optionNowInRow.x===index&&optionNowInRow.y===indexSub)||(optionNowInCol.x===index&&optionNowInCol.y===indexSub)}"
@click="showCheck(index,indexSub)" @mouseenter="hoverCol=indexSub;" class="num-col">
{{allNumText[index][indexSub]}}
</div>
</div>複製代碼
js代碼
inputText(_text){
//*****************************檢查前的初始化
let _row = this.curRow, _col = this.curCol;
this.curRow = '';
this.curCol = '';
this.isErr = false;
this.optionNow = {
x: '',
y: '',
}
this.optionNowInRow = {
x: '',
y: '',
}
this.optionNowInCol = {
x: '',
y: '',
}
//*****************************檢查行
//根據當前格子進行賦值
this.allNumText[_row][_col] = _text;
let rowCheck = Object.assign(this.allNumText[_row], []);
this.checkShow = false;
for (let i = 0, len = rowCheck.length; i < len; i++) {
//若是值同樣，可是座標不同，就是填寫錯誤
if (_text === rowCheck[i] && _col !== i) {
this.isErr = true;
this.isShake = true;
//記錄當前格子的信息
this.optionNow = {
x: _row,
y: _col,
}
//記錄和當前格子同一行，以及同一個值的格子的座標
this.optionNowInRow = {
x: _row,
y: i,
}
}
}
//*****************************檢查列
let colCheck = [];
//首先把每一行的那一列的數值保存起來
for (let i = 0, len = this.allNumText.length; i < len; i++) {
colCheck.push(this.allNumText[i][_col]);
}
//遍歷檢查
for (let i = 0, len = colCheck.length; i < len; i++) {
//若是值同樣，可是座標不同，就是填寫錯誤
if (_text === colCheck[i] && _row !== i) {
this.isErr = true;
this.isShake = true;
//記錄和當前格子同一列，以及同一個值的格子的座標
this.optionNowInCol = {
x: i,
y: _col,
}
}
}
//若是發現的一樣的
if (this.isErr) {
setTimeout(() => {
this.isShake = false;
}, 1000)
return;
}
//若是數組去重後，長度小於9，就是行沒完成
rowCheck = rowCheck.filter(item => item !== '');
if (rowCheck.length !== 9) {
//console.log('行沒完成')
return;
}
let coloCheck = [];
//若是數組去重後，長度小於9，就是列沒完成
for (let i = 0, len = this.allNumText.length; i < len; i++) {
coloCheck = [...new Set(this.allNumText[i])];
coloCheck = coloCheck.filter(item => item !== '');
if (coloCheck.length !== 9) {
//console.log('沒完成')
return;
}
}
alert('挑戰成功，可是沒獎品');
this.numShow = false;
}
複製代碼
上面的代碼邏輯，簡單說下
1..err 這個class是設置紅色字體所使用的，至於判斷，就是在inputText這個函數裏面，有optionNow和 optionNowInRow和optionNowInCol。只要格子的座標等於三者其中之一，就會添加這個class，就會變紅。
2..isShake這個class是控制，抖動的動畫，添加上了以後，在一秒後，要去掉這個class，否則下次添加沒有動畫效果。
3.在inputText這個函數裏面，我操做的數獨列表，並非以前，提到的allNum，而是利用allNum，深度拷貝生成出的allNumText（this.allNumText = JSON.parse(JSON.stringify(this.allNum));）。主要就是爲了不下圖的狀況！
這樣是爲了往掏空的格子輸入數字的時候，而後那個格子就不能再改了，即便是填錯了，都不能改。樣式控制也不正確！正確的格式應該是下面這樣，即便填入了，格子的樣式仍是灰色的，這樣能夠方便的知道哪一個格子是當時被掏空的，填寫錯了，也是能夠改的。
4.完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-所謂的數獨</title>
<link rel="stylesheet" href="../../reset.css">
<style>
li{
list-style-type: none;
}
.shake {
animation: shake-opacity 500ms 1 ease-in-out;
}
@keyframes shake-opacity {
0% {
transform: translate(0px, 0px) rotate(0deg);
opacity: 0.6;
}
10% {
transform: translate(-2px, -1px) rotate(-0.5deg);
opacity: 0.5;
}
20% {
transform: translate(-4px, 4px) rotate(1.5deg);
opacity: 0.4;
}
30% {
transform: translate(-4px, -1px) rotate(-1.5deg);
opacity: 0.8;
}
40% {
transform: translate(-2px, -1px) rotate(-2.5deg);
opacity: 0.3;
}
50% {
transform: translate(-4px, 1px) rotate(-2.5deg);
opacity: 0.5;
}
60% {
transform: translate(-2px, 4px) rotate(0.5deg);
opacity: 0.1;
}
70% {
transform: translate(-3px, 1px) rotate(-0.5deg);
opacity: 0.4;
}
80% {
transform: translate(0px, 0px) rotate(-0.5deg);
opacity: 0.5;
}
90% {
transform: translate(2px, -1px) rotate(-2.5deg);
opacity: 0.8;
}
}
.num-box {
margin: 0 auto;
width: 540px;
position: relative;
}
.num-box .num-check {
position: absolute;
width: 180px;
box-shadow: 0 0 10px 0 #000;
left: 0;
top: 0;
}
.num-box .num-check li {
box-sizing: border-box;
float: left;
background: #fff;
color: #58B7FF;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
font-size: 24px;
border: 1px solid #58B7FF;
cursor: pointer;
transition: all .5s;
}
.num-box .num-check li:hover {
color: #fff;
background: #58B7FF;
border: 1px solid #fff;
}
.num-tips{
color: #333;
line-height: 32px;
font-size: 16px;
}
.num-table{
position: relative;
}
.num-row {
font-size: 0;
}
.num-row:hover .num-col, .num-row:hover .num-col.no, .num-row:hover .num-col.cur-col {
background: #0068b7;
}
.num-row .num-col {
width: 60px;
height: 60px;
line-height: 60px;
float: left;
box-sizing: border-box;
text-align: center;
background: #58B7FF;
color: #fff;
font-size: 24px;
font-weight: bold;
border: 1px solid #ccc;
}
.num-row .num-col.no {
background: #ccc;
border: 1px solid #fff;
}
.num-row .num-col.err {
color: #ff4949;
}
.num-row .num-col.cur-col {
background: #0068b7;
}
.num-row .num-col.cur {
background: #fff !important;
}
</style>
</head>
<body>
<div class="num-box" v-show="numShow" id="num">
<div class="num-tips">
<p>所謂的數獨：規則</p>
<p>1.每一行數字不重複</p>
<p>2.每一列數字不重複</p>
</div>
<div class="num-table" @mouseleave="hoverCol=''" :class="{'shake':isShake}">
<!--遍歷每一行-->
<div v-for="row,index in allNum" class="num-row clear">
<!--遍歷行裏面的每一列-->
<!--
no:被掏空數組的樣式
cur:格子被點擊時觸發，被點擊的格子樣式
cur-col:鼠標進入的時候觸發，和被點擊格子同一列的格子的樣式
err：填寫錯誤的時候觸發的樣式
-->
<div v-for="num1,indexSub in row"
:class="{'no':num1==='', 'cur':curRow===index&&indexSub===curCol, 'cur-col':hoverCol===indexSub, 'err':(optionNow.x===index&&optionNow.y===indexSub)||(optionNowInRow.x===index&&optionNowInRow.y===indexSub)||(optionNowInCol.x===index&&optionNowInCol.y===indexSub)}"
@click="showCheck(index,indexSub)" @mouseenter="hoverCol=indexSub;" class="num-col">
{{allNumText[index][indexSub]}}
</div>
</div>
<!--數字鍵盤-->
<div class="num-check clear" :style="{'top':(curRow+1)*60+'px','left':(curCol+1)*60+'px'}"
v-show="checkShow">
<ul>
<li @click="inputText(1)">1</li>
<li @click="inputText(2)">2</li>
<li @click="inputText(3)">3</li>
<li @click="inputText(4)">4</li>
<li @click="inputText(5)">5</li>
<li @click="inputText(6)">6</li>
<li @click="inputText(7)">7</li>
<li @click="inputText(8)">8</li>
<li @click="inputText(9)">9</li>
</ul>
</div>
</div>
</div>
</body>
<script src="../vue.min.js"></script>
<script>
new Vue({
el:'#num',
data:{
name: 'welcome',
testText: '歡迎來到',
nowIndex: 0,
allNum: [],//數字排列
answer: [],//全部答案的座標點
allNumText: [],//數字，包括輸入後的數字
curRow: '',//當前格子所在的行的索引
curCol: '',//當前格子所在的列的索引
checkShow: false,//數字鍵盤的顯示
hoverCol: '',//鼠標進去的當前列
hoverRow: 0,//鼠標進入的當前行
numShow: true,//數獨的顯示
optionNow: {},//輸入後的格子的座標
optionNowInRow: {},//和輸入後的格子在同一行，而且一樣值的格子的座標
optionNowInCol: {},//和輸入後的格子在同一列，而且一樣值的格子的座標
isErr: false,//是否輸入錯誤後
isShake: false//是否顯示震動的樣式
},
methods: {
/**
* @description 顯示數字鍵盤
* @param i1
* @param i2
*/
showCheck(i1, i2){
//點擊的格子是不是被掏空的格子
if (this.allNum[i1][i2] !== '') {
return
}
//點擊的格子若是是上一次點擊的格子（當前格子）
if (i1 === this.curRow && i2 === this.curCol) {
//隱藏數字鍵盤，curRow和curCol設空
this.checkShow = false;
this.curRow = '';
this.curCol = '';
}
else {
//隱藏數字鍵盤，curRow和curCol分別設置成當前的點
this.checkShow = true;
this.curRow = i1;
this.curCol = i2;
}
},
inputText(_text){
//*****************************檢查前的初始化
let _row = this.curRow, _col = this.curCol;
this.curRow = '';
this.curCol = '';
this.isErr = false;
this.optionNow = {
x: '',
y: '',
}
this.optionNowInRow = {
x: '',
y: '',
}
this.optionNowInCol = {
x: '',
y: '',
}
//*****************************檢查行
//保存當前格子的值
this.allNumText[_row][_col] = _text;
let rowCheck = Object.assign(this.allNumText[_row], []);
this.checkShow = false;
for (let i = 0, len = rowCheck.length; i < len; i++) {
//若是值同樣，可是座標不同，就是填寫錯誤
if (_text === rowCheck[i] && _col !== i) {
this.isErr = true;
this.isShake = true;
//記錄當前格子的信息
this.optionNow = {
x: _row,
y: _col
}
//記錄和當前格子同一行，以及同一個值的格子的座標
this.optionNowInRow = {
x: _row,
y: i
}
}
}
//*****************************檢查列
let colCheck = [];
//首先把每一行的那一列的數值保存起來
for (let i = 0, len = this.allNumText.length; i < len; i++) {
colCheck.push(this.allNumText[i][_col]);
}
//遍歷檢查
for (let i = 0, len = colCheck.length; i < len; i++) {
//若是值同樣，可是座標不同，就是填寫錯誤
if (_text === colCheck[i] && _row !== i) {
this.isErr = true;
this.isShake = true;
//記錄和當前格子同一列，以及同一個值的格子的座標
this.optionNowInCol = {
x: i,
y: _col
}
}
}
//若是發現的一樣的
if (this.isErr) {
setTimeout(() => {
this.isShake = false;
}, 1000)
return;
}
//若是數組去重後，長度小於9，就是行沒完成
rowCheck = rowCheck.filter(item => item !== '');
if (rowCheck.length !== 9) {
console.log('行沒完成')
return;
}
let coloCheck = [];
//若是數組去重後，長度小於9，就是列沒完成
for (let i = 0, len = this.allNumText.length; i < len; i++) {
coloCheck = [...new Set(this.allNumText[i])];
coloCheck = coloCheck.filter(item => item !== '');
if (coloCheck.length !== 9) {
console.log('沒完成')
return;
}
}
alert('挑戰成功，可是沒獎品');
this.numShow = false;
}
},
mounted(){
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let row = [], rowCol = 0;
for (let i = 0, len = arr1.length; i < len; i++) {
row = Object.assign([], arr1);
this.allNum.push(row);
rowCol = arr1.splice(0, 1)[0];
arr1.push(rowCol)
}
//打亂行
this.allNum.sort((n1, n2) => Math.random() - 0.5);
//隨機獲取兩列的索引
function randomText() {
let rondomIndex = 0, rondomIndexAfter = 0;
//獲取第一列的索引
rondomIndex = Math.floor(Math.random() * 9);
function randomDo() {
rondomIndexAfter = Math.floor(Math.random() * 9);
//若是第一列和第二列索引同樣，第二列的索引再次從新獲取
if (rondomIndexAfter === rondomIndex) {
randomDo();
}
}
randomDo();
//返回兩列的索引
return [rondomIndex, rondomIndexAfter]
}
//打亂列
let randomArr = [], nowValue = 0;
//一樣遍歷9次
for (let i = 0; i < 9; i++) {
randomArr = Object.assign([], randomText());
//遍歷每一行，給每一行的隨機兩列交換值
for (let j = 0, len = this.allNum.length; j < len; j++) {
//隨機兩列交換值
nowValue = this.allNum[j][randomArr[0]];
this.allNum[j][randomArr[0]] = this.allNum[j][randomArr[1]];
this.allNum[j][randomArr[1]] = nowValue;
}
}
//記錄全部座標
let rowText = '', arrText = []
for (let i = 0; i < 9; i++) {
rowText = ''
for (let j = 0; j < 9; j++) {
rowText += i + '-' + j + ',';
}
arrText.push(rowText.substr(0, rowText.length - 1))
}
console.log(arrText);
//隨機掏空
let nowItme = [], _option, nowOption = [];
for (let i = 0; i < 9; i++) {
//抽取當前行的全部座標
nowItme = arrText[i].split(',');
nowOption = [];
//當前行的隨機兩個座標掏空
for (let j = 0; j < 2; j++) {
//抽取當前行的隨機一個座標
_option = Math.floor(Math.random() * nowItme.length);
//分割座標的x,y
nowOption = nowItme.splice(_option,1)[0].split("-");
this.allNum[nowOption[0]][nowOption[1]] = '';
}
}
//深度拷貝數獨的數字
this.allNumText = JSON.parse(JSON.stringify(this.allNum));
}
})
</script>
</html>複製代碼
reset.css和vue.min.js你們自行到github下載！
5.小結
好了，用vue作的所謂的數獨，就寫到這裏了，主要就是邏輯有點繞，其它的問題相信都難不倒你們。這個實例比以前快速入門的三個小實例要麻煩一點，可是也很好理解！你們只要稍微看下估計都不難理解！最後，若是你們以爲文章寫得很差，哪裏寫錯了，歡迎給建議或者指點下迷津。期待和你們交流意見，共同進步！
-------------------------華麗的分割線--------------------
想了解更多，關注關注個人微信公衆號：守候書閣
相關文章
- 1. 用vue開發一個所謂的數獨
- 2. 所謂，引用計數
- 3. JavaScript 所謂的坑
- 4. 數據處理-所謂何
- 5. 所謂 WSGI
- 6. 所謂科研
- 7. 所謂JPA
- 8. Unity中所謂的回調函數
- 9. C# 網上收集的一些所謂的開源項目
- 10. IOS開發之NSPredicate謂詞的用法
- 更多相關文章...
- • 第一個MyBatis程序 - MyBatis教程
- • 第一個Hibernate程序 - Hibernate教程
- • PHP開發工具
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 用vue開發一個所謂的數獨
- 2. 所謂，引用計數
- 3. JavaScript 所謂的坑
- 4. 數據處理-所謂何
- 5. 所謂 WSGI
- 6. 所謂科研
- 7. 所謂JPA
- 8. Unity中所謂的回調函數
- 9. C# 網上收集的一些所謂的開源項目
- 10. IOS開發之NSPredicate謂詞的用法