JS写怀旧小游戏系列（八）九宫格数独

来源：互联网发布：现在学什么编程语言编辑：程序博客网时间：2024/04/28 12:50
九宫格数独，是一种源自18世纪末的瑞士，后在美国发展、并在日本得以发扬光大的数字谜题。数独盘面是个九宫，每一宫又分为九个小格。在这八十一格中给出一定的已知数字和解题条件，利用逻辑和推理，在其他的空格上填入1-9的数字。使1-9每个数字在每一行、每一列和每一宫中都只出现一次。这种游戏全面考验做题者观察能力和推理能力，虽然玩法简单，但数字排列方式却千变万化，所以不少教育者认为数独是训练头脑的绝佳方式。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Play Sudoku</title><script type="text/javascript">if(location.hostname.toLowerCase().indexOf('dhtmlgoodies') >=0) {  var _gaq = _gaq || [];  _gaq.push(['_setAccount', 'UA-2042963-3']);  _gaq.push(['_trackPageview']);  (function() {    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  })();}</script><style type="text/css">body{font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;width:100%;height:100%;margin:0px;padding:0px;overflow:hidden;}#ad{position:absolute;top:600px;left:10px;}h1{margin-top:0px;margin-bottom:5px;padding-bottom:0px;padding-left:5px;}#sudoku{position:absolute;left:10px;top:100px;}#gameOptions{position:absolute;left:500px;top:100px;width:150px;height:450px;border:4px solid #000;background-color:#E2EBED;padding-left:5px;font-size:0.9em;}#gameOptions ul{padding-left:0px;margin-left:0px;margin-top:0px;}#gameOptions a{color:#FF0000;text-decoration:none;}#gameOptions a:hover{color:#317082;text-decoration:underline;}#gameOptions li{list-style-type:none;}.sudoku{width:456px;height:456px;border:2px solid #000;}.sudokuSquare,.sudokuSquareHighlighted{width:46px;height:46px;float:left;border:1px solid #000000;padding:1px;line-height:46px;font-size:30px;text-align:center;background-color:#FFF;cursor:default;}.sudokuSquareHighlighted{border:2px solid #317082;width:46px;height:46px;padding:0px;background-color:#E2EBED;}.sudokuSection{width:150px;height:150px;border:1px solid #000000;float:left;}.gameRules li{font-size:0.9em;margin-left:0px;padding-left:0px;}#hintDiv{position:absolute;width:52px;height:60px;background-image:url('images/hintArrow.gif');background-position: bottom left;background-repeat:no-repeat;display:none;margin-left:1px;}#hintDivInner{width:44px;height:44px;border-top:2px solid #000;border-left:2px solid #000;border-right:2px solid #000;font-size:11px;padding:2px;background-color:#FF0000;color:#FFF;}</style><script type="text/javascript">/************************************************************************************************************(C) www.dhtmlgoodies.com, September 2005This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.Terms of use:You are free to use this script as long as the copyright message is kept intact. However, you may notredistribute, sell or repost it without our permission.Thank you!www.dhtmlgoodies.comAlf Magne Kalleland************************************************************************************************************/var squareObjects = new Array();var level = 1;// 1 is lowest levelvar countSquares = [36,36,34,32,31,30];var gameFinished = false;function shuffleBoard(){for(var counter=0;counter<30;counter++){var number1 = Math.ceil(Math.random()*9);var number2 = Math.ceil(Math.random()*9);while(number2==number1){number2 = Math.ceil(Math.random()*9);}var tmpObjects1 = new Array();var tmpObjects2 = new Array();for(var no=0;no<squareObjects.length;no++){var txtObj = squareObjects[no].getElementsByTagName('SPAN')[0];if(txtObj.innerHTML == number1)tmpObjects1.push(txtObj);if(txtObj.innerHTML == number2)tmpObjects2.push(txtObj);}for(var no=0;no<tmpObjects1.length;no++){tmpObjects1[no].innerHTML = number2;tmpObjects2[no].innerHTML = number1;}}resetVisibleNumberArray();showColumnsInGroup();}function resetVisibleNumberArray(){for(var no=0;no<=9;no++){visibleNumberArray[no] = 0;}}function newGame(){var obj = document.getElementById('sudoku');var subObjects = obj.getElementsByTagName('DIV');for(var no=0;no<subObjects.length;no++){if(subObjects[no].className=='sudokuSquare'){subObjects[no].style.backgroundColor='';var spans = subObjects[no].getElementsByTagName('SPAN');spans[0].style.display='none';spans[1].innerHTML = '';}}}var visibleNumberArray = new Array();function randomizeArray(a,b){return Math.random() - Math.random();}function showCell(inputDiv){var span = inputDiv.getElementsByTagName('SPAN')[0];span.style.display='';inputDiv.style.backgroundColor='#DDD';span.style.color='#317082';var typingSpan = inputDiv.getElementsByTagName('SPAN')[1];typingSpan.style.display='none';}function showColumnsInGroup(){var object = document.getElementById('sudoku');var cellsRevealed = new Array();var numberArray = new Array();var groupCountArray = new Array();var maxInGroup=5;if(level<=0)level=1;if(level==1)maxInGroup=4;for(var no=0;no<countSquares[level];no++){do{var row = Math.floor(Math.random()*9);var col = Math.floor(Math.random()*9);var obj = document.getElementById('square_' + row + '_' + col);var parentID = obj.parentNode.id;var span = obj.getElementsByTagName('SPAN')[0];if(!numberArray[span.innerHTML])numberArray[span.innerHTML]=0;if(!groupCountArray[parentID])groupCountArray[parentID]=0;}while(cellsRevealed[row + '_' + col] || numberArray[span.innerHTML]>(3+Math.ceil(level/2)) || groupCountArray[parentID]>=maxInGroup);cellsRevealed[row + '_' + col] = true;if(!numberArray[span.innerHTML])numberArray[span.innerHTML]=0;numberArray[span.innerHTML]++;groupCountArray[parentID]++;showCell(obj);}}var higlightedCell;function highlightSquare(e,inputObj){document.getElementById('hintDiv').style.display='none';if(!inputObj)inputObj = this;if(inputObj.style.backgroundColor)return;if(gameFinished)return;inputObj.className='sudokuSquareHighlighted';if(higlightedCell && higlightedCell!=inputObj)higlightedCell.className='sudokuSquare';higlightedCell = inputObj;if(document.all)inputObj.focus();}function isGameFinished(){var obj = document.getElementById('sudoku');var subDivs = obj.getElementsByTagName('DIV');var allOk = true;for(var no=0;no<subDivs.length;no++){if(subDivs[no].className.indexOf('sudokuSquare')>=0 && !subDivs[no].style.backgroundColor){var spans = subDivs[no].getElementsByTagName('SPAN');if(spans[0].innerHTML != spans[1].innerHTML){allOk=false;break;}}}if(allOk)alert('Congratulations! You did it');}function initSudoku(){gameFinished = false;document.getElementById('hintDiv').style.display='none';var matrix = new Array();for(var rowCounter=0;rowCounter<9;rowCounter++){matrix[rowCounter] = new Array();for(var colCounter=0;colCounter<9;colCounter++){var number = colCounter/1 + 1 + (rowCounter*3) + Math.floor(rowCounter/3)%3;if(number>9)number = number % 9;if(number==0)number=9;matrix[rowCounter][colCounter] = number;}}// Switching rowsfor(var no=0;no<9;no+=3){for(var no2=0;no2<3;no2++){row1 = Math.floor(Math.random()*3);row2 = Math.floor(Math.random()*3);while(row2==row1){row2 = Math.floor(Math.random()*3);}row1 = row1 + no;row2 = row2 + no;var tmpMatrix = new Array();tmpMatrix = matrix[row1];matrix[row1] = matrix[row2];matrix[row2] = tmpMatrix; }}// Switching columnsfor(var no=0;no<9;no+=3){for(var no2=0;no2<3;no2++){col1 = Math.floor(Math.random()*3);col2 = Math.floor(Math.random()*3);while(col2==col1){col2 = Math.floor(Math.random()*3);}col1 = col1 + no;col2 = col2 + no;var tmpMatrix = new Array();for(var no3=0;no3<matrix.length;no3++){tmpMatrixValue = matrix[no3][col1];matrix[no3][col1] = matrix[no3][col2];matrix[no3][col2] = tmpMatrixValue;}}}for(var no=0;no<matrix.length;no++){for(var no2=0;no2<matrix[no].length;no2++){var obj = document.getElementById('square_' + no + '_' + no2);var spanObjects = obj.getElementsByTagName('SPAN');var span = spanObjects[0];span.innerHTML = matrix[no][no2];span.style.display='none';spanObjects[1].innerHTML = '';spanObjects[1].style.display = '';spanObjects[1].style.color='#000';obj.onclick = highlightSquare;squareObjects.push(obj);}}if(document.all){document.body.onkeydown = insertNumber;}else{document.documentElement.onkeydown = insertNumber;}newGame();shuffleBoard();}function insertNumber(e){document.getElementById('hintDiv').style.display='none';if(document.all)e = event;if(!higlightedCell)return;if(gameFinished)return;if (e.keyCode) code = e.keyCode; else if (e.which) code = e.which;var span = higlightedCell.getElementsByTagName('SPAN')[1];var numbers = higlightedCell.id.split('_');var row = numbers[1]/1;var col = numbers[2]/1;var nextObject = false;if(code==39){ // Right arrowif(col<8){nextObject = document.getElementById('square_' + row + '_' + (col/1+1));if(nextObject.style.backgroundColor){while(col<8 && nextObject.style.backgroundColor){col = col+1;nextObject = document.getElementById('square_' + row + '_' + col);}}}}if(code==37){ // Left arrowif(col>0){nextObject = document.getElementById('square_' + row + '_' + (col/1-1));if(nextObject.style.backgroundColor){while(col>0 && nextObject.style.backgroundColor){col = col-1;nextObject = document.getElementById('square_' + row + '_' + col);}}if(nextObject.style.backgroundColor)nextObject = false;}}if(code==38){if(row>0){nextObject = document.getElementById('square_' + (row-1) + '_' + col);if(nextObject.style.backgroundColor){while(row>0 && nextObject.style.backgroundColor){row = row-1;nextObject = document.getElementById('square_' + row + '_' + col);}}}}if(code==40){if(row<8){nextObject = document.getElementById('square_' + (row+1) + '_' + col);if(nextObject.style.backgroundColor){while(row<8 && nextObject.style.backgroundColor){row = row+1;nextObject = document.getElementById('square_' + row + '_' + col);}}}}if(nextObject){highlightSquare(false,nextObject);}if(code==46 || code==8){// Deletespan.innerHTML = '';if(code==8)return false;}if(code>96 && code<=105)code-=48;if(code>48 && code<=57){var theChar = String.fromCharCode(code);span.innerHTML = theChar;}isGameFinished();}function helpMe(){if(gameFinished)return false;if(confirm('Do you want me to reveal a number for you?')){var allreadyRevealed = true;var counter = 0;do{var row = Math.floor(Math.random()*9);var col = Math.floor(Math.random()*9);var el = document.getElementById('square_'+row+'_'+col);var spans = el.getElementsByTagName('SPAN');if(spans[1].innerHTML.length==0){spans[1].innerHTML = spans[0].innerHTML;spans[1].style.color='#FF0000';allreadyRevealed =  false;}if(el.style.backgroundColor)allreadyRevealed=true;counter++}while(allreadyRevealed && counter<500);}isGameFinished();}function isCorrect(divObj){var spans = divObj.getElementsByTagName('SPAN');if(spans[0].innerHTML==spans[1].innerHTML || spans[1].innerHTML.length==0)return true;return false;}function getTopPos(inputObj){  var returnValue = inputObj.offsetTop;  while((inputObj = inputObj.offsetParent) != null){  returnValue += inputObj.offsetTop;  }  return returnValue;}function getLeftPos(inputObj){  var returnValue = inputObj.offsetLeft;  while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;  return returnValue;}function getPossibleNumbers(inputObj){var noArray = new Array();var countNumbers = 0;var spans = inputObj.getElementsByTagName('SPAN');if(spans[0].innerHTML ==spans[1].innerHTML)return 0;var parentDiv = inputObj.parentNode;var subDivs = parentDiv.getElementsByTagName('DIV');for(var no=0;no<subDivs.length;no++){if(subDivs[no]!=inputObj){var spans = subDivs[no].getElementsByTagName('SPAN');if(spans[0].innerHTML == spans[1].innerHTML || subDivs[no].style.backgroundColor.length>1){if(!noArray[spans[0].innerHTML]){noArray[spans[0].innerHTML] = true;countNumbers++;}}}}var numbers = inputObj.id.split('_');var row = numbers[1];var col = numbers[2];for(var no=0;no<9;no++){var obj = document.getElementById('square_' + row + '_' + no);if(obj!=inputObj){var spans = obj.getElementsByTagName('SPAN');if(spans[0].innerHTML == spans[1].innerHTML || !spans[0].style.display){if(!noArray[spans[0].innerHTML]){noArray[spans[0].innerHTML] = true;countNumbers++;}}}var obj = document.getElementById('square_' + no + '_' + col);if(obj!=inputObj){var spans = obj.getElementsByTagName('SPAN');if(spans[0].innerHTML == spans[1].innerHTML || !spans[0].style.display){if(!noArray[spans[0].innerHTML]){noArray[spans[0].innerHTML] = true;countNumbers++;}}}}return countNumbers;}function showHint(){var hintDiv = document.getElementById('hintDiv');var hintDivInner = hintDiv.getElementsByTagName('DIV')[0];var maxExistingNo = 0;var objectToTry =false;for(var row=0;row<9;row++){for(var col=0;col<9;col++){var obj = document.getElementById('square_' + row + '_' + col);if(obj.style.backgroundColor)continue;if(!isCorrect(obj)){hintDivInner.innerHTML = 'This one is wrong';hintDiv.style.left = getLeftPos(obj) + 'px';hintDiv.style.top = getTopPos(obj) - 50 + 'px';hintDiv.style.display='block';return;}var existingNumbers = getPossibleNumbers(obj);if(existingNumbers>maxExistingNo){maxExistingNo = existingNumbers;objectToTry = obj;}}}if(objectToTry){hintDivInner.innerHTML = 'Try this one ';hintDiv.style.left = getLeftPos(objectToTry) + 'px';hintDiv.style.top = getTopPos(objectToTry) - 50 + 'px';hintDiv.style.display='block';}}function revealAll(){for(var row=0;row<9;row++){for(var col=0;col<9;col++){var obj =document.getElementById('square_'+row+'_'+col);var spans = obj.getElementsByTagName('SPAN');spans[0].style.display='';spans[1].style.display='none';spans[1].style.color='#000000';}}gameFinished=true;}function switchLevel(initLevel,linkObj){var confirmSwitch = gameFinished;if(!confirmSwitch)confirmSwitch = confirm('Click OK to finish the current game');if(confirmSwitch){var parentObj = linkObj.parentNode.parentNode;var links = parentObj.getElementsByTagName('A');for(var no=0;no<links.length;no++){links[no].style.fontWeight='normal';}linkObj.style.fontWeight = 'bold';level = initLevel;setTimeout('initSudoku()',20);}}window.onload = initSudoku;</script></head><body><div style="padding-bottom:5px;width:728px;height:90px"><script type="text/javascript"><!--google_ad_client = "pub-0714236485040063";/* 728x90, opprettet 14.08.08 */google_ad_slot = "8581783445";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></div><div class="sudoku" id="sudoku"><div class="sudokuSection" id="sudokuSection0"><div class="sudokuSquare" id="square_0_0"><span></span><span></span></div><div class="sudokuSquare" id="square_0_1"><span></span><span></span></div><div class="sudokuSquare" id="square_0_2"><span></span><span></span></div><div class="sudokuSquare" id="square_1_0"><span></span><span></span></div><div class="sudokuSquare" id="square_1_1"><span></span><span></span></div><div class="sudokuSquare" id="square_1_2"><span></span><span></span></div><div class="sudokuSquare" id="square_2_0"><span></span><span></span></div><div class="sudokuSquare" id="square_2_1"><span></span><span></span></div><div class="sudokuSquare" id="square_2_2"><span></span><span></span></div></div><div class="sudokuSection" id="sudokuSection1"><div class="sudokuSquare" id="square_0_3"><span></span><span></span></div><div class="sudokuSquare" id="square_0_4"><span></span><span></span></div><div class="sudokuSquare" id="square_0_5"><span></span><span></span></div><div class="sudokuSquare" id="square_1_3"><span></span><span></span></div><div class="sudokuSquare" id="square_1_4"><span></span><span></span></div><div class="sudokuSquare" id="square_1_5"><span></span><span></span></div><div class="sudokuSquare" id="square_2_3"><span></span><span></span></div><div class="sudokuSquare" id="square_2_4"><span></span><span></span></div><div class="sudokuSquare" id="square_2_5"><span></span><span></span></div></div><div class="sudokuSection" id="sudokuSection2"><div class="sudokuSquare" id="square_0_6"><span></span><span></span></div><div class="sudokuSquare" id="square_0_7"><span></span><span></span></div><div class="sudokuSquare" id="square_0_8"><span></span><span></span></div><div class="sudokuSquare" id="square_1_6"><span></span><span></span></div><div class="sudokuSquare" id="square_1_7"><span></span><span></span></div><div class="sudokuSquare" id="square_1_8"><span></span><span></span></div><div class="sudokuSquare" id="square_2_6"><span></span><span></span></div><div class="sudokuSquare" id="square_2_7"><span></span><span></span></div><div class="sudokuSquare" id="square_2_8"><span></span><span></span></div></div><div class="sudokuSection" id="sudokuSection3"><div class="sudokuSquare" id="square_3_0"><span></span><span></span></div><div class="sudokuSquare" id="square_3_1"><span></span><span></span></div><div class="sudokuSquare" id="square_3_2"><span></span><span></span></div><div class="sudokuSquare" id="square_4_0"><span></span><span></span></div><div class="sudokuSquare" id="square_4_1"><span></span><span></span></div><div class="sudokuSquare" id="square_4_2"><span></span><span></span></div><div class="sudokuSquare" id="square_5_0"><span></span><span></span></div><div class="sudokuSquare" id="square_5_1"><span></span><span></span></div><div class="sudokuSquare" id="square_5_2"><span></span><span></span></div></div><div class="sudokuSection" id="sudokuSection4"><div class="sudokuSquare" id="square_3_3"><span></span><span></span></div><div class="sudokuSquare" id="square_3_4"><span></span><span></span></div><div class="sudokuSquare" id="square_3_5"><span></span><span></span></div><div class="sudokuSquare" id="square_4_3"><span></span><span></span></div><div class="sudokuSquare" id="square_4_4"><span></span><span></span></div><div class="sudokuSquare" id="square_4_5"><span></span><span></span></div><div class="sudokuSquare" id="square_5_3"><span></span><span></span></div><div class="sudokuSquare" id="square_5_4"><span></span><span></span></div><div class="sudokuSquare" id="square_5_5"><span></span><span></span></div></div><div class="sudokuSection" id="sudokuSection5"><div class="sudokuSquare" id="square_3_6"><span></span><span></span></div><div class="sudokuSquare" id="square_3_7"><span></span><span></span></div><div class="sudokuSquare" id="square_3_8"><span></span><span></span></div><div class="sudokuSquare" id="square_4_6"><span></span><span></span></div><div class="sudokuSquare" id="square_4_7"><span></span><span></span></div><div class="sudokuSquare" id="square_4_8"><span></span><span></span></div><div class="sudokuSquare" id="square_5_6"><span></span><span></span></div><div class="sudokuSquare" id="square_5_7"><span></span><span></span></div><div class="sudokuSquare" id="square_5_8"><span></span><span></span></div></div><div class="sudokuSection" id="sudokuSection6"><div class="sudokuSquare" id="square_6_0"><span></span><span></span></div><div class="sudokuSquare" id="square_6_1"><span></span><span></span></div><div class="sudokuSquare" id="square_6_2"><span></span><span></span></div><div class="sudokuSquare" id="square_7_0"><span></span><span></span></div><div class="sudokuSquare" id="square_7_1"><span></span><span></span></div><div class="sudokuSquare" id="square_7_2"><span></span><span></span></div><div class="sudokuSquare" id="square_8_0"><span></span><span></span></div><div class="sudokuSquare" id="square_8_1"><span></span><span></span></div><div class="sudokuSquare" id="square_8_2"><span></span><span></span></div></div><div class="sudokuSection" id="sudokuSection7"><div class="sudokuSquare" id="square_6_3"><span></span><span></span></div><div class="sudokuSquare" id="square_6_4"><span></span><span></span></div><div class="sudokuSquare" id="square_6_5"><span></span><span></span></div><div class="sudokuSquare" id="square_7_3"><span></span><span></span></div><div class="sudokuSquare" id="square_7_4"><span></span><span></span></div><div class="sudokuSquare" id="square_7_5"><span></span><span></span></div><div class="sudokuSquare" id="square_8_3"><span></span><span></span></div><div class="sudokuSquare" id="square_8_4"><span></span><span></span></div><div class="sudokuSquare" id="square_8_5"><span></span><span></span></div></div><div class="sudokuSection" id="sudokuSection8"><div class="sudokuSquare" id="square_6_6"><span></span><span></span></div><div class="sudokuSquare" id="square_6_7"><span></span><span></span></div><div class="sudokuSquare" id="square_6_8"><span></span><span></span></div><div class="sudokuSquare" id="square_7_6"><span></span><span></span></div><div class="sudokuSquare" id="square_7_7"><span></span><span></span></div><div class="sudokuSquare" id="square_7_8"><span></span><span></span></div><div class="sudokuSquare" id="square_8_6"><span></span><span></span></div><div class="sudokuSquare" id="square_8_7"><span></span><span></span></div><div class="sudokuSquare" id="square_8_8"><span></span><span></span></div></div></div><div id="gameOptions"><h1>Sudoku</h1><ul><li><a href="#" onclick="revealAll();return false">Reveal numbers</a></li><li><a href="#" onclick="initSudoku();return false">New game</a></li><!-- <li><a href="#" onclick="helpMe();return false">Help me!</a></li> --><li><a href="#" onclick="showHint();return false">Show hint</a></li></ul><ul><li><a href="#" onclick="switchLevel(1,this);return false" style="font-weight:bold">Beginner</a></li><li><a href="#" onclick="switchLevel(2,this);return false">Moderate</a></li><li><a href="#" onclick="switchLevel(3,this);return false">Hard</a></li><li><a href="#" onclick="switchLevel(4,this);return false">Expert</a></li></ul><ul class="gameRules"><li><b>Goal of the game</b></li><li>1. No duplicates of the numbers 1-9 horizontally.</li><li>2. No duplicates of the numbers 1-9 vertically</li><li>3. No duplicates of the numbers 1-9 in the 3x3 cell groups</li></ul><ul><li><i>Click on a cell and use your keyboard to type in the numbers</i></li></ul></div><div id="hintDiv"><div id="hintDivInner"></div></div><div id="debug" style="position:absolute;left:30px;top:600px"></div></body></html>