AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JavaScript之破解数独（附详细代码）

2018-01-12 1561
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：   在上一篇分享中，我们用Python和Django来破解数独，这对不熟悉Python和Django的人来说是非常不友好的。这次，笔者只用HTML和JavaScript写了破解数独的程序，对于熟悉前端的人，这是十分友好的。

  在上一篇分享中，我们用Python和Django来破解数独，这对不熟悉Python和Django的人来说是非常不友好的。这次，笔者只用HTML和JavaScript写了破解数独的程序，对于熟悉前端的人，这是十分友好的。
  话不多说，直接上代码。
  首页index.html的代码如下：

<html>

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
    <script type="text/javascript" src="answer.js"></script>
</head>

<body background="mountain.jpg">
    <center><h1>Solve A Sudoku</h1></center>
    <table class="sd" border="0" align="center" cellspacing="1" cellpadding="1">
        <tr>
            <td class="xx"><input id="1" class="big" maxlength="1"></td>
            <td class="xx"><input id="2" class="big" maxlength="1"></td>
            <td class="rr"><input id="3" class="big" maxlength="1"></td>
            <td class="xx"><input id="4" class="big" maxlength="1"></td>
            <td class="xx"><input id="5" class="big" maxlength="1"></td>
            <td class="rr"><input id="6" class="big" maxlength="1"></td>
            <td class="xx"><input id="7" class="big" maxlength="1"></td>
            <td class="xx"><input id="8" class="big" maxlength="1"></td>
            <td class="xx"><input id="9" class="big" maxlength="1"></td>
        </tr>
        <tr>
            <td class="xx"><input id="10" class="big" maxlength="1"></td>
            <td class="xx"><input id="11" class="big" maxlength="1"></td>
            <td class="rr"><input id="12" class="big" maxlength="1"></td>
            <td class="xx"><input id="13" class="big" maxlength="1"></td>
            <td class="xx"><input id="14" class="big" maxlength="1"></td>
            <td class="rr"><input id="15" class="big" maxlength="1"></td>
            <td class="xx"><input id="16" class="big" maxlength="1"></td>
            <td class="xx"><input id="17" class="big" maxlength="1"></td>
            <td class="xx"><input id="18" class="big" maxlength="1"></td>
        </tr>
        <tr>
            <td class="xx"><input id="19" class="big" maxlength="1"></td>
            <td class="xx"><input id="20" class="big" maxlength="1"></td>
            <td class="rr"><input id="21" class="big" maxlength="1"></td>
            <td class="xx"><input id="22" class="big" maxlength="1"></td>
            <td class="xx"><input id="23" class="big" maxlength="1"></td>
            <td class="rr"><input id="24" class="big" maxlength="1"></td>
            <td class="xx"><input id="25" class="big" maxlength="1"></td>
            <td class="xx"><input id="26" class="big" maxlength="1"></td>
            <td class="xx"><input id="27" class="big" maxlength="1"></td>
        </tr>
        <tr>
            <td class="top"><input id="28" class="big" maxlength="1"></td>
            <td class="top"><input id="29" class="big" maxlength="1"></td>
            <td class="topr"><input id="30" class="big" maxlength="1"></td>
            <td class="top"><input id="31" class="big" maxlength="1"></td>
            <td class="top"><input id="32" class="big" maxlength="1"></td>
            <td class="topr"><input id="33" class="big" maxlength="1"></td>
            <td class="top"><input id="34" class="big" maxlength="1"></td>
            <td class="top"><input id="35" class="big" maxlength="1"></td>
            <td class="top"><input id="36" class="big" maxlength="1"></td>
        </tr>
        <tr>
            <td class="xx"><input id="37" class="big" maxlength="1"></td>
            <td class="xx"><input id="38" class="big" maxlength="1"></td>
            <td class="rr"><input id="39" class="big" maxlength="1"></td>
            <td class="xx"><input id="40" class="big" maxlength="1"></td>
            <td class="xx"><input id="41" class="big" maxlength="1"></td>
            <td class="rr"><input id="42" class="big" maxlength="1"></td>
            <td class="xx"><input id="43" class="big" maxlength="1"></td>
            <td class="xx"><input id="44" class="big" maxlength="1"></td>
            <td class="xx"><input id="45" class="big" maxlength="1"></td>
        </tr>
        <tr>
            <td class="xx"><input id="46" class="big" maxlength="1"></td>
            <td class="xx"><input id="47" class="big" maxlength="1"></td>
            <td class="rr"><input id="48" class="big" maxlength="1"></td>
            <td class="xx"><input id="49" class="big" maxlength="1"></td>
            <td class="xx"><input id="50" class="big" maxlength="1"></td>
            <td class="rr"><input id="51" class="big" maxlength="1"></td>
            <td class="xx"><input id="52" class="big" maxlength="1"></td>
            <td class="xx"><input id="53" class="big" maxlength="1"></td>
            <td class="xx"><input id="54" class="big" maxlength="1"></td>
        </tr>
        <tr>
            <td class="top"><input id="55" class="big" maxlength="1"></td>
            <td class="top"><input id="56" class="big" maxlength="1"></td>
            <td class="topr"><input id="57" class="big" maxlength="1"></td>
            <td class="top"><input id="58" class="big" maxlength="1"></td>
            <td class="top"><input id="59" class="big" maxlength="1"></td>
            <td class="topr"><input id="60" class="big" maxlength="1"></td>
            <td class="top"><input id="61" class="big" maxlength="1"></td>
            <td class="top"><input id="52" class="big" maxlength="1"></td>
            <td class="top"><input id="63" class="big" maxlength="1"></td>
        </tr>
        <tr>
            <td class="xx"><input id="64" class="big" maxlength="1"></td>
            <td class="xx"><input id="65" class="big" maxlength="1"></td>
            <td class="rr"><input id="66" class="big" maxlength="1"></td>
            <td class="xx"><input id="67" class="big" maxlength="1"></td>
            <td class="xx"><input id="68" class="big" maxlength="1"></td>
            <td class="rr"><input id="69" class="big" maxlength="1"></td>
            <td class="xx"><input id="70" class="big" maxlength="1"></td>
            <td class="xx"><input id="71" class="big" maxlength="1"></td>
            <td class="xx"><input id="72" class="big" maxlength="1"></td>
        </tr>
        <tr>
            <td class="xx"><input id="73" class="big" maxlength="1"></td>
            <td class="xx"><input id="74" class="big" maxlength="1"></td>
            <td class="rr"><input id="75" class="big" maxlength="1"></td>
            <td class="xx"><input id="76" class="big" maxlength="1"></td>
            <td class="xx"><input id="77" class="big" maxlength="1"></td>
            <td class="rr"><input id="78" class="big" maxlength="1"></td>
            <td class="xx"><input id="79" class="big" maxlength="1"></td>
            <td class="xx"><input id="80" class="big" maxlength="1"></td>
            <td class="xx"><input id="81" class="big" maxlength="1"></td>
        </tr>
    </table>
    <br>
    <center>
    <button type="button" onclick="clc()">Clear</button> 
    <button type="button" onclick="get_answer()">Show Answer</button> 
    </center>
