数独游戏,前端实现

最新推荐文章于 2024-04-24 09:47:59 发布
人类天才研究所
最新推荐文章于 2024-04-24 09:47:59 发布
阅读量356
点赞数 1
文章标签：前端游戏 javascript python 开发语言
本文链接：https://blog.csdn.net/qq_51340284/article/details/130569073
版权
在这里插入图片描述
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    window.onload = function () {

        var arr = ["1","2","3","4","5","6","7","8","9"];

        var flag = true;

        var buten = document.getElementById("butten");

        var elementsByTagName = document.getElementsByTagName("input");
        //判断输入是否合法
        for (let i = 0; i < elementsByTagName.length; i++) {
            /*elementsByTagName[i].setAttribute("value","5")*/
            elementsByTagName[i].onblur = function () {
                this.style.color = "red";
                if (arr.indexOf(this.value) == -1 && this.value.length>0){
                    if (this != buten){
                        alert("您输入有错误，重新输入");
                        this.value = null;
                    }
                }
            }
        }
        //检验是否能够构成数独
        function get_hen_shudu() {

            function f(j) {
                var panduna_arr = new Array();
                for (let i = 0; i < 9; i++) {
                    panduna_arr.push(elementsByTagName[j*9+i].value);
                }
                flag = if_repetition(panduna_arr)
            }
            for (let j = 0; j < 9; j++) {
                f(j)
            }

        }

        function get_shu_shudu() {
            function f(j) {
                var panduna_arr = new Array();
                for (var i = 0; i < 9; i++) {
                    panduna_arr.push(elementsByTagName[j+i*9].value)
                }
                flag = if_repetition(panduna_arr)
            }
            for (let i = 0; i < 9; i++) {
                f(i)
            }
        }

        function get_fang_shudu() {
            function f(i) {
                var panduna_arr = new Array();
                for (let j = 0; j < 3; j++) {
                    panduna_arr.push(elementsByTagName[i+j].value)
                    panduna_arr.push(elementsByTagName[i+j+9].value)
                    panduna_arr.push(elementsByTagName[i+j+18].value)
                }
                flag = if_repetition(panduna_arr)
            }
            for (let i = 0; i < 3; i++) {
                for (let j = 0; j < 3; j++) {
                    f(i*27+j*3)
                }
            }

        }

        function if_repetition(arr) {
            var biaoji = 0;
            /*alert("判断")*/
            for (let i = 0; i < arr.length; i++) {
                for (let j = 0; j < arr.length; j++) {
                    if (arr[i] == arr[j]){
                        biaoji++;
                    }
                }
            }
            if (biaoji == 9){
                return true;
            }else {
                return false;
            }
        /*alert("判断结束")*/
        }
        //绑定点击事件
        buten.onclick = function () {
            var show = true
            for (let i = 0; i < elementsByTagName.length; i++) {
                if (!(elementsByTagName[i].value > 0)){
                    show = false;
                }
            }
            if (show == true){
                get_hen_shudu()
                get_shu_shudu()
                get_fang_shudu()
                if (flag == true){
                    document.getElementsByTagName("h2")[0].innerHTML = "恭喜！！！"
                }else {
                    /*alert("失败")*/
                    document.getElementsByTagName("h2")[0].innerHTML = "出错了！！！"
                }
            }else {
                alert("您还没有输入完")
            }
        }

        function doSelf() {
            
        }
    }
</script>
<style>
    div:first-child{
        text-align: center;
        font-size: 50px;
    }
    h2{
        float: right;
        color: #FFD026;
        font-size: 60px;
    }
    div:last-child{
        margin-top: 70px;
        text-align: center;
    }
    table{
        margin: auto;
        border: 2px solid gray;
    }
    input{
        text-align: center;
        width: 40px;
        height: 40px;
        font-size: 30px;
    }
    #butten{
        color: black;
        font-size: 30px;
    }
</style>
<body>
<div>
    <strong>
        数独
    </strong>
</div>
<div>
    <table>
        <tr>
            <td>
                <input type="text">
                <input type="text" value="6" disabled>
                <input type="text" value="1" disabled>
                <input type="text">
                <input type="text" value="3" disabled>
                <input type="text">
                <input type="text">
                <input type="text" value="2" disabled>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text">
                <input type="text" value="5" disabled>
                <input type="text">
                <input type="text">
                <input type="text">
                <input type="text" value="8" disabled>
                <input type="text" value="1" disabled>
                <input type="text">
                <input type="text" value="7" disabled>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text">
                <input type="text">
                <input type="text">
                <input type="text">
                <input type="text">
                <input type="text" value="7" disabled>
                <input type="text">
                <input type="text" value="3" disabled>
                <input type="text" value="4" disabled>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text">
                <input type="text">
                <input type="text" value="9" disabled>
                <input type="text">
                <input type="text">
                <input type="text" value="6" disabled>
                <input type="text">
                <input type="text" value="7" disabled>
                <input type="text" value="8" disabled>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text">
                <input type="text">
                <input type="text" value="3" disabled>
                <input type="text" value="2" disabled>
                <input type="text">
                <input type="text" value="9" disabled>
                <input type="text" value="5" disabled>
                <input type="text">
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" value="5" disabled>
                <input type="text" value="7" disabled>
                <input type="text">
                <input type="text" value="3" disabled>
                <input type="text">
                <input type="text">
                <input type="text" value="9" disabled>
                <input type="text">
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" value="1" disabled>
                <input type="text" value="9" disabled>
                <input type="text">
                <input type="text" value="7" disabled>
                <input type="text">
                <input type="text">
                <input type="text">
                <input type="text">
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" value="8" disabled>
                <input type="text">
                <input type="text" value="2" disabled>
                <input type="text" value="4" disabled>
                <input type="text">
                <input type="text">
                <input type="text">
                <input type="text" value="6" disabled>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text">
                <input type="text" value="4" disabled>
                <input type="text">
                <input type="text">
                <input type="text" value="1" disabled>
                <input type="text">
                <input type="text" value="2" disabled>
                <input type="text" value="5" disabled>
                <input type="text">
            </td>
        </tr>
    </table>
</div>

<a href="javascript:void 0" id="butten">提交</a>
<h2>
    <!--恭喜！！！-->
</h2>
</body>
</html>