Sudoku Javascript/HTML5

**helderpopo** · 02-20-2013 03:09 PM

HI, I have a task to change the javascript part of the code to apply the sudoku rules to this webpage. I already did it for the row but I am struggling for the column and the 3x3 rule. Can you please help me? I can only edit the javascript of the. Here is the code:

<!DOCTYPE html>
<html>
<head>
<title>Sudoku</title>
<style>
table#sudoku td {width: 2.5em; height:2.5em;
border-width: 1px;
border-style: solid;
border-color: black;
font-weight: bold;
text-align: center
}

table#sudoku {
border-width: 3px;
border-style: solid;
border-color: black
}

table#sudoku td[id^=cell_2] {border-right-width: 2px}
table#sudoku td[id^=cell_5] {border-right-width: 2px}
table#sudoku td[id$=_2] {border-bottom-width: 2px}
table#sudoku td[id$=_5] {border-bottom-width: 2px}
td.selected {background-color: rgb(100%, 70%, 0%)}
td.tofill {color: blue}
</style>
<script>
var current_cell = null; // the currently selected cell
function initialize() {
var col, row;
// Work through all the cells in the table and set
// onclick event handlers and classNames for the empty
// ones.
for (row = 0; row <=8; row++) {
for (col=0; col <= 8; col++) {
var cell = document.getElementById('cell_' + col + '_' + row);
if (!parseInt(cell.innerHTML)) {
// cell is empty
cell.onclick = selectCell;
cell.className = 'tofill';
}
}
}
document.onkeypress = keyPress;
}

// mouse button event handler
function selectCell() {
if (current_cell !== null) {
current_cell.className = 'tofill';
}
current_cell = this;
current_cell.className = 'selected';
}

// Capture keyboard key presses. If the key pressed is a digit
// then add it to the current cell. If it is a space then empty
// the current cell.
function keyPress(evt) {
if (current_cell == null)
return;
var key;
if (evt)
// firefox or chrome
key = String.fromCharCode(evt.charCode);
else
// IE
key = String.fromCharCode(event.keyCode);
if (key == ' ')
current_cell.innerHTML = '';
else if (key >= 1 && key <= 9)
{
var exists = 0
for (var i=0;i<9;i++)
{
var cell="cell_"+i+"_"+(current_cell.id.substring(current_cell.id.length,7));
if(document.getElementById(cell).innerHTML == key)
{ alert("Cannot enter the same number twice in the same row");
exists= exists + 1
}

}

if(exists == 0)
{
current_cell.innerHTML = key;
}

}
}
</script>
</head>
<body onload="initialize();">
<h2 align=center>Sudoku</h2>
<table align=center id="sudoku" cellspacing=0>
<tr>
<td id="cell_0_0">2</td>
<td id="cell_1_0"></td>
<td id="cell_2_0"></td>
<td id="cell_3_0"></td>
<td id="cell_4_0"></td>
<td id="cell_5_0">7</td>
<td id="cell_6_0"></td>
<td id="cell_7_0"></td>
<td id="cell_8_0"></td>
<tr>
<td id="cell_0_1"></td>
<td id="cell_1_1">5</td>
<td id="cell_2_1"></td>
<td id="cell_3_1"></td>
<td id="cell_4_1">2</td>
<td id="cell_5_1"></td>
<td id="cell_6_1"></td>
<td id="cell_7_1">1</td>
<td id="cell_8_1"></td>
<tr>
<td id="cell_0_2"></td>
<td id="cell_1_2">3</td>
<td id="cell_2_2"></td>
<td id="cell_3_2"></td>
<td id="cell_4_2">8</td>
<td id="cell_5_2"></td>
<td id="cell_6_2"></td>
<td id="cell_7_2">7</td>
<td id="cell_8_2"></td>
<tr>
<td id="cell_0_3"></td>
<td id="cell_1_3"></td>
<td id="cell_2_3">5</td>
<td id="cell_3_3">7</td>
<td id="cell_4_3"></td>
<td id="cell_5_3"></td>
<td id="cell_6_3"></td>
<td id="cell_7_3"></td>
<td id="cell_8_3">2</td>
<tr>
<td id="cell_0_4">1</td>
<td id="cell_1_4"></td>
<td id="cell_2_4"></td>
<td id="cell_3_4"></td>
<td id="cell_4_4"></td>
<td id="cell_5_4"></td>
<td id="cell_6_4"></td>
<td id="cell_7_4"></td>
<td id="cell_8_4">3</td>
<tr>
<td id="cell_0_5">9</td>
<td id="cell_1_5"></td>
<td id="cell_2_5"></td>
<td id="cell_3_5"></td>
<td id="cell_4_5"></td>
<td id="cell_5_5">6</td>
<td id="cell_6_5">1</td>
<td id="cell_7_5"></td>
<td id="cell_8_5"></td>
<tr>
<td id="cell_0_6"></td>
<td id="cell_1_6">2</td>
<td id="cell_2_6"></td>
<td id="cell_3_6"></td>
<td id="cell_4_6">7</td>
<td id="cell_5_6"></td>
<td id="cell_6_6"></td>
<td id="cell_7_6">8</td>
<td id="cell_8_6"></td>
<tr>
<td id="cell_0_7"></td>
<td id="cell_1_7">8</td>
<td id="cell_2_7"></td>
<td id="cell_3_7"></td>
<td id="cell_4_7">9</td>
<td id="cell_5_7"></td>
<td id="cell_6_7"></td>
<td id="cell_7_7">5</td>
<td id="cell_8_7"></td>
<tr>
<td id="cell_0_8"></td>
<td id="cell_1_8"></td>
<td id="cell_2_8"></td>
<td id="cell_3_8">4</td>
<td id="cell_4_8"></td>
<td id="cell_5_8"></td>
<td id="cell_6_8"></td>
<td id="cell_7_8"></td>
<td id="cell_8_8">6</td>
</table>
</body>
</html>