</body>

</html>

  其使用的样式表mystyle.css的代码如下：

.sd {
    table-layout: fixed;
    border: #443 3px solid;
    width: 355px;
    height: 355px;
    background-color: #fff;
    vertical-align: middle;
    border-collapse: collapse;
    text-align: center;
}
.big {
    FONT-SIZE: 25px;
    border: none;
    background-color: transparent;
    WIDTH: 30px;
    HEIGHT: 30px;
    LINE-HEIGHT: 28px;
    TEXT-ALIGN: center;
    margin: 0px;
    COLOR: #0000FF;
    FONT-FAMILY: Verdana;
}
td.xx {
    border-right: #999 1px solid;
    border-top: #999 1px solid;
    width: 30px;
    height: 30px;
    text-align: center;
    LINE-height: 30px;
}
td.rr {
    border-right: #443 2px solid;
    border-top: #999 1px solid;
    width: 30px;
    height: 30px;
    text-align: center;
    LINE-height: 30px;
}
td.top {
    border-right: #999 1px solid;
    border-top: #443 2px solid;
    width: 30px;
    height: 30px;
    text-align: center;
    LINE-height: 30px;
}
td.topr {
    border-right: #443 2px solid;
    border-top: #443 2px solid;
    width: 30px;
    height: 30px;
    text-align: center;
    LINE-height: 30px;
}

  其使用的JavaScript的代码（answer.js）如下：

//clear all the input
function clc(){
    for(var i=0; i<81; i++){
        document.getElementsByTagName("input")[i].value = "";
        document.getElementsByTagName("input")[i].style.color = 'blue';
    }
    document.body.style.backgroundImage = "url(mountain.jpg)";
}

//press "show answer" button and show answer then
function get_answer(){
    var bool = check_input();
    if(bool){
        var grid = readAPuzzle();
        if(!isValidGrid(grid)){
            alert("Invalid input, please try again!");
        }
        else{
            if(search(grid)){
                output_ans();
                document.body.style.backgroundImage = "url(sky.jpg)";
            }
            else{
                alert("Found no solution!");
            }
        }
    }
}

//check if the input are valid
function check_input(){
    var arr = new Array();

    for(var i=0; i<81; i++){
        arr[i] = Number(document.getElementsByTagName("input")[i].value);
        if(isNaN(arr[i])){
            alert('Input should be any number between 1 and 9 !');
            return false
        }
    }

    if(arr.every(function isZero(x){return x== 0})){
        alert('There is no input!');
        return false
    }

    return true
}

//read a puzzle from the web page
function readAPuzzle(){
    var arr = new Array();

    for(var i=0; i<81; i++){
        arr[i] = Number(document.getElementsByTagName("input")[i].value);
    }

    var grid = new Array();
    for(var i=0; i<9; i++){
        grid[i] = new Array();
        for(var j=0; j<9; j++){
            grid[i][j] = 0;
        }    
    }


    for(var i=0; i<81; i++){
        grid[Math.floor(i/9)][i%9] = arr[i];
    }

    return grid
}

//Obtain a list of free cells from the puzzle
function getFreeCellList(grid){
    var freeCellList = new Array();
    index = 0

    for(var i=0; i<9; i++){
        for(var j=0; j<9; j++){
            if(grid[i][j] == 0){
                freeCellList[index] = new Array(i,j);
                index++;
            }
        }
    }

    return freeCellList
}

//Check whether grid[i][j] is valid in the grid
function isValid(i,j,grid){
    //Check whether grid[i][j] is valid at the i's row
    for(var column=0; column<9; column++){
        if((column != j) && (grid[i][column] == grid[i][j])){
            return false
        }
    }

    //Check whether grid[i][j] is valid at the j's column
    for(var row=0; row<9; row++){
        if((row != i) && (grid[row][j] == grid[i][j])){
            return false
        }
    }

    //Check whether grid[i][j] is valid at the 3-by-3 box
    for(var row=Math.floor(i/3)*3; row < Math.floor(i/3)*3+3; row++){
        for(var col=Math.floor(j/3)*3; col < Math.floor(j/3)*3+3; col++){
            if((row != i) && (col != j) && (grid[row][col] == grid[i][j])){
                return false
            }
        }
    }

    return true //The current value at grid[i][j] is valid
}

//Check whether the fixed cells are valid in the grid
function isValidGrid(grid){
    for(var i=0; i<9; i++){
        for(var j=0; j<9; j++){
            if((grid[i][j] < 0) || (grid[i][j] > 9) || ((grid[i][j] != 0) && (! isValid(i,j,grid)))){
                return false
            }
        }
    }
    return true
}


//Search for a solution
function search(grid){
    var freeCellList = getFreeCellList(grid);
    var numberOfFreeCells = freeCellList.length;
    if(numberOfFreeCells == 0){
        return true
    }

    var k = 0;  //Start from the first free cell

    while(true){
        var i = freeCellList[k][0];
        var j = freeCellList[k][1];
        if(grid[i][j] == 0){
            grid[i][j] = 1;
        }

        if(isValid(i,j,grid)){
            if(k+1 == numberOfFreeCells){
                //no more free cells
                return true  //A solution is found
            }
            else{
                //Move to the next free cell
                k++;
            }
        }
        else{
            if(grid[i][j] < 9){
                //Fill the free cell with the next possible value
                grid[i][j]++;
            }

            else{
                //grid[i][j] is 9,backtrack
                while(grid[i][j] == 9){
                    if(k == 0){
                        return false  //No possible value
                    }
                    grid[i][j] = 0;  //Reset to free cell
                    k--;  //Backtrack to the preceding free cell
                    i = freeCellList[k][0];
                    j = freeCellList[k][1];

                } 
                //Fill the free cell with the next possible value
                //search continues from this free cell at k
                grid[i][j]++;
            }
        }
    }

    return true  //A solution is found
}


//output the answer on the web page
function output_ans(){
    var grid = readAPuzzle();
    var grid_original = readAPuzzle();

    if(search(grid)){
        for(var i=0; i<81; i++){
            if(grid[Math.floor(i/9)][i%9] != grid_original[Math.floor(i/9)][i%9]){
                document.getElementsByTagName("input")[i].value = grid[Math.floor(i/9)][i%9];
                document.getElementsByTagName("input")[i].style.color = 'black';
            }
        }
    }

}

  我们将对如何操作做一个简单的图解说明。
  开始的页面如下：


开始页面

  首先，如果没有任何输入而直接点击“Show Answer”按钮，则会显示如下页面：

没有任何输入而直接点击“Show Answer”按钮

  如何在表格中一旦输入非数字，则会显示如下页面：

在表格中输入非数字

  若在九宫格中输入的数字不符合规则，则会显示页面如下：

