Diagonal Sudoku

Diagonal Sudoku

by superchangme

HTML

<form method="post" action="" id="shuduForm" name="shuduForm">
    <input type="hidden" name="usetime" />
    <div class="table-wrap">
        <div class="hd">
            <h1>对角线数独</h1>
            <div style="float: left">
                <span>您的尊姓大名:</span><input name="username">
            </div>
            <div style="float: right">
                <span>难度级别:</span>
                <select name="gameLevel">
                    <option value="easy">简单</option>
                    <option value="middle">中等</option>
                    <option value="hard">困难</option>
                </select>
            </div>
            <div style="clear: both"></div>
            <div id="useTime">
                已用时间:
                <span class="hour"></span>:
                <span class="minute"></span>:
                <span class="second"></span>
            </div>
        </div>
        <table id="shuduBox" cellspacing="0" cellpadding="0"></table>
        <div class="button-wrap">
            <button type="button" id="wipeFill">重新开始</button>
            <button type="button" id="seeAnswer">查看答案</button>
            <button type="button" id="resetGame">再来一盘</button>
        </div>
        <div class='lay'>
            <span>1</span><span>2</span><span>3</span>
            <span>4</span><span>5</span><span>6</span>
            <span>7</span><span>8</span><span>9</span>
        </div>
    </div>
</form>

<div id="log"> </div>

CSS

html,body{
           height: 100%;
        }
        body{
            background: aliceblue;
        }
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div:after{
            content:" ";
            display: table;
            clear: both;
        }
        .table-wrap{
            position: relative;
            font-family: Arial, Verdana, Helvetica, sans-serif;
            font-size: 1.2em;
            text-align: center;
        }
        table#shuduBox{
            width:450px;
            height:450px;
            margin: 0 auto 30px;
            display: table;
            border-collapse:collapse;
            border:3px solid rgb(184, 134, 11);
        }
        .button-wrap{
            margin-right: -50px;
            display: inline-block;
        }
        .button-wrap button{
            padding: 20px 15px;
            margin-right: 50px;;
            cursor: pointer;
        }

        table#shuduBox td{
/*
            border:3px solid lightgoldenrodyellow;
*/
            text-align: center;
            color: black;
            cursor: pointer;
            vertical-align: middle;
            width:50px;
            height:50px;
            padding: 0;
            line-height: 50px;
        }
        td.need-fill{
            color: green!important;
            font-weight: bold;
            cursor: pointer!important;
        }
         td.need-fill:hover{
            background: #add8e6;
          }

        td.warning{
            color: red!important;
            font-weight: bold;
        }
        .hd{
            width: 450px;
            margin: 0px auto 0;
            font-size: 16px;
        }
        .hd h1{
            line-height: 2em;
            color:rgb(184, 134, 11);
        }
        #useTime{
            margin-top: 20px;
        }
        .hd span{
            line-height: 25px;
        }
        .hd input,.hd select{
           width:120px;
          ...

JavaScript

/* common function*/
var SD_ARR=initGrid(),IN_ARR=[1,2,3,4,5,6,7,8,9],tryTimes= 0,FILL_ARR=[],SWORD_ARR=[],
        SWORD_LEFT=[],SWORD_RIGHT=[],SD_ARR_COPY=[],NEED_FILL_LEN=0,GAME_TIMER,GAME_LEVEL="easy",
        GAME_START_TIME,GAME_END_TIME,
        SWAP_MAX=500;

function initGrid(){
   return (function(i){var a=[];while(i--){a.push(new Array(9))} return a;})(9);
}

function createGrid(n){
    var row=parseInt((n-1)/3)*3,col=((n-1)%3)* 3,leftPos=[],left=[],isExsit=[],isExsiStr="",temp;
    for(var i=row;i<row+3;i++)
        for(var j=col;j<col+3;j++){
            if(SD_ARR[i][j]==undefined){
                leftPos.push({row:i,col:j});
            }else{
                isExsit.push(SD_ARR[i][j]);
            }
        }
    isExsiStr=isExsit.join("");
    left=IN_ARR.filter(function(o){return isExsiStr.indexOf(o)==-1;})
    do{
        temp=left.splice(0,1).join("");
        for(var i= 0,l=leftPos.length;i<l;i++){
            if(fillBeforeFilter(leftPos[i].row,leftPos[i].col,[temp]).length==1){
                SD_ARR[leftPos[i].row][leftPos[i].col]=temp;
                leftPos.splice(i,1);
                break;
            }
        }
    }while(left.length>0);
}

for(var i=0;i<9;i++){
    if(i>2){
        SWORD_ARR.push({row:i,col:i});
    }
    if(8-i>2&&i!=4){
        SWORD_ARR.push({row:8-i,col:i});
    }
}


function createPoint(){
    return parseInt(Math.random()*IN_ARR.length)+1;
}
function createSword(){
    //create SWORD_LEFT
    var center=createPoint(),current=IN_ARR.filter(function(o){return o!=center}),
        left_arr=current.slice(0),right_arr=current.slice(0),right_arr2=[],temp,index,filter=[];

    SD_ARR[4][4]=center;
    for(var i=0;i<9;i++){
        if(i!=4){
            index=parseInt((Math.random()*left_arr.length));
            temp=left_arr.splice(index,1).join("");
            SD_ARR[i][i]=temp;
        }
    }
    right_arr2=right_arr.filter(function(o){
            return o!=SD_ARR[0][0]&&o!=SD_ARR[8][8];
    });

   ...