Sample code for Sudoko game
Just copy this code in visualforce page to play sudoko game
Just copy this code in visualforce page to play sudoko game
<apex:page showheader="false">
<html>
<head>
<title>Play Sudoku at www.dhtmlgoodies.com</title>
<meta name="Author" content="Alf Magne Kalleland (post@dhtmlgoodies.com)"/>
<META NAME="Generator" CONTENT="Alf Magne Kalleland (www.dhtmlgoodies.com)"/>
<meta name="Author" content="Alf Magne Kalleland (post@dhtmlgoodies.com)"/>
<META NAME="Generator" CONTENT="Alf Magne Kalleland (www.dhtmlgoodies.com)"/>
<meta name="KeyWords" content="DHTML, HTML, Dynamic HTML,CSS, Menu, Menus,Drag and drop, Drag, Drop, Cross-browser, Cross browser, Examples, Javascript, Free, Javascripts, Cascading Style Sheet, Crossbrowser,Alf Magne Kalleland, Batalf, minesweeper"/>
<meta name="Description" content="Play sudoku at dhtmlgoodies.com."/>
<meta name="country" content="Norway"/>
<meta name="organization-Email" content="post@dhtmlgoodies.com"/>
<meta name="copyright" content="copyright 2005 - Alf Magne Kalleland"/>
<meta name="coverage" content="Worldwide"/>
<meta name="revisit_after" content="30days"/>
<meta name="identifier" content="http://www.dhtmlgoodies.com/"/>
<meta name="language" content="English"/>
<meta name="robots" content="follow"/>
<meta name="googlebot" content="index, follow"/>
<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>
</apex:page>
No comments:
Post a Comment