www.webdeveloper.com
Results 1 to 3 of 3

Thread: Sudoku Javascript/HTML5

  1. #1
    Join Date
    Feb 2013
    Posts
    2

    Sudoku Javascript/HTML5

    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>

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,268
    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 !
    Last edited by 007Julien; 02-20-2013 at 07:13 PM.

  3. #3
    Join Date
    Sep 2007
    Location
    istanbul
    Posts
    315
    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>
    Last edited by Ayşe; 02-23-2013 at 08:13 AM.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles