Fun with jQuery

I have created jSudoku, an implementation of Sudoku in Javascript with jQuery.

Using jQuery allowed me to use very simple HTML. Just a table with nine rows of nine blocks, each with just a nonbreaking space inside. It kinda breaks the display code, so trust me, OK?

And also very simple

view plainprint?

1. table {  
2.     margin: 0 auto ;  
3.     border-collapse: collapse ;  
4.     }  
5. td {  
6.     height: 40px ;  
7.     width: 40px ;  
8.     font-size: 30px ;  
9.     line-height:40px ;  
10.     text-align: center ;  
11.     padding: 0 ;  
12.     }  
13. #junk {  
14.     display: none ;  
15.     }  
16.   
17. .header {  
18.     position: absolute ;  
19.     top: 0 ;  
20.     left: 0 ;  
21.     width: 100% ;  
22.     height: 70px ;  
23.     background-color: #666 ;  
24.     padding-left: 5% ;  
25.     border-bottom: 2px solid #333 ;  
26.     }  
27.   
28. .header .title {  
29.     color: white ;  
30.     font-size: 48px ;  
31.     }  
32.   
33. .header .subtitle {  
34.     color: #bbb ;  
35.     font-size: 14px ;  
36.     border-bottom: 1px solid #bbb ;  
37.     }  
38.   
39. .main{  
40.     position: absolute ;  
41.     top: 100px ;  
42.     left: 0 ;  
43.     width: 100% ;  
44.     }  
45.   
46. .footer{  
47.     background-color: #aaa ;  
48.     border-top: 2px solid #ccc ;  
49.     color: #333 ;  
50.     position: absolute ;  
51.     bottom: 0 ;  
52.     left: 0 ;  
53.     width: 100% ;  
54.     }  

table {
    margin: 0 auto ;
    border-collapse: collapse ;
    }
td {
    height: 40px ;
    width: 40px ;
    font-size: 30px ;
    line-height:40px ;
    text-align: center ;
    padding: 0 ;
    }
#junk {
    display: none ;
    }

.header {
    position: absolute ;
    top: 0 ;
    left: 0 ;
    width: 100% ;
    height: 70px ;
    background-color: #666 ;
    padding-left: 5% ;
    border-bottom: 2px solid #333 ;
    }

.header .title {
    color: white ;
    font-size: 48px ;
    }

.header .subtitle {
    color: #bbb ;
    font-size: 14px ;
    border-bottom: 1px solid #bbb ;
    }

.main{
    position: absolute ;
    top: 100px ;
    left: 0 ;
    width: 100% ;
    }

.footer{
    background-color: #aaa ;
    border-top: 2px solid #ccc ;
    color: #333 ;
    position: absolute ;
    bottom: 0 ;
    left: 0 ;
    width: 100% ;
    }

Nothing even remotely clever there.

Where the cleverness comes in is in the javascript.

view plainprint?