在九宫格中输入的数字不符合规则

  当我们输入的数字符合规则时，就能得到正确的答案，比如，我们在 http://www.cn.sudokupuzzle.org/上随便找一个“骨灰级”的数独并输入，页面如下：

“骨灰级”的数独

当我们按下“Show Answer”按钮时，显示的答案如下：

显示答案

  当按下“Clear”按钮时，所有格子将会被清空，这样我们就能就行下一次破解啦~~
  本次分享到此结束，欢迎大家交流~~
  P.S.写这个项目主要是为了学习JavaScript,因为最近刚开始接触前端。欢迎大家访问这个项目的Github地址： https://github.com/percent4/Sudoku-Solver-JavaScript-Version .

文章标签：
JavaScript
前端开发
Python
关键词：
JavaScript代码
JavaScript破解
jclian91
目录
相关文章
那年春天
|
2月前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
那年春天
128 58
众所周知
|
2月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展，代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具，可以确保代码风格一致，提升团队协作效率和代码质量。
众所周知
264 2
Li370234940
|
2月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
Li370234940
44 0
极客刘
|
15天前
|
JavaScript 前端开发 测试技术
在 golang 中执行 javascript 代码的方案详解
本文介绍了在 Golang 中执行 JavaScript 代码的四种方法：使用 `otto` 和 `goja` 嵌入式 JavaScript 引擎、通过 `os/exec` 调用 Node.js 外部进程以及使用 WebView 嵌入浏览器。每种方法都有其适用场景，如嵌入简单脚本、运行复杂 Node.js 脚本或在桌面应用中显示 Web 内容。
极客刘
50 15
在 golang 中执行 javascript 代码的方案详解
游客qeoynko2nmbgk
|
3月前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
游客qeoynko2nmbgk
54 0
路边两盏灯
|
1月前
|
JavaScript 前端开发
【Azure Developer】在使用Azure Bot Service JavaScript的实例代码遇见Cannot find module 'node:crypto'
Error: Cannot find module 'node:crypto'
路边两盏灯
53 6
【Azure Developer】在使用Azure Bot Service JavaScript的实例代码遇见Cannot find module 'node:crypto'
疯狂的猿
|
1月前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码，该网页可进行随机抽取一个数据，页面动画高科技、炫酷感觉的随机抽奖效果，简单好用，欢迎下载！
疯狂的猿
45 3
原生js炫酷随机抽奖中奖效果代码
游客54bz4h3flp7ai
|
19天前
|
JSON JavaScript 关系型数据库
node.js连接GBase 8a 数据库 并进行查询代码示例
node.js连接GBase 8a 数据库 并进行查询代码示例
游客54bz4h3flp7ai
28 0
龙大吉
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码，包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展，代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码，包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具，可以显著提升编码效率和代码质量。
龙大吉
443 4
疯狂的猿
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码，带歌词显示。包括支持单曲循环，歌词显示，歌曲搜索，音量控制，列表循环等功能。利用json获取音乐歌单和歌词，基于html5 audio属性手机音乐播放器代码。
疯狂的猿
108 6

热门文章

最新文章

  • 1
    《JavaScript框架设计》——1.4　类型的判定
  • 2
    JavaScript FAQ（六）——字符串
  • 3
    JavaScript右下角信息提示插件Notyf
  • 4
    【温故而知新-Javascript】使用Web存储
  • 5
    javascript工厂模式和构造方法
  • 6
    是时候开始使用JavaScript严格模式了
  • 7
    测试驱动javascript开发 -- 3.测试驱动开发过程（上）
  • 8
    javascript从定义到执行 你应知这些事
  • 9
    第14章 使用Kotlin开发JavaScript代码 《Kotin 编程思想·实战》
  • 10
    Nightwatch.js – 轻松实现浏览器的自动测试
  • 1
    AJAX载入外部JS文件到页面并让其执行的方法（附源码）
    70
  • 2
    在Python中调用和执行JavaScript
    430
  • 3
    报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决？
    433
  • 4
    原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查，通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
    99
  • 5
    JavaScript原生代码处理JSON的一些高频次方法合集
    50
  • 6
    数字太大了，计算加法、减法会报错，结果不正确？怎么办？用JavaScript实现大数据（超过20位的数字）相加减运算。
    104
  • 7
    【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
    177
  • 8
    sd.js 2.0封装：更加简化请求传参内容（逐步废弃、逐渐日落2024.01.02）
    58
  • 9
    设置WebStorm像VSCode一样每行代码结尾自动格式化加入“；”分号（JavaScript、TypeScript格式化）
    424
  • 10
    JS去除字符串的方法
    71

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    fs.oss.accessKeyId和fs.oss.accessKeySecret。