数独

markdown/小工具集合.md

@@ -5,7 +5,7 @@ date: 2024-10-20
 
 # 小工具集合
 
-基于项目 [smilelc3/MyLittleTool](https://github.com/smilelc3/MyLittleTool)，并使用 [wasm](https://developer.mozilla.org/zh-CN/docs/WebAssembly/C_to_Wasm) 技术实现 `JavaScript` 调用 `C/C++`。
+基于项目 [smilelc3/MyLittleTool](https://github.com/smilelc3/MyLittleTool) 和 [smilelc3/sudoku-solver](https://github.com/smilelc3/sudoku-solver)，并使用 [wasm](https://developer.mozilla.org/zh-CN/docs/WebAssembly/C_to_Wasm) 技术实现 `JavaScript` 调用 `C/C++` 和 `Go`。
 
 ---
 {% raw %}
@@ -60,7 +60,19 @@ date: 2024-10-20
     </div>
 </div>
 <hr>
-<script src="/js/MyLittleTool.js"></script>
+<div class="tool-section" id="sudoku">
+    <h3>数独求解(舞蹈链算法)</h3>
+    <table class="sudoku-table">
+        <tbody id="sudoku-tbody">
+        <!-- 动态生成的行和单元格将插入到这里 -->
+        </tbody>
+    </table>
+    <button onclick="solveSudoku()">求解</button>
+    <button onclick="clearSudoku()">清空</button>
+    <div class="output" id="outSudoku">输出:</div>
+</div>
+<hr>
+<script src="js/MyLittleTool.js"></script>
 <script>
     let C_Hex2Ascii, C_Ascii2Hex, C_Linear11Trans, C_ByteAccByMem;
     // 等待 wasm 模块加载
@@ -146,6 +158,82 @@ date: 2024-10-20
         reader.readAsArrayBuffer(file);
     }
 </script>
+<script src="js/wasm_exec.js"></script>
+<script>
+    let go;
+    async function loadGoWasm() {
+        go = new Go();
+        const response = await fetch("https://liuchang.men/js/sudoku.wasm");
+        const result = await WebAssembly.instantiateStreaming(response, go.importObject);
+        go.run(result.instance);
+    }
+    loadGoWasm().then(() => {
+        console.log("Go Wasm loaded successfully");
+    }).catch(err => {
+        console.error("Error loading Go Wasm:", err);
+    });
+    function solveSudoku() {
+        const inputs = document.querySelectorAll('.sudoku-input'); // 获取所有输入框
+        const matrix = [];
+        inputs.forEach(input => {   // 将输入值转换为数字，如果为空则为 0
+            matrix.push(input.value ? Number(input.value) : 0);
+        });
+        if (matrix.length != 81) {    // 确保数组长度为 81
+            alert("输入不完整，请确保填写所有数字。");
+            return;
+        }
+        const jsArray = Array.from(matrix);
+        const ret = GO_sudoku(jsArray);
+        if (ret.isSolved) {             // 填充表格
+            inputs.forEach((input, index) => {
+                input.value = ret.result[index]; // 填充结果数组
+                document.getElementById('outSudoku').textContent = '输出: 耗时 ' + ret.timeMs + ' ms';
+            });
+        } else {
+          document.getElementById('outSudoku').textContent = '该数独无解';
+        }
+    };
+    function clearSudoku() {
+        const inputs = document.querySelectorAll('.sudoku-input');
+        inputs.forEach(input => {
+            input.value = ''; // 清空输入框
+            document.getElementById('outSudoku').textContent = '输出:';
+        });
+    };
+</script>
+<script>
+    const tableBody = document.getElementById('sudoku-tbody');
+    for (let i = 0; i < 9; i++) {
+        const row = document.createElement('tr'); // 创建一行
+        for (let j = 0; j < 9; j++) {
+            const cell = document.createElement('td'); // 创建一个单元格
+            const input = document.createElement('input'); // 创建输入框
+            input.type = 'number'; // 设置输入框类型
+            input.className = 'sudoku-input';
+            input.min = 1; // 设置最小值
+            input.max = 9; // 设置最大值
+            input.addEventListener('input', function () {
+                    // 将输入值限制为 1 到 9 的数字
+                    if (this.value.length > 1) {
+                        this.value = this.value.slice(0, 1); // 只保留第一个字符
+                    }
+                    const num = parseInt(this.value, 10);   // 必须满足1~9
+                    if (num < 1 || num > 9 || isNaN(num)) {
+                        this.value = ''; // 清空输入
+                    }
+                });
+            cell.appendChild(input); // 将输入框添加到单元格
+            row.appendChild(cell); // 将单元格添加到行
+        }
+        tableBody.appendChild(row); // 将行添加到表格主体
+    }
+    function validateInput(input) {
+        const value = parseInt(input.value, 10);
+        if (value < 1 || value > 9 || isNaN(value)) {
+            input.value = ''; // 清空输入
+        }
+    }
+</script>
 <style>
     input[type="text"], input[type="file"] {
         width: 100%;
@@ -184,5 +272,45 @@ date: 2024-10-20
         border-radius: 5px;
         flex: 1; /* 使输出框占满剩余的空间 */
     }
+    .sudoku-table {
+        td {
+            width: 30px;
+            height: 30px;
+            border: 1px solid #333;
+            text-align: center;
+            vertical-align: middle;
+            position: relative; /* 为了绝对定位标签 */
+            padding: 10px;
+        }
+        .sudoku-input {
+        width: 100%;
+        height: 100%;
+        border: none;
+        text-align: center;
+        font-size: 22px;
+        box-sizing: border-box;
+        padding: 0;
+        margin: 0;
+        outline: none;
+        }
+        /* 隐藏数字输入框的上下箭头 */
+        input[type="number"]::-webkit-inner-spin-button,
+        input[type="number"]::-webkit-outer-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+        td:first-child {
+            border-left: 2px solid #000; /* 左边框加粗 */
+        }
+        td:nth-child(3n) {
+            border-right: 2px solid #000; /* 右边框加粗 */
+        }
+        tr:first-child td {
+            border-top: 2px solid #000; /* 上边框加粗 */
+        }
+        tr:nth-child(3n) td {
+            border-bottom: 2px solid #000; /* 下边框加粗 */
+        }
+    }
 </style>
 {% endraw %}