用vue開發一個所謂的數獨

Pluser 發布于2019-08-22 11:22 / 3235人閱讀

摘要：前言最近的后臺管理系統頁面，功能暫時沒有新的需求，就在想首頁放什么東西，最近我想到的就是放個所謂的數獨，為什么是所謂的數獨，因為規則不同于標準的數獨，只要求每一行每一列數字不一樣就可以了這個實例也是基于的，代碼分享給大家。

1.前言

最近的后臺管理系統頁面，功能暫時沒有新的需求，就在想首頁放什么東西，最近我想到的就是放個所謂的數獨，為什么是所謂的數獨，因為規則不同于標準的數獨，只要求每一行每一列數字不一樣就可以了！這個實例也是基于vue的，代碼分享給大家。給大家代碼，并不是要讓大家直接拷貝代碼，而是希望能讓大家當做是一個練手的項目，或者學習到知識。如果大家覺得我哪里寫得不好，寫錯了，歡迎指出，讓大家交流意見，一起進步。代碼上傳到github了：有需要的可以star一下！vue-demos

2.運行效果

3.實現步驟

實現步驟，感覺說得有點繞，建議大家邊寫邊看文章，這樣不會懵。或者直接去看源碼（sudoku），把源碼看懂！這個項目也不復雜！

3-1.準備數據和排版

排版的html+css代碼我不多說了，排版很簡單，這個相信都難不倒大家的。復雜一點的就是數據的交互！
下面開始第一步，把數獨的數據先準備好，數據是什么，大家都知道，就是像下面這樣的數據！

排版出來的效果就是下面這樣。

html代碼如下


    
    
        
        
            {{allNumText[index][indexSub]}}

代碼也很簡單，如下

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.打亂行

之后就是隨機打亂順序了，打亂順序這個得保證一個前提，就是保證每一行每一列的數字都不一樣。這樣的話，我用了一個簡單粗暴的方法-以行或者列為單位，進行打亂。比如，第一行和第三行進行位置交互，第一列和第五列進行位置的交換。下面說下以行為單位的打亂順序！
行的打亂，很簡單，就是隨機打亂數組而已！一行代碼搞定！

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.隨機掏空單元格

掏空單元格就是把一些格子隨機設空，然后讓玩數獨的人。把這些單元格給填上！
需求，我現在實現的就是，每一行有把兩個格子設空，這里我的做法是，把每一個格子的坐標先記錄下來，然后再從記錄的坐標里面隨機獲取坐標，用獲取到的坐標，進行設空！
首先，獲取所有點的坐標

//記錄所有坐標
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那里寫好了，大家注意下。



    
    
    
        {{allNumText[index][indexSub]}}

3-4.顯示數字鍵盤

首先，我簡單的用一個流程圖說下邏輯，如下

然后關于數字鍵盤的位置，看下圖（數字鍵盤的樣式我不多說了，就是一個是相對定位，一個絕對定位的設置而已）

如上圖，我點擊的是第一行第三個格子，首先，我期待被點擊的格子的樣式有所改變，方便我區分，這個不難，用一個class改變樣式就可以了，這個可以看下面的代碼，我用一個.cur的class控制樣式。還有一個就是期待數字鍵盤在第二行，第四個格子那里出現。這樣的話，大家就知道，數字鍵盤的位置是怎么定位的了！數字鍵盤的top就是，被點擊格子所在的行的索引+160（60是格子的寬高），left就是，被點擊格子所在的列的索引+160（60是格子的寬高）。比如上圖，第一行第三個格子，top=(0+1)*60+"px",left=(2+1)*60+"px"。

代碼如下


    
        
        
        
            {{allNumText[index][indexSub]}}

        
    


    
        1
        2
        3
        4
        5
        6
        7
        8
        9

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。代碼如下



    
    
    
        {{allNumText[index][indexSub]}}

運行效果

3-6.填寫操作和錯誤提示

這一步的操作函數，我直接發代碼吧，看代碼比我說的會清晰些，畢竟說的有點繞



    
    
    
        {{allNumText[index][indexSub]}}

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.完整代碼




    
    vue-所謂的數獨
    
    



    
        所謂的數獨：規則
        1.每一行數字不重復
        2.每一列數字不重復
    
    
        
        
            
            
            
                {{allNumText[index][indexSub]}}

            
        
        
        
            
                1
                2
                3
                4
                5
                6
                7
                8
                9

reset.css和vue.min.js大家自行到github下載！

5.小結

好了，用vue做的所謂的數獨，就寫到這里了，主要就是邏輯有點繞，其它的問題相信都難不倒大家。這個實例比之前快速入門的三個小實例要麻煩一點，但是也很好理解！大家只要稍微看下估計都不難理解！最后，如果大家覺得文章寫得不好，哪里寫錯了，歡迎給建議或者指點下迷津。期待和大家交流意見，共同進步！

-------------------------華麗的分割線--------------------
想了解更多，關注關注我的微信公眾號：守候書閣

GPU云服務器云服務器 Vue開發 vue組件開發 Vue開發技巧 vue20開發實踐

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92282.html

用vue開發一個所謂的數獨

摘要：前言最近的后臺管理系統頁面，功能暫時沒有新的需求，就在想首頁放什么東西，最近我想到的就是放個所謂的數獨，為什么是所謂的數獨，因為規則不同于標準的數獨，只要求每一行每一列數字不一樣就可以了這個實例也是基于的，代碼分享給大家。 1.前言最近的后臺管理系統頁面，功能暫時沒有新的需求，就在想首頁放什么東西，最近我想到的就是放個所謂的數獨，為什么是所謂的數獨，因為規則不同于標準的數獨，只要求每...

shixinzhang 2019-08-01 18:16 評論0 收藏0
【LeetCode】數組初級算法-有效的數獨

摘要：題目描述有效的數獨判斷一個的數獨是否有效。上圖是一個部分填充的有效的數獨。數獨部分空格內已填入了數字，空白格用表示。說明一個有效的數獨部分已被填充不一定是可解的。只需要根據以上規則，驗證已經填入的數字是否有效即可。題目描述有效的數獨判斷一個 9x9 的數獨是否有效。只需要根據以下規則，驗證已經填入的數字是否有效即可。數字 1-9 在每一行只能出現一次。數字 1-9 在每一列只能出...

wyk1184 2019-08-23 11:44 評論0 收藏0
記數獨X--Android openCV識別數獨并自動求解填充APP開發過程

摘要：可以針對筆者常用的數獨本文的實現都基于該，實現數獨的識別求解并把答案自動填入。專家級別的平均秒完成求解包括圖像數字提取，識別過程，完成全部操作。步驟四數獨求解，生成答案，并生成需要填充的數字序列。 1 序 ??數獨是源自18世紀瑞士的一種數學游戲。是一種運用紙、筆進行演算的邏輯游戲。玩家需要根據9×9盤面上的已知數字，推理出所有剩余空格的數字，并滿足每一行、每一列、每一個粗線宮（3*3...

yvonne 2019-08-16 15:18 評論0 收藏0
LeetCode36.有效的數獨 JavaScript

摘要：上圖是一個部分填充的有效的數獨。數獨部分空格內已填入了數字，空白格用表示。但由于位于左上角的宮內有兩個存在因此這個數獨是無效的。說明一個有效的數獨部分已被填充不一定是可解的。只需要根據以上規則，驗證已經填入的數字是否有效即可。判斷一個 9x9的數獨是否有效。只需要根據以下規則，驗證已經填入的數字是否有效即可。數字 1-9 在每一行只能出現一次。數字 1-9 在每一列只能出現一次...

elva 2019-08-23 15:16 評論0 收藏0