https://blog.csdn.net/Apple_Coco/article/details/118944483?spm=1001.2014.3001.5502
文章目录
前言
很久以前的课设习题，最近翻出来后发现界面做的还挺好看的，于是就想给大家分享出来，有需要的小伙伴自取，如果能请博主喝杯奶茶就更好啦哈哈
界面展示
在线访问：http://sudoku.systemcall.xyz
项目源码
https://github.com/ylsislove/sudoku
如果你喜欢这个项目，欢迎给它点个小星星呀 ଘ(੭ˊ꒳ˋ)੭✧
本文转自 https://blog.csdn.net/Apple_Coco/article/details/118944483?spm=1001.2014.3001.5502，如有侵权，请联系删除。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数独游戏</title>
<link rel="stylesheet" type="text/css" href="sudoku.css">
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="box">
<h1>基于舞蹈链的数独解决方案</h1>
<!-- 记录每一个级别的进度 -->
<span id="lv_1_num" style="display: none;">0</span>
<span id="lv_2_num" style="display: none;">0</span>
<span id="lv_3_num" style="display: none;">0</span>
<span id="lv_4_num" style="display: none;">0</span>
<span id="lv_5_num" style="display: none;">0</span>
<!-- 菜单列表 开始 -->
<div class="select">
<select id="mySelect" onchange="selectLv()">
<option id="select_1" value="1">初级 (0/21)</option>
<option id="select_2" value="2">中级 (0/21)</option>
<option id="select_3" value="3">高级 (0/21)</option>
<option id="select_4" value="4">地狱 (0/20)</option>
<option id="select_5" value="5">疯狂 (0/20)</option>
</select>
<div class="time">
已用时：<span id="timer">00:00:00</span>
</div>
<button id="next_game" onclick="next()">下一关</button>
<button id="start_game" onclick="start()">开始游戏</button>
<button onclick="showAnser()">显示答案</button>
<button onclick="restart()">重新开始</button>
</div>
<!-- 菜单列表 结束 -->
<!-- 数独面板 开始-->
<table id="sudokuBoard">
<tbody><tr>
<td class="boardCellGroupA">
<table><tbody>
<tr>
<td class="boardCell"><div id="0"></div></td>
<td class="boardCell"><div id="1"></div></td>
<td class="boardCell"><div id="2"></div></td>
</tr>
<tr>
<td class="boardCell"><div id="9"></div></td>
<td class="boardCell"><div id="10"></div></td>
<td class="boardCell"><div id="11"></div> </td>
</tr>
<tr>
<td class="boardCell"><div id="18"></div></td>
<td class="boardCell"><div id="19"></div></td>
<td class="boardCell"><div id="20"></div></tr>
</tbody></table>
</td>
<td class="boardCellGroupB">
<table><tbody>
<tr>
<td class="boardCell"><div id="3"></div></td>
<td class="boardCell"><div id="4"></div></td>
<td class="boardCell"><div id="5"></div></td>
</tr>
<tr>
<td class="boardCell"><div id="12"></div></td>
<td class="boardCell"><div id="13"></div></td>
<td class="boardCell"><div id="14"></div></td>
</tr>
<tr>
<td class="boardCell"><div id="21"></div></td>
<td class="boardCell"><div id="22"></div></td>
<td class="boardCell"><div id="23"></div></tr>
</tbody></table>
</td>
<td class="boardCellGroupA">
<table><tbody>
<tr>
<td class="boardCell"><div id="6"></div></td>
<td class="boardCell"><div id="7"></div></td>
<td class="boardCell"><div id="8"></div></td>
</tr>
<tr>
<td class="boardCell"><div id="15"></div></td>
<td class="boardCell"><div id="16"></div></td>
<td class="boardCell"><div id="17"></div></td>
</tr>
<tr>
<td class="boardCell"><div id="24"></div></td>
<td class="boardCell"><div id="25"></div></td>
<td class="boardCell"><div id="26"></div></tr>
</tbody></table>
</td></tr>
<!-- ------------------------ 第二排 -------------------------- -->
<tr>
<td class="boardCellGroupB">
<table><tbody>
<tr>
<td class="boardCell"><div id="27"></div></td>
<td class="boardCell"><div id="28"></div></td>
<td class="boardCell"><div id="29"></div></td>
</tr>
<tr>
<td class="boardCell"><div id="36"></div></td>
<td class="boardCell"><div id="37"></div></td>
<td class="boardCell"><div id="38"></div></td>
</tr>
<tr>
<td class="boardCell"><div id="45"></div></td>
<td class="boardCell"><div id="46"></div></td>
<td class="boardCell"><div id="47"></div></tr>
</tbody></table>
</td>
<td class="boardCellGroupA">
<table><tbody>
<tr>
<td class="boardCell"><div id="30"></div></td>
<td class="boardCell"><div id="31"></div></td>
<td class="boardCell"><div id="32"></div></td>
</tr>
<tr>
<td class="boardCell"><div id="39"></div></td>
<td class="boardCell"><div id="40"></div></td>
<td class="boardCell"><div id="41"></div></td>
</tr>
<tr>
<td class="boardCell"><div id="48"></div></td>
<td class="boardCell"><div id="49"></div></td>
<td class="boardCell"><div id="50"></div></tr>
</tbody></table>
</td>
<td class="boardCellGroupB">
<table><tbody>
<tr>
<td class="boardCell"><div id="33"></div></td>
<td class="boardCell"><div id="34"></div></td>
<td class="boardCell"><div id="35"></div></td>
</tr>
<tr>
<td class="boardCell"><div id="42"></div></td>
<td class="boardCell"><div id="43"></div></td>
<td class="boardCell"><div id="44"></div></td>
</tr>
<tr>
<td class="boardCell"><div id="51"></div></td>
<td class="boardCell"><div id="52"></div></td>
<td class="boardCell"><div id="53"></div></tr>
</tbody></table>
</td>
</tr>
<!-- ------------------------ 第三排 -------------------------- -->
<tr>
<td class="boardCellGroupA">
<table><tbody>
<tr>
<td class="boardCell"><div id="54"></div></td>
<td class="boardCell"><div id="55"></div></td>
<td class="boardCell"><div id="56"></div></td>
</tr>
<tr>
<td class="boardCell"><div id="63"></div></td>
<td class="boardCell"><div id="64"></div></td>
<td class="boardCell"><div id="65"></div></td>
</tr>
<tr>
<td class="boardCell"><div id="72"></div></td>
<td class="boardCell"><div id="73"></div></td>
<td class="boardCell"><div id="74"></div></tr>
</tbody></table>
</td>
<td class="boardCellGroupB">
<table><tbody>
<tr>
<td class="boardCell"><div id="57"></div></td>
<td class="boardCell"><div id="58"></div></td>
<td class="boardCell"><div id="59"></div></td>
</tr>
<tr>
<td class="boardCell"><div id="66"></div></td>
<td class="boardCell"><div id="67"></div></td>
<td class="boardCell"><div id="68"></div></td>
</tr>
<tr>
<td class="boardCell"><div id="75"></div></td>
<td class="boardCell"><div id="76"></div></td>
<td class="boardCell"><div id="77"></div></tr>
</tbody></table>
</td>
<td class="boardCellGroupA">
<table><tbody>
<tr>
<td class="boardCell"><div id="60"></div></td>
<td class="boardCell"><div id="61"></div></td>
<td class="boardCell"><div id="62"></div></td>
</tr>
<tr>
<td class="boardCell"><div id="69"></div></td>
<td class="boardCell"><div id="70"></div></td>
<td class="boardCell"><div id="71"></div></td>
</tr>
<tr>
<td class="boardCell"><div id="78"></div></td>
<td class="boardCell"><div id="79"></div></td>
<td class="boardCell"><div id="80"></div></tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
</div><!-- box结束 -->
</body>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="dancing_link.js"></script>
<script type="text/javascript" src="soduku.js"></script>
</html>
dancing_link.js
var MAX_ROWS = 729;
var MAX_COLS = 324;
var lv_array;
onmessage = function (evt) {
lv_array = evt.data; // 通过evt.data获得发送来的数据
dlx_solver(); // 运行DLX算法
postMessage(outgrid); // 将获取到的数据发送会主线程
}
function data() {
this.left = this;
this.right = this;
this.up = this;
this.down = this;
this.col = this;
this.row = 0;
}
function column() {
this.left = this;
this.right = this;
this.up = this;
this.down = this;
this.size = 0;
this.name = 0;
}
// 存储通过精确覆盖求解出来的答案
var output = new Array(MAX_ROWS / 9);
// 舞蹈链初始化
var matrix = new Array(MAX_ROWS);
for(var i = 0; i < MAX_ROWS; ++i) {
matrix[i] = new Array(MAX_COLS);
for (var j = 0; j < MAX_COLS; ++j)
matrix[i][j] = null;
}
var columns = new Array(MAX_COLS);
var header = new column();
var size = 0;
function dlx_solver() {
// 初始化列头数组
for (var i = 0; i < MAX_COLS; ++i)
columns[i] = new column();
// 链接列头元素
for (i = 0; i < MAX_COLS; ++i) {
if (i === 0) {
columns[i].left = header;
columns[i].right = columns[i + 1];
}
else if (i === MAX_COLS - 1) {
columns[i].left = columns[i - 1];
columns[i].right = header;
}
else {
columns[i].left = columns[i - 1];
columns[i].right = columns[i + 1];
}
columns[i].name = i;
}
header.right = columns[0];
header.left = columns[MAX_COLS - 1];
// 初始化数据矩阵
for (i = 0; i < MAX_ROWS; ++i) {
matrix[i][parseInt(i / 9)] = new data();
matrix[i][parseInt(i / 9)].row = i;
matrix[i][81 + 9 * parseInt(i / 81) + i % 9] = new data();
matrix[i][81 + 9 * parseInt(i / 81) + i % 9].row = i;
matrix[i][162 + i % 81] = new data();
matrix[i][162 + i % 81].row = i;
matrix[i][243 + i % 9 + 9 * parseInt(i / 27) - 27 * parseInt(i / 81) + 27 * parseInt(i / 243)] = new data();
matrix[i][243 + i % 9 + 9 * parseInt(i / 27) - 27 * parseInt(i / 81) + 27 * parseInt(i / 243)].row = i;
}
// 矩阵 行链接
for (i = 0; i < MAX_ROWS; ++i) {
var size = 0;
var row = new Array(MAX_COLS);
for (var j = 0; j < MAX_COLS; ++j) {
if (matrix[i][j] !== null) {
row[size] = matrix[i][j];
++size;
}
}
for (var x = 0; x < size; ++x) {
if (x === 0) {
row[x].left = row[size - 1];
row[x].right = row[x + 1];
}
else if (x === size - 1) {
row[x].left = row[x - 1];
row[x].right = row[0];
}
else {
row[x].left = row[x - 1];
row[x].right = row[x + 1];
}
}
}
// 矩阵 列链接
for (j = 0; j < MAX_COLS; ++j) {
size = 1;
var col = new Array(MAX_ROWS + 1);
col[0] = columns[j];
for (i = 0; i < MAX_ROWS; ++i) {
if (matrix[i][j] !== null) {
col[size] = matrix[i][j];
++size;
matrix[i][j].col = columns[j];
++(columns[j].size);
}
}
for (x = 0; x < size; ++x) {
if (x === 0) {
col[x].up = col[size - 1];
col[x].down = col[x + 1];
}
else if (x === size - 1) {
col[x].up = col[x - 1];
col[x].down = col[0];
}
else {
col[x].up = col[x - 1];
col[x].down = col[x + 1];
}
}
}
for (i = 0; i < 9; i++) {
for (j = 0; j < 9; j++) {
var value = parseInt(lv_array.charAt(i * 9 + j));
if (value != '0') {
parseInput(parseInt(value), i, j);
}
}
}
if (search()) {
console.log("dlx_success");
} else {
console.log("dlx_fail")
}
}
function parseInput(n, r, c) {
var row = r * 81 + c * 9 + (n - 1);
coverClue(matrix[row][parseInt(row / 9)]);
}
function coverClue(d) {
output[size] = d.row;
++ size;
coverCol(d.col);
var r = d.right;
while (r != d){
coverCol(r.col);
r = r.right;
}
}
function coverCol(c) {
c.left.right = c.right;
c.right.left = c.left;
var d = c.down;
while (d != c) {
var r = d.right;
while (r !== d) {
r.up.down = r.down;
r.down.up = r.up;
--(r.col.size);
r = r.right;
}
d = d.down;
}
}
function uncoverCol(c) {
var u = c.up;
while (u != c) {
var l = u.left;
while (l !== u) {
l.up.down = l;
l.down.up = l;
++(l.col.size);
l = l.left;
}
u = u.up;
}
c.left.right = c;
c.right.left = c;
}
function findSmallest() {
var c = null;
var r = header.right;
var size = MAX_ROWS + 1;
while(r != header)
{
if(r.size < size)
{
size = r.size;
c = r;
}
r = r.right;
}
return c;
}
function search() {
if (header.right === header) {
success();
return true;
}
var c = findSmallest();
coverCol(c);
var d = c.down;
while (d !== c) {
output[size] = d.row;
++ size;
var r = d.right;
while (r !== d) {
coverCol(r.col);
r = r.right;
}
// 进行递归
if (search())
return true;
var l = d.left;
while (l !== d) {
uncoverCol(l.col);
l = l.left;
}
d = d.down;
--size;
}
uncoverCol(c);
return false;
}
function success() {
outgrid = new Array(9);
for (var i = 0; i < 9; ++i){
outgrid[i] = new Array(9);
for (var j = 0; j < 9; ++j)
outgrid[i][j] = 0;
}
for (i = 0; i < size; ++i)
{
var pos = parseInt(output[i] / 9);
outgrid[parseInt(pos / 9)][pos % 9] = output[i] % 9 + 1;
}
}
data.js
var sudokuData = [
["00000000426010000001005903060720049000007016808400530039186250704651790372590400057932681426314875941875923663728149595247316818469537239186254784651792372593468116940",
"50000000630010400080000000090520100070269341004687000367945030145831790020096850752478913636712485989153672493524167878269341514687529367945238145831796221396854716939",
"79803060030002600001000000090051478684060700307100259050910843013204506748026305979843162535482697121675934892351478684569721367138259456917843213294586748726315916938",
"00008000071050000060200009400930014704327056807610830000042095043795128692583600139468271571859463265271389428936514714327956857614832986142795343795128692583647116937",
"60009104500904000800050000076018059003802546790030781220075038439041820680763200162389174557924613848157362976218459313892546795436781221675938439541827684763295116936",
"90000005008042109300400500700201307001376000064089050003805906215907634827604801092163785478542169336498512789251347651376428964789253143815976215927634827634891516935",
"60091008003000470540000003020480005776000904838170502994638200150049020012365700465791348283926471541257893629483615776512934838174562994638257157849126312365789416934",
"10703008009005701000401072000136000707514006320097014885200347100972185671658493212743968569825731453481672948136259797514826326397514885269347134972185671658493216933",
"50600010003000000000809700027930450860401872008050006004300169210283945779504630152648317993712584641869723527936451865491872338157296484375169216283945779524638116932",
"00000023005100000008070600003006040106920400870083905037502190419607852302895070664718523995134286728379614583256749156921437871483965237562198419647852342895371616931",
"00020406008000004079000185083700900040275319800942063764037298092381540650090601031528476928659734179463185283716952446275319815942863764137298592381547657894621316930",
"03800007100630504000200000000904018380070390550089276094516003262100840700725401943862957119637524875248139627954618386471392551389276494516783262193845738725461916929",
"06010000000000800705904000000750020010306450804298700381009302697680035403467509176812943542135896735974618268753124919326457854298761381549372697681235423467589116928",
"04032000980000000500300040630174906279061008006258370023695804717400095005807002064732581981946723552389147638174956279561238446258379123695814717423695895817462316927",
"04000280000706000000030000023901657405870400060009010240060725902090531859308046794517283631746892586235974123981657415872469367459318248163725972694531859328146716926",
"04060001010040700808030200580390000607013850090452603700129578050076324102784060974568931213245796868931247585397412627613859491452683746129578359876324132784165916925",
"40000070056000813008104000200051920017548006090007345020986034075603002983492061749235178656729813438174659264351927817548296392867345121986734575613482983492561716924",
"00080000780796010000300005020008360003564127004029750018472936536205871070901040051683492782796514349317285627158369493564127864829753118472936536245871975931648216923",
"00010000240072000000900000826005730409000078000863905100430216501298003737546180983719654245672891312954367826185739459321478674863925198437216561298543737546182916922",
"03801000006004050010070526004512008000090075082960013490000137545130862937659284053821649726784951319473526874512398661398475282965713498246137545137862937659284116921",
"00056000009500063401600085208060250706000520345078096157312640894035710662184907523456871989527163471693485238961254716749528345278396157312649894835712662184937516920"],
["00801350031625978450080010378000031000400180210500800700318007080030060140109623824871356931625978459786412378942531663497185212563894796318247585234769147159623843694",
"70000241000200067000690000005000000100401900708062004030520070040800003000000405073986241584215367951694732895347826162431958718762594336528179447859613229173485643687",
"00500040000010300000007080000000000300805000000000600900004050039000000060000000171569843284612397592347581656921478313895762447283615928134956739756124865478239143687",
"00780000500003000400090480000000391090600100008000000760005900005040000007001002049786213586213579451397486274528391693674125828159634762835947115942768337461852943687",
"00740000040000301030607240000020009850304000006000030080000503000002000509030806495746182342895371631687245917423659858314967226958734184269513763172498579531826443687",
"06900000000540100004203000090005002001000070000608000900006015000000038000030704036987521487542169314263987598375642151429376872618453943796815269154238725831794643687",
"00050006020074005000706001800003700001000000508000000700080000050020109017000620084351976226174835995736241849513782671268493538692514762489357153827169417945628343687",
"00002016001200000540060000800080201007040900090007080000400008119003020000500630075892416361278349543961572854386291787145963292637185436429758119753824628514637943687",
"00080000001630007000300600460040009020005008000400800290007010800500400700009000052984761341632587987391652465843279123175948679416835294257316816528493738769124543686",
"20075960000040200000760302047200018318600049590000020000080400000930501070092150023875964169148235754761382947259618318623749595314827631587496282936571476492153843686",
"00060000000207000660084907008000040029008003770430082000002000000940000240093508093765214884217395661584927358326741929158463776439182515872639437941856242693578143686",
"00061030005600000000040058001000480200900003062009000110080200040530000000000005787461532925693817493142758651376489274928163562859374119785246346537921838214695743686",
"06750040209007000050002100960900005870090004308000069790004300100610082000000293086753941229147638553482176964931725875296814318325469792864357137619582441578293643686",
"65700008023008654700875060030500980098600010207000039070000000050029740880451370065743298123198654749875162334512987698637415217286539471964823556329741882451376943686",
"00602008000005000701000604040096000105000730007000580000700490000850002090030000073642918529415863781573624948296357115984736267321589452768491334859172696137245843686",
"03010000000007008000000216709021000000090802050000040037809000000070004001000600063718459225167938484953216779421563816394872558236741937849125692675384141582697343686",
"30069002504030000000004736000007005176001000000040200010276000000000100098005407031769842564932571882514736923487695176851924359143268715276389447698153298325417643686",
"04009510030000008017500690000400001000041700000800005000100000908050940006000152384279513639614278517538694292465831765341729871892365453126487928753946146987152343686",
"20070001010000503700803000400009300000000002802700000004090070000200400609306050023478691516942583757813926448529367191654732832761845964195278385237419679386154243685",
"00001300000090700000500020010000000300000000000680040000000000000050084073009000086421397521395768497564823118942576342736915835687149254278631969153284773819452643685",
"00936001400600000070005000600000000000784002504217000000000003006521004002060080025936871418672459373495128661853247939784612554217936897148563286521394742369785143685"],
["00180004000006300005040000608002900520000090090000010000370005000008200004060000769185724347826359135249178678612943521534697893457816282371465956798231414963582754694",
"00000050000004000308901000000600001000000500009020300000000600030200000000009008041362957862754819358931762423697481587416593219528346794873625136285174975149238654685",
"06005010002810007000000290010020000007900023000030000400509708009040076000702000076495812392813457653176294818324965747958623125637189431569748289241376564782531954685",
"00500307040009000800040010080610400007000002100006740360030000700802000004000850026581397443179625898745213682613479537458962151926748369234581775862134914397856254685",
"00080507080000290300074000108000001070000050000600000430500900640052000009006100063189547287461295352974386198325461774213659815698732431547928646752813929836174554685",
"00300000000005042040601050700040780000006900070000001001270005800000000459080000025367418997135842648691253716543789232816974574928561361274395883759126459482637154685",
"90400000800070006001008000460053040030080620020000180007040000908000034000905000093426517882571496371638952469853241734187629525794183617342865958269734146915378254684",
"90000350000025000900200000480009260000010085272680000000460900010002070000000000191746352864825137953298716485139264749317685272684591337461928518952473626573849154684",
"00000603510000004006700102000065000000500400190000730001000248064000300007000000989427613515283974636754192843165829772539486198612735451976248364891357227348561954684",
"09200050000095000005400076930980000500500900000750691090000500058000009000009125079216458363895712415432876936981247521547983684753691292678534158124369747369125854684",
"08060005007000000050090200134000700000200000300050069000000010040000620000380904028964135767138592453497286134629751895216847381753469276542318949871623512385974654684",
"00500200146000000000170060008060570060310900800730406909000100600640000200000095037596248146851329792174863518962574364317952825738416989425137653649781271283695454684",
"00340000040009800110620000001080000700706000202070040004060103000008050000004019029341687547539826118627534991483265735716498262875941354962173876198352483254719654684",
"10006090005070000800000000020000061030040800000000000008700000000009002004000000017386594245973216882614975329857361436541827971492638598725143653169482764238759154684",
"00000000006900020010046789050060000000370001080001030243080000060000012000109000034825967176918325415246789351463278992374851687691534243782196569537412828159643754684",
"25000000000304005700080010000432000000076001080000900310590006007003000000000020125169734898324165774685319251432897632976481586751942313598276447213658969847523154684",
"00000017000000000039000500000780040000000300980000000003010000020000000500074000042568917378631459239127586495782143614256378986349725163815294727493861551974632854683",
"00700200002000060400093000210342005809006000000030040090065000041000030000000407063784219582917563454193678216342795879456821325839146797265384141578932638621457954683",
"46000320000702080300080000500000240020003801008007000007100500400230000009008013046875329151792684392384167573619245825463871918957432637126598484231956769548713254683",
"30000004070006200000000905000000000040510000000000090209000000600005000000840000036971524875486213918234965793162758442519876387653491259328147664795382121847639554683",
"04000000800000007002005000096000020070000000000003000508300000400060000000070900034697152859186247382735461996451823773529684121843796568312579447968315215274938654685"],
["00035000008000060900600000007006900000000000010000005000000740001008000000500003079135682458324167942697851327856934165471329813982475696213748531748596284569213721694",
"50000004100300190000468200000021000080050020003006010400014702010900000307000601052673984178345196291468273569521438784157329623796815435814762916982547347239651821691",
"06082300500000600080079000020000009400930072600000030000007415050300094071003900096182347537245681984579163223618759418934572645796238169827415352361894771453926821691",
"06000000200005004001000900040000090050070000000000210670000005000000100000080000096548731228715364931462958747631892552179643889354217673296485165823179414987526321691",
"00000000009800000006050700400309000050000000700000400070000200000001093000000080045716928319824375636258719427369541854982136781637452978593264162471893593145687221691",
"00900450814280000000000000000000000032000804506100903050060002000000709100000000363921457814287536975893641249572318632716894586154923757369182428435769191648275321691",
"07010009000090000800000214000070100040300080060000051000800900710450000302000600087215439654196372893687214528574163941369587269723851435841926716452798372938645121691",
"09600000000004007010400000000000805005000362090000010700010090860050001000207004029685743138594127617432689576129835445871362992346518754713296863958471281267954321691",
"60080900010206000078010000080600001507009006000108030000060200700000560100001009264582917313246795878915324689623471527359186445178632991864253732497568156731849221690",
"00200000000030240181350000269520000400800000000040850900000910000702584000000790054276139876938245181359467269521378447895621332147856925684913793712584618463792521690",
"00000000904600000000007080100000100000400002000508300080000900001000000000040006078132465994681527335297684127854139613469752869528371486715943241376298552943816721690",
"20507000369305000000003850000054003605031000003000000530000501040000035250090300028517946369325478114763852992154783685431629773689214537246591846978135251892367421690",
"00010490030090000000600000100009005706000002000400300000587000294050003000200179025816497337198524649623758181349265756971832472465381913587946294752613868234179521690",
"01000200000000009000000008400807000000000310000495000003000900002000030000080000091648253748536729127319568435827146979264315816495872363172984582951437654783691221690",
"05009000000080030000400070000000009000004005000300700009000001060000300000000800475239648116987432583425176948563219727614985391358724639742561864891357252176893421690",
"03900004000000000000001200000090300000040000015000000620000080060007000200000009053968724181259467347631258972896341596345172815472893629713586464187935238524619721690",
"03000010700000040050080200004000170080050000000000000000060009501000700000000000043296518798617345257184263924539176886752491319378652472461839531925784665843927121690",
"00020006151600009300001600006005001000060107010070268080196000060000010000013000648729356151687429332951684776835941294268137515374268983196572469542713827413895621690",
"00059000070968043000200006007000000303000000220000190060381072000035000000100004041659328775968243138214756997542861313496587226873195464381972582735419659127634821689",
"70406000000000701900000000000002000030000000019000060000010000000200300000800050275496128326358741998123476584762935132641597819537862463915284757284319641879653221691"],
["03000000008700000900040100000000050050060002009007000010000004020000060000038000063179845248726513992543178631682957457461392889257436116395284725814769374938621532689",
"00000310009000000600000400010300000000060000900500008000080005000400030007090000064259317839127854675816492312348976548761523996532748123984165781475639257693281432689",
"09005000005010000000000003880200400030000000000000016000050000006009070040000000279835241665314827912476953881263495737691582454928716398752634126149378543587169232689",
"01000300000000005080000609060000000000000040790500200020000007000018030000040000041957328672689415385321679468473152913295846797564283124136597856718934239842761532689",
"00600004771300006000001090003087500000000000000014905068000050005000027900700200092653814771392486584571693243987562157126349826814975368239751435468127919745238632689",
"50809000010907005000650010408000600090035000000000730000370006167001002000040003754819267313967425872653819438724691596435178225198734649372586167581342981246953732689",
"06090030590100000000571000000005906000317000040900005084000170000002708000000002976498231598163527432571469827845916365317894241926385784259173659632748113784652932689",
"00004090008201007000000003000000300000470900000600000100008060200000000090000000065734291838291657441957823682516374913472986579685432157348169224869715396123548732689",
"07002305080600030005040070000004700008000206060005000100570000800900014040001900517492385689657132435248671992164758358319246764735829121576493876983514243821967532688",
"07000008000000900603000000008043000000070000000200060900004003010600020000000000067921348581457932623586419798743651256179284334215867972864593119638725445392176832688",
"00010000700000000006003800040390000005000036000000008010900000400005300000700000039812465721567984376453892142398671585124736997631548213986257464275319858749123632688",
"12000490070300000500006000050400200000009300400000800031000089006002000140000020012653497874398162595826714358417236927169358463945871231274589686732945149581623732688",
"00085000200400090000007000050000000000000430680000007000901200000600000000000005063185974278423691529547163854376829191752438686219357445931286717698542332864715932688",
"00000000040000097002036000500000000000001080370000900000000409006000000003100000017649523845328197682936741531284675969571284374853916228765439196412358753197862432688",
"00004600990300020000000000004008000000020013000500000000030000006000004100005000052784631998317526461493285714958372687629413523561749845136897236872954179245168332688",
"00000027003000100000406010080617032002590640700000000000200450000002003008100000061835927473924185625486719384617532912593648797348261539271456846752893158169374232688",
"00000300000005030000900002040090200070000060000080000000000000035006000000040008914529386782765439163978142548691275379234561851387694297452813635816927426143758932687",
"40309000000000080100500000000000000050003004001060020000080000090000005000010200048379162527954683116532897463291458759823714671468529335687941292146375884715236932687",
"00130000700040000000000000250000001020000000000019040000005000000900030000702800048136259796247583173581964259628471321453798687319642514865327962974135835792816432694",
"00000030002000100000050006004000000000003095001080000000000400130000008090007000019642837572536149843859716224975681386713295451384962765298473137461528998127354632688"]
];
soduku.js
var count = 0; // 计时
var timeArea = document.getElementById("timer");
var startGame;
var lv_array;
var outgrid = null;
var lv_1_num = parseInt(document.getElementById("lv_1_num").textContent);
var lv_2_num = parseInt(document.getElementById("lv_2_num").textContent);
var lv_3_num = parseInt(document.getElementById("lv_3_num").textContent);
var lv_4_num = parseInt(document.getElementById("lv_4_num").textContent);
var lv_5_num = parseInt(document.getElementById("lv_5_num").textContent);
var isSuccess = false; // 是否过关
var isFull = false; // 当前级别已通关？
var userAnswer = [
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
];
// 显示答案
showAnser = function() {
// 如果当前已显示答案，则不再重复显示
if (isSuccess) return;
// 获取用户填写的答案
var elem = document.getElementsByClassName("hide-text");
for(var i = 0; i < elem.length; i++) {
var parentID = elem[i].parentNode.id;
if(elem[i].value == "") {
isSuccess = false;
continue;
}
userAnswer[parseInt(parentID / 9)][parentID % 9] = elem[i].value;
}
// 和标准答案进行比对
if (outgrid != null) {
isSuccess = true;
stop();
returnPage();
var num = 0;
for(var i = 0; i < 9; i++) {
for(var j = 0; j < 9; j++) {
var elem = document.getElementById(num);
if(lv_array.charAt(num) != '0') {
elem.innerHTML = lv_array.charAt(num);
} else {
// 用户填写的答案正确，显示绿色
if (userAnswer[i][j] == outgrid[i][j]) {
elem.innerHTML = userAnswer[i][j];
elem.style = "color:#3CB371;font-size:25px;text-align:center;font-family:微软雅黑;height:46px;width:46px;line-height:46px;";
}
// 用户填写的答案为空，显示标准答案，蓝色
else if (userAnswer[i][j] == '0'){
elem.innerHTML = outgrid[i][j];
elem.style = "color:#7B68EE;font-size:25px;text-align:center;font-family:微软雅黑;height:46px;width:46px;line-height:46px;";
isSuccess = false;
}
// 用户填写的答案错误，显示标准答案，红色
else {
elem.innerHTML = outgrid[i][j];
elem.style = "color:#C71585;font-size:25px;text-align:center;font-family:微软雅黑;height:46px;width:46px;line-height:46px;";
isSuccess = false;
}
}
num++;
}
}
isSuccess = true;
}
}
// 选择难度系数
selectLv = function() {
isSuccess = false;
userAnswer = [
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
];
outgrid = null;
returnPage();
var value = document.getElementById("mySelect").value;
if(value == "1") {
if (lv_1_num < 21) { lv_array = sudokuData[0][lv_1_num]; isFull = false;
} else { isFull = true; }
} else if (value == "2") {
if (lv_2_num < 21) { lv_array = sudokuData[1][lv_2_num]; isFull = false;
} else { isFull = true; }
} else if (value == "3") {
if (lv_3_num < 21) { lv_array = sudokuData[2][lv_3_num]; isFull = false;
} else { isFull = true; }
} else if (value == "4") {
if (lv_4_num < 20) { lv_array = sudokuData[3][lv_4_num]; isFull = false;
} else { isFull = true; }
} else if (value == "5") {
if (lv_5_num < 20) { lv_array = sudokuData[4][lv_5_num]; isFull = false;
} else { isFull = true; }
}
renderArray();
timeArea.innerHTML = "00:00:00";
count = 0;
// 填充固定数据
for(var i = 0; i < 9; i++) {
for(var j = 0; j < 9; j++) {
if(lv_array.charAt(i * 9 + j) != '0')
userAnswer[i][j] = lv_array.charAt(i * 9 + j);
}
}
// 使用worker开辟新线程运行DLX算法
var worker = new Worker("dancing_link.js");
worker.postMessage(lv_array);
worker.onmessage = function(evt) { //接收worker传过来的数据函数
outgrid = evt.data;
}
}
// 计时方法
pad = function(i) {
return i < 10 ? ("0" + i) : i;
}
// 计时方法
timer = function() {
count++;
var h = pad(parseInt(count / 3600));
var m = pad(parseInt(count / 60));
var s = pad(parseInt(count % 60));
timeArea.innerHTML = h + ":" + m + ":" + s;
}
// 下一关
next = function () {
// 如果当前级别已通关，则点击无反应
if (isFull) return;
// 是否过关
if (isSuccess) {
var value = document.getElementById("mySelect").value;
if(value == "1") {
lv_1_num ++;
document.getElementById("select_1").innerHTML = "初级 (" + lv_1_num + "/21)";
if (lv_1_num >= 21) { isFull = true; }
} else if (value == "2") {
lv_2_num ++;
document.getElementById("select_2").innerHTML = "中级 (" + lv_2_num + "/21)";
if (lv_2_num >= 21) { isFull = true; }
} else if (value == "3") {
lv_3_num ++;
document.getElementById("select_3").innerHTML = "高级 (" + lv_3_num + "/21)";
if (lv_3_num >= 21) { isFull = true; }
} else if (value == "4") {
lv_4_num ++;
document.getElementById("select_4").innerHTML = "地狱 (" + lv_4_num + "/20)";
if (lv_4_num >= 20) { isFull = true; }
} else if (value == "5") {
lv_5_num ++;
document.getElementById("select_5").innerHTML = "疯狂 (" + lv_5_num + "/20)";
if (lv_5_num >= 20) { isFull = true; }
}
if (!isFull) selectLv();
}
}
// 开始游戏
start = function () {
var start = document.getElementById("start_game");
if (start.textContent == "开始游戏") {
start.innerHTML = "暂停游戏";
// 开始计时
startGame = setInterval(timer, 1000);
} else {
start.innerHTML = "开始游戏";
clearInterval(startGame);
}
}
// 重新开始游戏
restart = function() {
userAnswer = [
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
];
// 重新开始计时
timeArea.innerHTML = "00:00:00";
count = 0;
// 清除界面
returnPage();
// 重新渲染
renderArray();
isSuccess = false;
}
// 界面渲染
function renderArray() {
for (var i = 0; i < 9; i++) {
for (var j = 0; j < 9; j++) {
var elem = document.getElementById(i * 9 + j);
if (lv_array.charAt(i * 9 + j) == '0') {
elem.className = 'hide';
elem.innerHTML = '<input type="text" class="hide-text">';
} else {
elem.className = 'show';
elem.innerHTML = lv_array.charAt(i * 9 + j);
}
}
}
}
// 将界面上的数值清空
function returnPage() {
for(var i = 0; i < 9; i++) {
for(var j = 0; j < 9; j++) {
var elem = document.getElementById(i * 9 + j);
elem.innerHTML = "";
elem.style.cssText = "";
}
}
}
function limitKey(evt, num){
var key = window.evt? evt.keyCode : evt.which;
if(key < 49 || key > 57) return false;
else if(num.length == 1) return false;
else return true;
}
//页面初始化
selectLv();
sudoku.css
*{
margin: 0;
padding: 0;
}
body{
background: #f5f5f5;
}
h1{
font-size: 23px;
font-family:"微软雅黑";
position: absolute;
color: #c0c0c0;
border: 0px;
left: 610px;
top: 50px;
background: white;
padding: 10px 50px;
}
.select{
height: 600px;
width: 270px;
position: absolute;
left: 80px;
top: 150px;
}
select{
width: 200px;
height: 50px;
font-size: 23px;
font-family:"微软雅黑";
position: relative;
margin: 10px 35px;
color: #c0c0c0;
border: 0px;
background: white;
padding-left: 10px;
}
.time{
width: 250px;
height: 50px;
position: relative;
margin: 20px 10px;
font-size:24px;
text-align:center;
}
.select button{
width: 210px;
height:50px;
background: white;
border-radius: .5em;
border: 2px #e5e5e5 solid;
position: relative;
margin: 10px 30px;
font-size: 20px;
font-family:"微软雅黑";
color: #708090;
cursor: pointer;
}
.select button:hover{
background: #CCD0F5;
}
#sudokuBoard{
border-spacing: 0;
position: absolute;
top: 150px;
left: 580px;
}
td.boardCellGroupA, td.boardCellGroupB {
background-color: #f5f5f5;
}
td.boardCellGroupA td.boardCell {
width: 46px;
height: 46px;
background-color: #d3d3d3;
}
td.boardCellGroupB td.boardCell {
width: 46px;
height: 46px;
background-color: #a9a9a9;
}
.hide:hover{
background: #E9967A;
}
.hide {
color: #0000FF;
font-size:22px;
text-align:center;
font-family:微软雅黑;
height:46px;
width:46px;
line-height:46px;
}
.hide-text{
color:#7B68EE;
font-size:22px;
text-align:center;
font-family:微软雅黑;
height:44px;
width:44px;
line-height:46px;
border: 0px;
background-color: inherit;
}
.hide-text:hover{
background: #E9967A;
}
.show{
font-size:22px;
text-align:center;
font-family:微软雅黑;
height:46px;
width:46px;
line-height:46px;
}