{"id":160321,"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, y in grid\\\" class=\\\"row\\\"\u003e\\n \u003cdiv v-for=\\\"col, x in row\\\" class=\\\"col\\\"\u003e\\n \u003cinput\\n v-model.number=\\\"grid[x][y]\\\"\\n @focus=\\\"onfocus(x, y)\\\"\\n @focusout=\\\"onfocusout(x, y)\\\"\\n :disabled=\\\"originGrid[x][y] != 0\\\"\\n :style=\\\"textColor(x, y)\\\"\\n \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 \u003cp v-if=\\\"isWin\\\" class=\\\"status\\\"\u003e恭喜你，獲得勝利了！\u003c/p\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 display: flex;\\n justify-content: center;\\n align-items: center;\\n background-color: lightyellow;\\n}\\n\\n#sudoku {\\n text-align: center;\\n}\\n\\nh1 {\\n font-size: 1.5rem;\\n}\\n\\nbutton {\\n margin: 10px 5px;\\n}\\n\\n.status {\\n color: red;\\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: 3rem;\\n outline: none;\\n color: black;\\n background-color: rgba(0, 0, 0, 0);\\n}\\n\\ninput:disabled {\\n font-weight: 900;\\n font-size: 3rem;\\n background-color: rgba(0, 0, 0, 0);\\n cursor: not-allowed;\\n}\\n\\ninput:focus {\\n color: black !important;\\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: 225px;\\n height: 225px;\\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\":\"var maze = [\\n [0, 0, 0, 3],\\n [0, 3, 2, 0],\\n [3, 0, 4, 0],\\n [0, 0, 0, 1],\\n]\\nvar grid = new Sudoku(maze); //初始化\\n\\n\\n//「破解」按鈕按下時執行此函式\\nfunction autoplay () {\\n count = 0;\\n resolve();\\n console.log('遞迴嘗試了 ' + count + ' 次！');\\n}\\n\\nfunction resolve () {\\n\\n //限制遞迴次數避免網頁癱瘓\\n if (count \u003e= 1000) return;\\n count++;\\n\\n for (var x = 0; x \u003c 4; x++) {\\n for (var y = 0; y \u003c 4; y++) {\\n if (grid[y][x] == 0) {\\n\\n var arr = [];\\n for (var i = 0; i \u003c 4; i++) {\\n arr.push(grid[y][i]);\\n }\\n\\n for (var i = 0; i \u003c 4; i++) {\\n arr.push(grid[i][x]);\\n }\\n\\n var offsetX = x - x % 2;\\n var offsetY = y - y % 2;\\n arr.push(grid[offsetY + 0][offsetX + 0]);\\n arr.push(grid[offsetY + 1][offsetX + 0]);\\n arr.push(grid[offsetY + 0][offsetX + 1]);\\n arr.push(grid[offsetY + 1][offsetX + 1]);\\n\\n\\n for (var i = 1; i \u003c= 4; i++) {\\n if (arr.indexOf(i) == -1) {\\n grid[y][x] = i;\\n var r = resolve();\\n if (r) return true;\\n grid[y][x] = 0;\\n }\\n }\\n return false;\\n }\\n }\\n }\\n return true;\\n}\\n\\n\"}","created_at":"2020-06-22T11:48:35.046+08:00","updated_at":"2020-06-22T12:16:45.062+08:00","name":"4x4數獨（預設版）","language":"web","screenshot":{"url":"/uploads/project/screenshot/160321/c8e2877a00be2ba1d2cfb85774858d85.jpg"},"parent_id":3,"plugin":"// 將二維陣列轉為二維物件給 vue 去更好做綁定\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]: 0;\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 h_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 //垂直檢查\n v_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 //大格子檢查\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] !== 0) return false;\n }\n }\n return true;\n },\n\n textColor(x, y) {\n var num = grid[x][y];\n return {\n color: `rgba(0, 0, 0, ${ num == 0 ? 0.05 : 1})`,\n fontWeight: this.originGrid[x][y] != 0 ? 'bold' : 'normal',\n }\n },\n \n onfocus(x, y) {\n if (this.grid[x][y] == 0) this.grid[x][y] = '';\n },\n \n onfocusout(x, y) {\n for (var i=1; i\u003c=4; i++) {\n if (this.grid[x][y] == i) return;\n }\n this.grid[x][y] = 0;\n },\n\n resolve() {\n window.autoplay \u0026\u0026 window.autoplay(); //學生實作\n },\n\n newGame() {\n window.newGame \u0026\u0026 window.newGame(); //學生實作\n \n this.originGrid = JSON.parse(JSON.stringify(this.grid));\n },\n \n },\n \n computed: {\n isWin() {\n for (let x=0; x\u003c4; x++) {\n for (let y=0; y\u003c4; y++) {\n if (this.grid[x][y] == 0) return false;\n }\n }\n \n for (var i=0; i\u003c4; i++) {\n if (this.v_check(i) || this.h_check(i) || this.b_check(i)) {\n return false;\n }\n }\n \n return true;\n },\n }\n });\n \n return grid;\n\n}\n\n\n\n//-------------------- 產生題目的演算法 --------------------//\n\n//「新遊戲」按鈕按下時執行此函式\nfunction newGame () {\n count = 0;\n clearAll();\n generator();\n randomHide();\n console.log('遞迴嘗試了 ' + count + ' 次！');\n}\n\nfunction generator () {\n \n //限制遞迴次數避免網頁癱瘓\n if (count \u003e= 200000) return;\n count++;\n\n for (var x = 0; x \u003c 4; x++) {\n for (var y = 0; y \u003c 4; y++) {\n if (grid[x][y] == 0) {\n \n var arr = [];\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 = x - x % 2;\n var offsetY = y - 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 + xx][offsetY + yy]);\n }\n }\n\n var rand = shuffle();\n\n for (var i = 0; i \u003c 4; i++) {\n if (arr.indexOf(rand[i]) == -1) {\n grid[x][y] = rand[i];\n var b = generator();\n if (b) return true;\n grid[x][y] = 0;\n }\n }\n return false;\n }\n }\n }\n return true;\n}\n\n// 清空數獨\nfunction clearAll () {\n for (var x = 0; x \u003c 4; x++) {\n for (var y = 0; y \u003c 4; y++) {\n grid[x][y] = 0;\n }\n }\n}\n\n// 洗牌演算法\nfunction shuffle() {\n var arr = [1, 2, 3, 4];\n for (var i = 0; i \u003c 100; i++) {\n var rand1 = Math.floor(Math.random() * 4);\n var rand2 = Math.floor(Math.random() * 4);\n var temp = arr[rand1];\n arr[rand1] = arr[rand2];\n arr[rand2] = temp;\n }\n return arr;\n}\n\n// 隨機挖空完整的數獨\nfunction randomHide() {\n for (var i=0; i \u003c 10; i++) {\n var x = Math.floor(Math.random() * 4);\n var y = Math.floor(Math.random() * 4);\n if (grid[x][y] != 0) {\n grid[x][y] = 0;\n } else {\n i -= 1;\n }\n }\n}\n","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":409,"hashid":"npmsjr95","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}
[]
Orange Apple Learning Platform
My Projects
View Project Page
Export
Remix
Import
Delete
Download Android APP (APK)
Screenshot
Open Web Site
繁中
简中
English
日本語
1:1:1
1:1
Full Width
Scan the QRCode below with your phone to install
Or you can
download APK
to this computer
Scan the QRCode below with your phone to install
Or you can
download APK
to this computer
