數獨4x4 | 程式專案 | 橘蘋學習平台

{"id":152536,"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\u003e數獨遊戲\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=\\\"grid[x][y]\\\" :disabled=\\\"originGrid[x][y] != 0\\\"\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n           \u003cdiv class=\\\"vertical\\\"\u003e\\n               \u003cdiv v-for=\\\"i in 4\\\"\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 4\\\"\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 4\\\"\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%/4);\\n}\\n\\n.col {\\n    position: relative;\\n    display: inline-block;\\n    width: calc(100%/4);\\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: calc(100% - 2px);\\n    height: calc(100% - 2px);\\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}\\n\\ninput:disabled {\\n    font-weight: 900;\\n    font-size: 1.1rem;\\n    background-color: lightyellow;\\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%/4);\\n    height: 100%;\\n    position: relative;\\n}\\n\\n.horizontal \u003e div {\\n    width: 100%;\\n    height: calc(100%/4);\\n    position: relative;\\n}\\n\\n.blocks \u003e div {\\n    width: calc(100%/2);\\n    height: calc(100%/2);\\n    border: 1px solid black;\\n    box-sizing: border-box;\\n    position: relative;\\n}\\n\\n.active {\\n    position: absolute;\\n    top: 3px;\\n    left: 3px;\\n    right: 3px;\\n    bottom: 3px;\\n    background-color: #ff000050;\\n}\\n\",\"js\":\"function resolve(grid) {\\n    for (var x = 0; x \u003c 4; x++) {\\n        for (var y = 0; y \u003c 4; y++) {\\n            if (grid[x][y] === '') {\\n                \\n                var arr = [];\\n                \\n                for (var i = 0; i \u003c 4; i++) {\\n                    arr.push(grid[x][i]);\\n                }\\n                \\n                for (var i = 0; i \u003c 4; i++) {\\n                    arr.push(grid[i][y]);\\n                }\\n                \\n                var offsetX = Math.floor(x / 2);\\n                var offsetY = Math.floor(y / 2);\\n                for (var xx = 0; xx \u003c 2; xx++) {\\n                    for (var yy = 0; yy \u003c 2; yy++) {\\n                        arr.push(grid[offsetX * 2 + xx][offsetY * 2 + yy]);\\n                    }\\n                }\\n                \\n                for (var i = 1; i \u003c= 4; i++) {\\n                    if (arr.indexOf(i.toString()) == -1) {\\n                        grid[x][y] = i.toString();\\n                        if (resolve(grid)) {\\n                            return true;\\n                        } else {\\n                            grid[x][y] = '';\\n                        }\\n                    }\\n                }\\n                return false;\\n            }\\n        }\\n    }\\n    return true;\\n}\\n\"}","created_at":"2020-05-29T18:45:07.296+08:00","updated_at":"2020-06-09T11:16:05.276+08:00","name":"數獨4x4","language":"web","screenshot":{"url":"https://cdn8.koding.school/uploads/project/screenshot/152536/f209573265d4f0db64edcb9f44b22fc6.jpg"},"parent_id":150213,"plugin":"const HARD_MAZE = [\n    [8, 0, 0, 0, 0, 0, 0, 0, 0],\n    [0, 0, 2, 6, 0, 0, 0, 0, 0],\n    [0, 7, 0, 0, 4, 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, 2, 0],\n    [0, 0, 1, 0, 0, 0, 0, 6, 8],\n    [0, 0, 8, 5, 0, 0, 0, 1, 0],\n    [0, 4, 0, 0, 0, 0, 4, 0, 0],\n];\n\nconst EMPTY_MAZE = [\n    [0, 0, 0, 0, 0, 0, 0, 0, 0],\n    [0, 0, 0, 0, 0, 0, 0, 0, 0],\n    [0, 0, 0, 0, 0, 0, 0, 0, 0],\n    [0, 0, 0, 0, 0, 0, 0, 0, 0],\n    [0, 0, 0, 0, 0, 0, 0, 0, 0],\n    [0, 0, 0, 0, 0, 0, 0, 0, 0],\n    [0, 0, 0, 0, 0, 0, 0, 0, 0],\n    [0, 0, 0, 0, 0, 0, 0, 0, 0],\n    [0, 0, 0, 0, 0, 0, 0, 0, 0],\n];\n\nfunction generator(grid) {\n    for (let x = 0; x \u003c 4; x++) {\n        for (let y = 0; y \u003c 4; y++) {\n            if (grid[x][y] === '') {\n                let arr = [];\n                for (let i = 0; i \u003c 4; i++) {\n                    arr.push(grid[x][i]);\n                    arr.push(grid[i][y]);\n                }\n\n                let offsetX = Math.floor(x / 2);\n                let offsetY = Math.floor(y / 2);\n                for (let xx = 0; xx \u003c 2; xx++) {\n                    for (let yy = 0; yy \u003c 2; yy++) {\n                        arr.push(grid[offsetX * 2 + xx][offsetY * 2 + yy]);\n                    }\n                }\n\n                let rand = shuffle();\n\n                for (let i = 0; i \u003c 4; i++) {\n                    if (arr.indexOf(rand[i]) === -1) {\n                        grid[x][y] = rand[i];\n                        if (generator(grid)) return true;\n                        grid[x][y] = '';\n                    }\n                }\n                return false;\n            }\n        }\n    }\n    randomHide(grid)\n    return true;\n}\n\nfunction shuffle() {\n    let arr = ['1', '2', '2', '4'];\n    for (let i = 0; i \u003c 100; i++) {\n        let rand1 = Math.floor(Math.random() * 4);\n        let rand2 = Math.floor(Math.random() * 4);\n        let temp = arr[rand1];\n        arr[rand1] = arr[rand2];\n        arr[rand2] = temp;\n    }\n    return arr;\n}\n\nfunction randomHide(grid) {\n    let count = 0;\n    // provide at least 17 seeds number\n    while (count \u003c 81 - 17) {\n        let x = Math.floor(Math.random() * 4)\n        let y = Math.floor(Math.random() * 4)\n        if (grid[x][y] !== '') {\n            grid[x][y] = '';\n            count++;\n        }\n    }\n}\n\nfunction array2dToGrid(arr2d) {\n    let grid = {};\n    for (let x = 0; x \u003c 4; x++) {\n        grid[x] = {};\n        for (let y = 0; y \u003c 4; y++) {\n            grid[x][y] = arr2d[x][y] !== 0 ? arr2d[x][y].toString() : '';\n        }\n    }\n    return grid;\n}\n\nvar grid = array2dToGrid(HARD_MAZE);\n\n\nlet game = new Vue({\n    el: '#sudoku',\n    data: {\n        grid: grid,\n        originGrid: JSON.parse(JSON.stringify(grid)),\n    },\n    methods: {\n        v_check(y) {\n            let arr = [];\n            for (let i = 0; i \u003c 4; i++) {\n                arr.push(grid[i][y]);\n            }\n            return !this.isValid(arr);\n        },\n\n        h_check(x) {\n            let arr = [];\n            for (let i = 0; i \u003c 4; i++) {\n                arr.push(grid[x][i]);\n            }\n            return !this.isValid(arr);\n        },\n\n        b_check(i) {\n            let offsetX = i % 2;\n            let offsetY = (i - offsetX) / 2;\n            let arr = [];\n            for (let x = 0; x \u003c 2; x++) {\n                for (let y = 0; y \u003c 2; y++) {\n                    arr.push(grid[offsetY * 2 + y][offsetX * 2 + x]);\n                }\n            }\n            return !this.isValid(arr);\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] !== '') return false;\n                }\n            }\n            return true;\n        },\n\n        resolve() {\n            window.resolve \u0026\u0026 resolve(grid);\n        },\n\n        newGame() {\n            let newGrid = array2dToGrid(EMPTY_MAZE);\n            generator(newGrid);\n\n            for (let x = 0; x \u003c 4; x++) {\n                for (let y = 0; y \u003c 4; y++) {\n                    this.grid[x][y] = newGrid[x][y];\n                }\n            }\n\n            this.originGrid = JSON.parse(JSON.stringify(this.grid));\n        }\n    },\n});","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":242,"hashid":"882sgm8w","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}