1. //------------------------------------------------------------------------------  
2. // Kinda the "Main()" for this. Runs when the page is fully loaded.  
3. //------------------------------------------------------------------------------  
4. $(function() {  
5.   
6. //--------------------------------------------------------------------------  
7. // sudoku  
8. //--------------------------------------------------------------------------  
9.   
10.     //--------------------------------------------------------------------------  
11.     // look and feel  
12.     //--------------------------------------------------------------------------  
13.     $( '#sudoku' ).children( 'table' ).each( function() {  
14.             } ) ;  
15.     $( 'td' ).each( function() {  
16.             $( this ).css( 'border-color'              , 'black' ) ;  
17.             $( this ).css( 'border-width'              , '1px' ) ;  
18.             $( this ).css( 'border-style'              , 'solid' ) ;  
19.             } ) ;  
20.     $( 'td:even' ).each( function() {  
21.             $( this ).css( 'background-color'          , '#eee' ) ;  
22.             } ) ;  
23.     //--------------------------------------------------------------------------  
24.   
25.     //--------------------------------------------------------------------------  
26.     // borders  
27.     //--------------------------------------------------------------------------  
28.     var i = 1 ;  
29.     var j = 1 ;  
30.     $( 'tr' ).each( function() {  
31.         i = 1 ;  
32.         $( this ).children( 'td' ).each( function() {  
33.             //$( this ).html( i ) ;  
34.             if ( aSudoku[j][i] != '' ) {  
35.                 $( this ).html( aSudoku[j][i] ) ;  
36.                 $( this ).attr( 'class'       , 'static' ) ;  
37.                 $( this ).css(  'font-weight' , '700' ) ;  
38. //                $( this ).css(  'color'       , '#000' ) ;  
39.                 }  
40.             else {  
41.                 $( this ).attr( 'class'       , 'change' ) ;  
42.                 $( this ).css(  'font-weight' , '100'    ) ;  
43.                 $( this ).css(  'font-size'   , '28px'   ) ;  
44. //                $( this ).css(  'color'       , '#066'   ) ;  
45.                 }  
46.             if ( i == 1 || i == 4 || i == 7 ) {  
47.                 $( this ).css( 'border-left-width'   , '3px' )  
48.                 } ;  
49.             if ( i == 3 || i == 6 || i == 9 ) {  
50.                 $( this ).css( 'border-right-width'  , '3px' )  
51.                 } ;  
52.             if ( j == 1 || j == 4 || j == 7 ) {  
53.                 $( this ).css( 'border-top-width'    , '3px' )  
54.                 } ;  
55.             if ( j == 3 || j == 6 || j == 9 ) {  
56.                 $( this ).css( 'border-bottom-width' , '3px' )  
57.                 } ;  
58.             i++ ;  
59.             } ) ;  
60.         j++ ;  
61.         } ) ;  
62.   
63.     //--------------------------------------------------------------------------  
64.     // position tracking  
65.     //--------------------------------------------------------------------------  
66.     $( 'td:even' ).hover( function() {  
67.         $( this ).css( 'background-color'          , '#eea' ) ;  
68.         } , function() {  
69.         $( this ).css( 'background-color'          , '#eee' ) ;  
70.         } ) ;  
71.     $( 'td:odd'  ).hover( function() {  
72.         $( this ).css( 'background-color'          , '#eea' ) ;  
73.         } , function() {  
74.         $( this ).css( 'background-color'          , '#fff' ) ;  
75.         } ) ;  
76.   
77.     //--------------------------------------------------------------------------  
78.     // setting numbers  
79.     //--------------------------------------------------------------------------  
80.   
81.     var box ;  
82.     $( 'td.change' ).hover(  
83.         function() {  
84.             box = $( this ) ;  
85.             $( document ).keypress( function(e) {  
86.                 if ( ( e.which > 48 && e.which < 58 ) ||  
87.                      ( e.which == 32 ) && ( 1 ) ) {  
88.                     var c = String.fromCharCode( e.which ) ;  
89.                     if ( c == ' ' ) { c = ' ' ; }  
90.                     box.html( c ) ;  
91.                     }  
92.                 } ) ;  
93.             score_table( ) ;  
94.             } ,  
95.         function() {  
96.             box = $( '#junk' ) ;  
97.             score_table( ) ;  
98.             }  
99.         ) ;  
100.   
101.     //--------------------------------------------------------------------------  
102.   
103.     score_table() ;  
104.   
105.     } ) ;  
106. //------------------------------------------------------------------------------  
107.   
108.   
109.   
110. //------------------------------------------------------------------------------  
111. function score_table (  ) {  
112.     $( 'input#space' ).attr('value','') ;  
113.     var results = new Array(9) ;  
114.     for (var i = 0 ; i < 9 ; i++ ){  
115.         results[i] = [ 0 , 0 , 0 ,  0 , 0 , 0 ,  0 , 0 , 0 ] ;  
116.         }  
117.     var isDup = new Array(9) ;  
118.     for (var i = 0 ; i < 9 ; i++ ){  
119.         isDup[i] = [ 0 , 0 , 0 ,  0 , 0 , 0 ,  0 , 0 , 0 ] ;  
120.         }  
121.     var output = '' ;  
122.     var t = ' ' ;  
123.     var nl = '\n' ;  
124.   
125.     // Neeed To Check....  
126.   
127.     var x = 0 ;  
128.     var trs = $( '#stable tr' ) ;  
129.     trs.each( function() {  
130.         var y = 0 ;  
131.         $( this ).find( 'td' ).each( function() {  
132.             results[x][y] = $( this ) ;  
133.             y++ ;  
134.             }) ;  
135.         x++ ;  
136.         }) ;  
137.   
138.     //  each row ---------------------------------------------------------------  
139.   
140.     for ( var x = 0 ; x < 9; x++ ) {  
141.       var aColumn = new Array(10) ;  
142.       for (var i = 0 ; i < 10 ; i++ ){ aColumn[i] = 0 ; }  
143.       // first pass -- count  
144.       for ( var y = 0 ; y < 9 ; y++ ) {  
145.         var val = results[x][y].html() ;  
146.         if ( val.length == 8 ) { val = 0 ; }  
147.         val = parseInt( val ) ;  
148.         if ( val > 0 ) { aColumn[val]++ ; }  
149.         }  
150.       // second pass -- mark isDup  
151.       for ( var y = 0 ; y < 9 ; y++ ) {  
152.         var val = results[x][y].html() ;  
153.         if ( val.length != 1 ) { val = 0 ; }  
154.         val = parseInt( val ) ;  
155.         if ( aColumn[val] > 1 ) {  
156.           isDup[x][y] = 1 ;  
157.           }  
158.         }  
159.       }  
160.   
161.     // each column -------------------------------------------------------------  
162.   
163.     for ( var y = 0 ; y < 9; y++ ) {  
164.       var aColumn = new Array(10) ;  
165.       for (var i = 0 ; i < 10 ; i++ ){ aColumn[i] = 0 ; }  
166.       // first pass -- count  
167.       for ( var x = 0 ; x < 9 ; x++ ) {  
168.         var val = results[x][y].html() ;  
169.         if ( val.length != 1 ) { val = 0 ; }  
170.         val = parseInt( val ) ;  
171.         if ( val > 0 ) { aColumn[val]++ ; }  
172.         }  
173.       // second pass -- mark isDup  
174.       for ( var x = 0 ; x < 9 ; x++ ) {  
175.         var val = results[x][y].html() ;  
176.         if ( val.length != 1 ) { val = 0 ; }  
177.         val = parseInt( val ) ;  
178.         if ( aColumn[val] > 1 ) {  
179.           isDup[x][y] = 1 ;  
180.           }  
181.         }  
182.       }  
183.   
184.     // each block --------------------------------------------------------------  
185.   
186.     var range = new Array(3) ;  
187.     range[0] = [ 0 , 1 , 2 ] ;  
188.     range[1] = [ 3 , 4 , 5 ] ;  
189.     range[2] = [ 6 , 7 , 8 ] ;  
190.   
191.     for ( var a = 0 ; a < 3 ; a++ ) {  
192.       for ( var b = 0 ; b < 3 ; b++ ) {  
193.         var rangeX = range[a] ;  
194.         var rangeY = range[b] ;  
195.         output = output + a + b + nl ;  
196.   
197.         var aColumn = new Array(10) ;  
198.         for (var i = 0 ; i < 10 ; i++ ){ aColumn[i] = 0 ; }  
199.         // first pass -- count  
200.         for ( var c = 0 ; c < rangeX.length ; c++ ) {  
201.           for ( var d = 0 ; d < rangeY.length ; d++ ) {  
202.             var x = rangeX[c] ;  
203.             var y = rangeY[d] ;  
204.   
205.             var val = results[x][y].html() ;  
206.             if ( val.length != 1 ) { val = 0 ; }  
207.             val = parseInt( val ) ;  
208.             if ( val > 0 ) { aColumn[val]++ ; }  
209.             }  
210.           }  
211.         // second pass -- mark isDup  
212.         for ( var c = 0 ; c < rangeX.length ; c++ ) {  
213.           for ( var d = 0 ; d < rangeY.length ; d++ ) {  
214.             var x = rangeX[c] ;  
215.             var y = rangeY[d] ;  
216.   
217.             var val = results[x][y].html() ;  
218.             if ( val.length != 1 ) { val = 0 ; }  
219.             val = parseInt( val ) ;  
220.             if ( aColumn[val] > 1 ) { isDup[x][y] = 1 ; }  
221.             }  
222.           }  
223.         }  
224.       }  
225.   
226.     // and mark ----------------------------------------------------------------  
227.     output = '' ;  
228.     for ( var x = 0 ; x < 9; x++ ) {  
229.       for ( var y = 0 ; y < 9 ; y++ ) {  
230.         var val = results[x][y].html() ;  
231.         var dup = isDup[x][y] ;  
232.         if ( val.length != 1 ) { val = 0 ; }  
233.         val = parseInt( val ) ;  
234.         if ( dup == 1 ) { make_red( results[x][y] ) ; }  
235.         else          { unmake_red( results[x][y] ) ; }  
236.         }  
237.       output = output + nl ;  
238.       }  
239.     }  
240. //------------------------------------------------------------------------------  
241.   
242. //------------------------------------------------------------------------------  
243. // make_red  
244. //------------------------------------------------------------------------------  
245. function make_red ( td ) {  
246.     td.css( 'color' , 'red' ) ;  
247.     }  
248. //------------------------------------------------------------------------------  
249.   
250. //------------------------------------------------------------------------------  
251. // make_red  
252. //------------------------------------------------------------------------------  
253. function unmake_red ( td ) {  
254.     td.css( 'color' , '#000' ) ;  
255.     }  
256. //------------------------------------------------------------------------------  