**007Julien** · 02-20-2013 07:06 PM

See this Sudoku tester and solver (the solution is not given, but the grid is tested).

The simpler expression to define a Sudoku is a String with 81 digits like this one (*) :
var sdk='000000012000035000000600070700000300000400800100000000000120000080000040050000600';
Copy and paste this value (or all the line) in the textarea to test the script.

Code:

function Board(){
	this.cells=new Array();for (var i=0;i<81;i++) this.cells[i]=1022;
	this.whrC=99;
}
function SetV(p,v) {
	var k,v=1<<v,w=1023-v,x=p%9,y=Math.floor(p/9),r=Math.floor(x/3)*3,s=Math.floor(y/3)*3;
	for (k=0;k<9;k++){this.cells[x+k*9]&=w;this.cells[k+y*9]&=w;
	this.cells[r+(k%3)+9*(s+Math.floor(k/3))]&=w;}
	this.cells[p]=v+1;
}
Board.prototype.setV=SetV;

This solver work with an object Board which use an array of 81 cells (and a auxiliary variable). One leer cell contains 1022, which is the binary 1111111110 (for nine possible values, nine true digits and a false digit for a leer cell.

The function, SetV(p,v), set not exactly the value v (thee first and last lines of the function), but the value 1<<v+1, (a digit v times left shifted and a digit for full cell) in the cell p (which, for example with v=7 contains 0010000001). This function also updates the cells of the same line, column or region (your 3x3 rules) with an &(1023-v) which is, in our example 1110111110 to forbid the 7 in all this cells...

In brief to answer your question, it's always easier to work with unidimensional arrays. Cells are numbered from 0 to 80, the lines and cols are given by the Euclidean division by 9 (quotient Math.floor(n/9) and remainder n%9) and a similar formula (with division by 3) for the 3x3 rules...

Since this solver is very efficient, it full after the given cells are defined, all cells which can contains an unique digit (all other cells are always simultaneously updated), all cells that can only receive a digit in the line, row or 3x3 rule. Then it take the first cell which can contain the minimal number of digit and build new boards to test the different solutions. This new boards are killed in case of impossibility or saved (with two solutions the grid is not valid) until the resolution...

(*) Gordon Royle Australia proposes a collection of of 49151 distinct minimal Sudokus which could be classed to build a beautiful set of grids...

Good luck !

**Ayşe** · 02-23-2013 08:11 AM

Code:

  
<html>
<head>

<meta charset="utf-8">
<style type="text/css">
td {width:130px; height:130px; border:2px solid aqua;}
.bir { background-color:pink;}
.iki { background-color:blue;}
.uc { background-color:yellow;}
.dort { background-color:green;}
.bes { background-color:orange;}
.alti { background-color:turquoise;}
.yedi { background-color:navy;}
.sekiz { background-color:red;}
.dokuz { background-color:olive;}
input {width:40px; height:40px;text-align:center;}

</style>

<script type="text/javascript">



/* s1 değişkeninin elemanları bir fonksiyon yazılarak rastgele dizdirilebilir.
mesela  s1 = "365824179"; 
*/
var s1 = "123456789";                  // 1. satır  123 456 789
var s2 = s1.slice(3) + s1.slice(0,3);  // 2. satır  456 789 123
var s3 = s1.slice(6) + s1.slice(0,6);  // 3. satır  789 123 456
var s4 = s1.slice(1) + s1.slice(0,1);  // 4. satır  234 567 891
var s5 = s1.slice(4) + s1.slice(0,4);  // 5. satır  567 891 234
var s6 = s1.slice(7) + s1.slice(0,7);  // 6, satır  891 234 567
var s7 = s1.slice(2) + s1.slice(0,2);  // 7. satır  345 678 912
var s8 = s1.slice(5) + s1.slice(0,5);  // 8. satır  678 912 345
var s9 = s1.slice(8) + s1.slice(0,8);  // 9. satır  912 345 678


var sdk = s1 + s2 + s3 + s4 + s5 + s6 + s7 + s8 + s9;
// var sdk = s3 + s2 + s1 + s5 + s4 + s6 + s9 + s7 + s8;
/* 
Her üç satırın yeri rastgele birbiri ile değiştirilebilir.
var sdk = s3 + s2 + s1 + s5 + s4 + s6 + s9 + s7 + s8;
*/
// http://www.w3schools.com/js/js_obj_string.asp
var dizi = sdk.split('');
// alert(dizi);
// alert(dizi.length);
/* 
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_reverse
dizi.reverse()
alert(dizi);
dizi tersten de yazdırılabilir tabloya.
*/

// 1 ile 81 arasında mesela birkaç tane rastgele sayı elde et. Bunları içeren idlere, değer yaz.
/* http://www.w3schools.com/js/js_obj_math.asp

The following example uses the floor() and random() methods of the Math object to return a random number between 0 and 10:
document.write(Math.floor(Math.random()*11));
*/

function sudokuYap () {
var el;
   for(var p=0; p<20; p++) {
   r= Math.floor(Math.random()*81);
   el= document.getElementById("s" + (r+1) ); 
   el.value = dizi[r]; 
   el.style.color="blue";
   }

}

function cevap() {
var el;
   for(var k=0; k<81; k++) {
   
    el= document.getElementById("s" + (k+1)); 
    el.value = dizi[k];  
   }
}

function sil() {
var el;
   for(var k=0; k<81; k++) {
   
    el= document.getElementById("s" + (k+1)); 
    el.value = "";  
   }
}
</script>
</head>
<body>

<table>
<tr>
<td class="bir">
<input type="text" id="s1">
<input type="text" id="s2">
<input type="text" id="s3">
<input type="text" id="s4">
<input type="text" id="s5">
<input type="text" id="s6">
<input type="text" id="s7">
<input type="text" id="s8">
<input type="text" id="s9">
</td>
<td class="iki">
<input type="text" id="s10">
<input type="text" id="s11">
<input type="text" id="s12">
<input type="text" id="s13">
<input type="text" id="s14">
<input type="text" id="s15">
<input type="text" id="s16">
<input type="text" id="s17">
<input type="text" id="s18">
</td>
<td class="uc">
<input type="text" id="s19">
<input type="text" id="s20">
<input type="text" id="s21">
<input type="text" id="s22">
<input type="text" id="s23">
<input type="text" id="s24">
<input type="text" id="s25">
<input type="text" id="s26">
<input type="text" id="s27">
</td>
</tr>
<tr>
<td class="dort">
<input type="text" id="s28">
<input type="text" id="s29">
<input type="text" id="s30">
<input type="text" id="s31">
<input type="text" id="s32">
<input type="text" id="s33">
<input type="text" id="s34">
<input type="text" id="s35">
<input type="text" id="s36">
</td>
<td class="bes">
<input type="text" id="s37">
<input type="text" id="s38">
<input type="text" id="s39">
<input type="text" id="s40">
<input type="text" id="s41">
<input type="text" id="s42">
<input type="text" id="s43">
<input type="text" id="s44">
<input type="text" id="s45">
</td>
<td class="alti">
<input type="text" id="s46">
<input type="text" id="s47">
<input type="text" id="s48">
<input type="text" id="s49">
<input type="text" id="s50">
<input type="text" id="s51">
<input type="text" id="s52">
<input type="text" id="s53">
<input type="text" id="s54">
</td>
</tr>
<tr>
<td class="yedi">
<input type="text" id="s55">
<input type="text" id="s56">
<input type="text" id="s57">
<input type="text" id="s58">
<input type="text" id="s59">
<input type="text" id="s60">
<input type="text" id="s61">
<input type="text" id="s62">
<input type="text" id="s63">
</td>
<td class="sekiz">
<input type="text" id="s64">
<input type="text" id="s65">
<input type="text" id="s66">
<input type="text" id="s67">
<input type="text" id="s68">
<input type="text" id="s69">
<input type="text" id="s70">
<input type="text" id="s71">
<input type="text" id="s72">
</td>
<td class="dokuz">
<input type="text" id="s73">
<input type="text" id="s74">
<input type="text" id="s75">
<input type="text" id="s76">
<input type="text" id="s77">
<input type="text" id="s78">
<input type="text" id="s79">
<input type="text" id="s80">
<input type="text" id="s81">
</td>
</tr>
</table>
<input type="button" value="yeni" onclick="sudokuYap()">

<input type="button" value="çözümü" onclick="cevap()">

<input type="button" value="sil" onclick="sil()">

</body>
</html>

Thread: Sudoku Javascript/HTML5

Thread Tools

Display

Sudoku Javascript/HTML5

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions