JS写怀旧小游戏系列（八）九宫格数独
2013-04-27 09:45
411 查看
九宫格数独，是一种源自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 2005
This 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 not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var squareObjects = new Array();
var level = 1; // 1 is lowest level
var 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 rows
for(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 columns
for(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 arrow
if(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 arrow
if(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){ // Delete
span.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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS写怀旧小游戏系列（七）吃方块
- JS写怀旧小游戏系列（九）中国象棋
- JS写怀旧小游戏系列（十）打砖块
- 判断类型JS写怀旧小游戏系列（七）吃方块
- JS写怀旧小游戏系列（一）俄罗斯方块
- JS写怀旧小游戏系列（二）连连看
- JS写怀旧小游戏系列（四）贪吃蛇
- 评论拷贝JS写怀旧小游戏系列（六）躲人游戏
- JS写怀旧小游戏系列（三）五子棋
- JS写怀旧小游戏系列（五）扫雷
- 随机网格JS写怀旧小游戏系列（四）贪吃蛇
- JS写怀旧小游戏系列（六）躲人游戏
- 生成格JS写怀旧小游戏系列（五）扫雷
- 在微信小游戏中使用three.js显示3D图形
- 【深入浅出Node.js系列十三】用Nodejs连接MySQL
- EXT-JS学习系列基础篇:第三篇(转载)作者殷良胜
- JS组件系列——使用HTML标签的data属性初始化JS组件
- Knockout.Js官网学习(系列)
- [JS]深入理解JavaScript系列（4）：立即调用的函数表达式
- JS组件系列——显示隐藏密码切换的jQuery插件