//------------------------------------------------------------------------------
// Kinda the "Main()" for this. Runs when the page is fully loaded.
//------------------------------------------------------------------------------
$(function() {

//--------------------------------------------------------------------------
// sudoku
//--------------------------------------------------------------------------

    //--------------------------------------------------------------------------
    // look and feel
    //--------------------------------------------------------------------------
    $( '#sudoku' ).children( 'table' ).each( function() {
            } ) ;
    $( 'td' ).each( function() {
            $( this ).css( 'border-color'              , 'black' ) ;
            $( this ).css( 'border-width'              , '1px' ) ;
            $( this ).css( 'border-style'              , 'solid' ) ;
            } ) ;
    $( 'td:even' ).each( function() {
            $( this ).css( 'background-color'          , '#eee' ) ;
            } ) ;
    //--------------------------------------------------------------------------

    //--------------------------------------------------------------------------
    // borders
    //--------------------------------------------------------------------------
    var i = 1 ;
    var j = 1 ;
    $( 'tr' ).each( function() {
        i = 1 ;
        $( this ).children( 'td' ).each( function() {
            //$( this ).html( i ) ;
            if ( aSudoku[j][i] != '' ) {
                $( this ).html( aSudoku[j][i] ) ;
                $( this ).attr( 'class'       , 'static' ) ;
                $( this ).css(  'font-weight' , '700' ) ;
//                $( this ).css(  'color'       , '#000' ) ;
                }
            else {
                $( this ).attr( 'class'       , 'change' ) ;
                $( this ).css(  'font-weight' , '100'    ) ;
                $( this ).css(  'font-size'   , '28px'   ) ;
//                $( this ).css(  'color'       , '#066'   ) ;
                }
            if ( i == 1 || i == 4 || i == 7 ) {
                $( this ).css( 'border-left-width'   , '3px' )
                } ;
            if ( i == 3 || i == 6 || i == 9 ) {
                $( this ).css( 'border-right-width'  , '3px' )
                } ;
            if ( j == 1 || j == 4 || j == 7 ) {
                $( this ).css( 'border-top-width'    , '3px' )
                } ;
            if ( j == 3 || j == 6 || j == 9 ) {
                $( this ).css( 'border-bottom-width' , '3px' )
                } ;
            i++ ;
            } ) ;
        j++ ;
        } ) ;

    //--------------------------------------------------------------------------
    // position tracking
    //--------------------------------------------------------------------------
    $( 'td:even' ).hover( function() {
        $( this ).css( 'background-color'          , '#eea' ) ;
        } , function() {
        $( this ).css( 'background-color'          , '#eee' ) ;
        } ) ;
    $( 'td:odd'  ).hover( function() {
        $( this ).css( 'background-color'          , '#eea' ) ;
        } , function() {
        $( this ).css( 'background-color'          , '#fff' ) ;
        } ) ;

    //--------------------------------------------------------------------------
    // setting numbers
    //--------------------------------------------------------------------------

    var box ;
    $( 'td.change' ).hover(
        function() {
            box = $( this ) ;
            $( document ).keypress( function(e) {
                if ( ( e.which > 48 && e.which < 58 ) ||
                     ( e.which == 32 ) && ( 1 ) ) {
                    var c = String.fromCharCode( e.which ) ;
                    if ( c == ' ' ) { c = ' ' ; }
                    box.html( c ) ;
                    }
                } ) ;
            score_table( ) ;
            } ,
        function() {
            box = $( '#junk' ) ;
            score_table( ) ;
            }
        ) ;

    //--------------------------------------------------------------------------

    score_table() ;

    } ) ;
