數獨9x9(動畫取代遞迴) | Programming Project

{"id":157490,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\\n\u003chead\u003e\\n    \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n    \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n    \u003cmeta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"ie=edge\\\"\u003e\\n    \u003ctitle\u003eSudoku Solver\u003c/title\u003e\\n    \u003clink rel=\\\"stylesheet\\\" href=\\\"index.css\\\"\u003e\\n    \u003cscript src=\\\"https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\\n\u003cbody\u003e\\n    \u003cdiv id=\\\"sudoku\\\"\u003e\\n        \u003ch1\u003eSudoku\u003c/h1\u003e\\n        \u003cdiv class=\\\"game\\\"\u003e\\n            \u003cdiv class=\\\"grid\\\"\u003e\\n                \u003cdiv v-for=\\\"row, x in grid\\\" class=\\\"row\\\"\u003e\\n                    \u003cdiv v-for=\\\"col, y in row\\\" class=\\\"col\\\"\u003e\\n                        \u003cinput v-model.number=\\\"grid[x][y].number\\\" :disabled=\\\"originGrid[x][y].number != 0\\\" :style=\\\"textColor(grid[x][y].number)\\\"\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n           \u003cdiv class=\\\"vertical\\\"\u003e\\n               \u003cdiv v-for=\\\"i in 9\\\"\u003e\\n                   \u003cdiv v-show=\\\"v_check(i - 1)\\\" class=\\\"active\\\"\u003e\u003c/div\u003e\\n               \u003c/div\u003e\\n           \u003c/div\u003e\\n           \u003cdiv class=\\\"horizontal\\\"\u003e\\n               \u003cdiv v-for=\\\"i in 9\\\"\u003e\\n                   \u003cdiv v-show=\\\"h_check(i - 1)\\\" class=\\\"active\\\"\u003e\u003c/div\u003e\\n               \u003c/div\u003e\\n           \u003c/div\u003e\\n            \u003cdiv class=\\\"blocks\\\"\u003e\\n                \u003cdiv v-for=\\\"i in 9\\\"\u003e\\n                    \u003cdiv v-show=\\\"b_check(i - 1)\\\" class=\\\"active\\\"\u003e\u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n        \u003cbutton @click=\\\"newGame\\\"\u003e新遊戲\u003c/button\u003e\\n        \u003cbutton @click=\\\"resolve\\\"\u003e破解\u003c/button\u003e\\n    \u003c/div\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"body {\\n    padding: 15px;\\n    display: flex;\\n    justify-content: center;\\n    align-items: center;\\n    background-color: lightyellow;\\n}\\n\\n#sudoku {\\n    text-align: center;\\n}\\n\\nimg {\\n    width: 100px;\\n}\\n\\nbutton {\\n    margin: 10px 5px;\\n}\\n\\n.game {\\n    width: 450px;\\n    height: 450px;\\n    border: 1px solid black;\\n    position: relative;\\n}\\n\\n.row {\\n    width: 100%;\\n    height: calc(100%/9);\\n}\\n\\n.col {\\n    position: relative;\\n    display: inline-block;\\n    width: calc(100%/9);\\n    height: 100%;\\n    margin: 0;\\n    border: 1px solid #00000050;\\n    box-sizing: border-box;\\n}\\n\\ninput {\\n    position: absolute;\\n    top: 0;\\n    left: 0;\\n    width: 100%;\\n    height: 100%;\\n    margin: 0;\\n    text-align: center;\\n    border-width: 0px;\\n    box-sizing: border-box;\\n    font-size: 1.2rem;\\n    outline: none;\\n    color: black;\\n    background-color: rgba(0, 0, 0, 0);\\n}\\n\\ninput:focus {\\n    background-color: rgba(0, 0, 0, 0.1);\\n}\\n\\ninput:disabled {\\n    font-weight: 900;\\n    font-size: 1.1rem;\\n    /* background-color: lightyellow; */\\n    background-color: rgba(0, 0, 0, 0);\\n    cursor: not-allowed;\\n}\\n\\n.grid {\\n    width: 100%;\\n    height: 100%;\\n    position: absolute;\\n    top: 0;\\n    left: 0;\\n}\\n\\n.vertical,\\n.horizontal,\\n.blocks {\\n    position: absolute;\\n    top: 0;\\n    left: 0;\\n    right: 0;\\n    bottom: 0;\\n    display: flex;\\n    flex-wrap: wrap;\\n    pointer-events: none;\\n}\\n\\n.vertical \u003e div {\\n    width: calc(100%/9);\\n    height: 100%;\\n    position: relative;\\n}\\n\\n.horizontal \u003e div {\\n    width: 100%;\\n    height: calc(100%/9);\\n    position: relative;\\n}\\n\\n.blocks \u003e div {\\n    width: 150px;\\n    height: 150px;\\n    border: 1px solid black;\\n    box-sizing: border-box;\\n    position: relative;\\n}\\n\\n.vertical .active {\\n    z-index: -1;\\n    position: absolute;\\n    top: -12px;\\n    left: 12px;\\n    right: 12px;\\n    bottom: -12px;\\n    background-color: #ff595960;\\n}\\n\\n.horizontal .active {\\n    z-index: -1;\\n    position: absolute;\\n    top: 12px;\\n    left: -12px;\\n    right: -12px;\\n    bottom: 12px;\\n    background-color: #ffa40060;\\n}\\n\\n.blocks .active {\\n    z-index: -1;\\n    position: absolute;\\n    top: 6px;\\n    left: 6px;\\n    right: 6px;\\n    bottom: 6px;\\n    background-color: #00c4b360;\\n}\\n\",\"js\":\"// 史上最難的數獨題目\\nvar grid = [\\n    [8, 0, 0, 0, 0, 0, 0, 0, 0],\\n    [0, 0, 3, 6, 0, 0, 0, 0, 0],\\n    [0, 7, 0, 0, 9, 0, 2, 0, 0],\\n    [0, 5, 0, 0, 0, 7, 0, 0, 0],\\n    [0, 0, 0, 0, 4, 5, 7, 0, 0],\\n    [0, 0, 0, 1, 0, 0, 0, 3, 0],\\n    [0, 0, 1, 0, 0, 0, 0, 6, 8],\\n    [0, 0, 8, 5, 0, 0, 0, 1, 0],\\n    [0, 9, 0, 0, 0, 0, 4, 0, 0],\\n]\\n\\nvar grid = new Sudoku(grid); //初始化\\n\\n\\nfunction start () {\\n    \\n    for (var i=0; i\u003c1; i++) {\\n        var r = resolve();\\n        if (r == true) return;\\n    }\\n    \\n    console.log(1)\\n    \\n    setTimeout(start, 10);\\n}\\n\\n// function start () {\\n//     count = 0; //計算遞迴的次數\\n//     resolve();\\n//     console.log('遞迴嘗試了 ' + count + ' 次！');\\n// }\\n\\n\\nfunction resolve () {\\n\\n    for (var x = 0; x \u003c 9; x++) {\\n        for (var y = 0; y \u003c 9; y++) {\\n            if (grid[x][y].number == 0) {\\n                \\n                var arr = [];\\n                for (var i = 0; i \u003c 9; i++) {\\n                    arr.push(grid[x][i].number);\\n                    arr.push(grid[i][y].number);\\n                }\\n\\n                var offsetX = x - x % 3;\\n                var offsetY = y - y % 3;\\n                for (var xx = 0; xx \u003c 3; xx++) {\\n                    for (var yy = 0; yy \u003c 3; yy++) {\\n                        arr.push(grid[offsetX + xx][offsetY + yy].number);\\n                    }\\n                }\\n                \\n                var tmp = [];\\n                for (var i=1; i\u003c=9; i++) {\\n                    if (arr.indexOf(i) == -1) {\\n                        tmp.push(i);\\n                    }\\n                }\\n                \\n                \\n                if (tmp.length \u003e 0) {\\n                    grid[x][y].arr = tmp;\\n                    grid[x][y].number = tmp.pop();\\n                } else {\\n                    back();\\n                }\\n                return false;\\n                \\n\\n                // for (var i = 1; i \u003c= 9; i++) {\\n                //     if (arr.indexOf(i) == -1) {\\n                //         grid[x][y] = i;\\n                //         var b = resolve();\\n                //         if (b) return true;\\n                //         grid[x][y] = 0;\\n                //     }\\n                // }\\n                // return false;\\n            }\\n        }\\n    }\\n    \\n    return true;\\n}\\n\\nfunction back () {\\n    for (var x = 8; x \u003e= 0; x--) {\\n        for (var y = 8; y \u003e= 0; y--) {\\n            if (grid[x][y].number != 0) {\\n                \\n                if (grid[x][y].arr.length \u003e 0) {\\n                    grid[x][y].number = grid[x][y].arr.pop();\\n                } else {\\n                    // grid[x][y].arr = [];\\n                    grid[x][y].number = 0;\\n                    back();\\n                }\\n                \\n                \\n            }\\n        }\\n    }\\n}\\n\\n\\n// function newGame () {\\n//     count = 0; //計算遞迴的次數\\n//     generator();\\n//     console.log('遞迴嘗試了 ' + count + ' 次！');\\n// }\\n\\n\\n// function generator() {\\n//     for (var x = 0; x \u003c 9; x++) {\\n//         for (var y = 0; y \u003c 9; y++) {\\n//             if (grid[x][y] == 0) {\\n//                 var arr = [];\\n//                 for (var i = 0; i \u003c 9; i++) {\\n//                     arr.push(grid[x][i]);\\n//                     arr.push(grid[i][y]);\\n//                 }\\n\\n//                 var offsetX = Math.floor(x / 3);\\n//                 var offsetY = Math.floor(y / 3);\\n//                 for (var xx = 0; xx \u003c 3; xx++) {\\n//                     for (var yy = 0; yy \u003c 3; yy++) {\\n//                         arr.push(grid[offsetX * 3 + xx][offsetY * 3 + yy]);\\n//                     }\\n//                 }\\n\\n//                 var rand = shuffle();\\n\\n//                 for (var i = 0; i \u003c 9; i++) {\\n//                     if (arr.indexOf(rand[i]) == -1) {\\n//                         grid[x][y] = rand[i];\\n//                         if (generator(grid)) return true;\\n//                         grid[x][y] = 0;\\n//                     }\\n//                 }\\n//                 return false;\\n//             }\\n//         }\\n//     }\\n//     randomHide();\\n//     return true;\\n// }\\n\\n// // 洗牌演算法\\n// function shuffle() {\\n//     var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];\\n//     for (var i = 0; i \u003c 100; i++) {\\n//         var rand1 = Math.floor(Math.random() * 9);\\n//         var rand2 = Math.floor(Math.random() * 9);\\n//         var temp = arr[rand1];\\n//         arr[rand1] = arr[rand2];\\n//         arr[rand2] = temp;\\n//     }\\n//     return arr;\\n// }\\n\\n// // 隨機挖空完整的數獨\\n// function randomHide() {\\n//     var count = 0;\\n//     while (count \u003c 81 - 25) {\\n//         var x = Math.floor(Math.random() * 9)\\n//         var y = Math.floor(Math.random() * 9)\\n//         if (grid[x][y] !== 0) {\\n//             grid[x][y] = 0;\\n//             count++;\\n//         }\\n//     }\\n// }\\n\"}","created_at":"2020-06-11T18:30:56.997+08:00","updated_at":"2024-01-15T23:23:24.126+08:00","name":"數獨9x9(動畫取代遞迴) ","language":"web","screenshot":{"url":"/uploads/project/screenshot/157490/ba20fe8cb2de2676eee9adfc578f5857.jpg"},"parent_id":157486,"plugin":"\n// 將二維陣列轉為二維物件給 vue 去更好做綁定\nfunction array2dToGrid(arr2d) {\n    for (let x = 0; x \u003c 9; x++) {\n        for (let y = 0; y \u003c 9; y++) {\n            grid[x][y] = {\n                number: grid[x][y],\n                arr: [],\n            }\n        }\n    }\n    return grid;\n}\n\n\nfunction Sudoku (arr2d) {\n    \n    var grid = array2dToGrid(arr2d);\n\n    new Vue({\n        \n        el: '#sudoku',\n        \n        data: {\n            grid: grid,\n            originGrid: JSON.parse(JSON.stringify(grid)),\n        },\n        \n        methods: {\n            //垂直檢查\n            v_check(y) {\n                let arr = [];\n                for (let i = 0; i \u003c 9; i++) {\n                    arr.push(grid[i][y].number);\n                }\n                return !this.isValid(arr);\n            },\n            \n            //水平檢查\n            h_check(x) {\n                let arr = [];\n                for (let i = 0; i \u003c 9; i++) {\n                    arr.push(grid[x][i].number);\n                }\n                return !this.isValid(arr);\n            },\n\n            //大格子檢查\n            b_check(i) {\n                let offsetX = i % 3;\n                let offsetY = (i - offsetX) / 3;\n                let arr = [];\n                for (let x = 0; x \u003c 3; x++) {\n                    for (let y = 0; y \u003c 3; y++) {\n                        arr.push(grid[offsetY * 3 + y][offsetX * 3 + x].number);\n                    }\n                }\n                return !this.isValid(arr);\n            },\n            \n            //檢查陣列是否有重複數字\n            isValid(arr) {\n                for (let a = 0; a \u003c arr.length - 1; a++) {\n                    for (let b = a + 1; b \u003c arr.length; b++) {\n                        if (arr[a] === arr[b] \u0026\u0026 arr[b] !== 0) return false;\n                    }\n                }\n                return true;\n            },\n\n            textColor(num) {\n                return { color: num == 0 ? 'rgba(0, 0, 0, 0)' : 'rgba(0, 0, 0, 1)' }\n            },\n\n            resolve() {\n                window.start \u0026\u0026 window.start(); //學生實作\n            },\n\n            newGame() {\n                \n                // 清空數獨\n                for (let x = 0; x \u003c 9; x++) {\n                    for (let y = 0; y \u003c 9; y++) {\n                        this.grid[x][y].number = 0;\n                    }\n                }\n                \n                window.newGame \u0026\u0026 window.newGame(); //學生實作\n\n                this.originGrid = JSON.parse(JSON.stringify(this.grid));\n            }\n        },\n    });\n    \n    return grid;\n\n}\n","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":405,"hashid":"9ygsmqn8","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}