//------------------------------------------------------------------------------



//------------------------------------------------------------------------------
function score_table (  ) {
    $( 'input#space' ).attr('value','') ;
    var results = new Array(9) ;
    for (var i = 0 ; i < 9 ; i++ ){
        results[i] = [ 0 , 0 , 0 ,  0 , 0 , 0 ,  0 , 0 , 0 ] ;
        }
    var isDup = new Array(9) ;
    for (var i = 0 ; i < 9 ; i++ ){
        isDup[i] = [ 0 , 0 , 0 ,  0 , 0 , 0 ,  0 , 0 , 0 ] ;
        }
    var output = '' ;
    var t = ' ' ;
    var nl = '\n' ;

    // Neeed To Check....

    var x = 0 ;
    var trs = $( '#stable tr' ) ;
    trs.each( function() {
        var y = 0 ;
        $( this ).find( 'td' ).each( function() {
            results[x][y] = $( this ) ;
            y++ ;
            }) ;
        x++ ;
        }) ;

    //  each row ---------------------------------------------------------------

    for ( var x = 0 ; x < 9; x++ ) {
      var aColumn = new Array(10) ;
      for (var i = 0 ; i < 10 ; i++ ){ aColumn[i] = 0 ; }
      // first pass -- count
      for ( var y = 0 ; y < 9 ; y++ ) {
        var val = results[x][y].html() ;
        if ( val.length == 8 ) { val = 0 ; }
        val = parseInt( val ) ;
        if ( val > 0 ) { aColumn[val]++ ; }
        }
      // second pass -- mark isDup
      for ( var y = 0 ; y < 9 ; y++ ) {
        var val = results[x][y].html() ;
        if ( val.length != 1 ) { val = 0 ; }
        val = parseInt( val ) ;
        if ( aColumn[val] > 1 ) {
          isDup[x][y] = 1 ;
          }
        }
      }

    // each column -------------------------------------------------------------

    for ( var y = 0 ; y < 9; y++ ) {
      var aColumn = new Array(10) ;
      for (var i = 0 ; i < 10 ; i++ ){ aColumn[i] = 0 ; }
      // first pass -- count
      for ( var x = 0 ; x < 9 ; x++ ) {
        var val = results[x][y].html() ;
        if ( val.length != 1 ) { val = 0 ; }
        val = parseInt( val ) ;
        if ( val > 0 ) { aColumn[val]++ ; }
        }
      // second pass -- mark isDup
      for ( var x = 0 ; x < 9 ; x++ ) {
        var val = results[x][y].html() ;
        if ( val.length != 1 ) { val = 0 ; }
        val = parseInt( val ) ;
        if ( aColumn[val] > 1 ) {
          isDup[x][y] = 1 ;
          }
        }
      }

    // each block --------------------------------------------------------------

    var range = new Array(3) ;
    range[0] = [ 0 , 1 , 2 ] ;
    range[1] = [ 3 , 4 , 5 ] ;
    range[2] = [ 6 , 7 , 8 ] ;

    for ( var a = 0 ; a < 3 ; a++ ) {
      for ( var b = 0 ; b < 3 ; b++ ) {
        var rangeX = range[a] ;
        var rangeY = range[b] ;
        output = output + a + b + nl ;

        var aColumn = new Array(10) ;
        for (var i = 0 ; i < 10 ; i++ ){ aColumn[i] = 0 ; }
        // first pass -- count
        for ( var c = 0 ; c < rangeX.length ; c++ ) {
          for ( var d = 0 ; d < rangeY.length ; d++ ) {
            var x = rangeX[c] ;
            var y = rangeY[d] ;

            var val = results[x][y].html() ;
            if ( val.length != 1 ) { val = 0 ; }
            val = parseInt( val ) ;
            if ( val > 0 ) { aColumn[val]++ ; }
            }
          }
        // second pass -- mark isDup
        for ( var c = 0 ; c < rangeX.length ; c++ ) {
          for ( var d = 0 ; d < rangeY.length ; d++ ) {
            var x = rangeX[c] ;
            var y = rangeY[d] ;

            var val = results[x][y].html() ;
            if ( val.length != 1 ) { val = 0 ; }
            val = parseInt( val ) ;
            if ( aColumn[val] > 1 ) { isDup[x][y] = 1 ; }
            }
          }
        }
      }

    // and mark ----------------------------------------------------------------
    output = '' ;
    for ( var x = 0 ; x < 9; x++ ) {
      for ( var y = 0 ; y < 9 ; y++ ) {
        var val = results[x][y].html() ;
        var dup = isDup[x][y] ;
        if ( val.length != 1 ) { val = 0 ; }
        val = parseInt( val ) ;
        if ( dup == 1 ) { make_red( results[x][y] ) ; }
        else          { unmake_red( results[x][y] ) ; }
        }
      output = output + nl ;
      }
    }
//------------------------------------------------------------------------------

//------------------------------------------------------------------------------
// make_red
//------------------------------------------------------------------------------
function make_red ( td ) {
    td.css( 'color' , 'red' ) ;
    }
//------------------------------------------------------------------------------

//------------------------------------------------------------------------------
// make_red
//------------------------------------------------------------------------------
function unmake_red ( td ) {
    td.css( 'color' , '#000' ) ;
    }
//------------------------------------------------------------------------------

This code has only been tested in Firefox 3.0. If you have problems, please report them here. And nothing say "Hey, you won!" when the puzzle is solved yet. I figure that will come when I can generate new puzzles. Sorry.

The next bit, the tricky bit, would be to generate new puzzles. I don't have that yet. But if I can make 'em up, I can put 'em into the puzzle. Feel free to try it.