· 9 years ago · Nov 29, 2016, 01:48 PM
1//nested loops, table is shown at the top of our JS
2//first loop makes table row
3//no more 0s and player wins
4
5//Create the html table element which gets appended to the element 'container'
6var table = document.createElement('table');
7//Counters for board row/cols (10x10)
8var row = 0, cell = 0;
9//Letters for [x][0], left labels
10var letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
11//Default instance of board, this is used to reset the game state as it contains the
12//original unsolved sudoku values.
13var defaultBoard = [
14[0,0,4,5,0,3,0,7,0],
15[0,0,0,0,0,0,3,1,0],
16[3,5,0,0,0,0,2,0,0],
17[0,0,0,0,2,0,9,3,7],
18[6,0,9,0,0,0,4,0,8],
19[4,7,2,0,9,0,0,0,0],
20[0,0,0,1,0,0,0,5,2],
21[0,4,5,0,0,0,0,0,0],
22[0,6,0,8,0,1,7,0,0]
23];
24//Playable instance of board, this array is manipulated as the player inputs moves.
25var currentBoard = [
26[0,0,4,5,0,3,0,7,0],
27[0,0,0,0,0,0,3,1,0],
28[3,5,0,0,0,0,2,0,0],
29[0,0,0,0,2,0,9,3,7],
30[6,0,9,0,0,0,4,0,8],
31[4,7,2,0,9,0,0,0,0],
32[0,0,0,1,0,0,0,5,2],
33[0,4,5,0,0,0,0,0,0],
34[0,6,0,8,0,1,7,0,0]
35];
36
37//Draw the table
38reset();
39
40//This adds the table we just made as a child element of the parent node 'container'
41document.getElementById('container').appendChild(table);
42
43//Reset function draws board w/ check function
44function reset() {
45 //Clear table innerHTML, this is so if the user clicks on the reset button, all the html from the table
46 //gets set to an empty string so we can redraw the default sudoku board
47 table.innerHTML = '';
48 currentBoard = [
49 [0,0,4,5,0,3,0,7,0],
50 [0,0,0,0,0,0,3,1,0],
51 [3,5,0,0,0,0,2,0,0],
52 [0,0,0,0,2,0,9,3,7],
53 [6,0,9,0,0,0,4,0,8],
54 [4,7,2,0,9,0,0,0,0],
55 [0,0,0,1,0,0,0,5,2],
56 [0,4,5,0,0,0,0,0,0],
57 [0,6,0,8,0,1,7,0,0]
58 ];
59
60 //Set caption for the table & append it to the table element
61 var caption = document.createElement('caption');
62 caption.innerHTML = 'Sudoku of the day';
63 table.appendChild(caption);
64
65 //Loop through all rows of sudoku board, there are 10 because we need to add labels to the first
66 //row and column
67 for (row = 0; row < 10; row++) {
68 //Create a table row element on each loop that holds 10 td tags with our labels and sudoku board
69 var tr = document.createElement('tr');
70 //Loop through all 10 columns that are added to a row
71 for (cell = 0; cell < 10; cell++) {
72 //Create a table cell element and give it an id of its xy coords
73 var td = document.createElement('td');
74 td.id = "cell"+row+cell;
75 tr.appendChild(td);
76
77 //If we are looping past the first row and column, we need to set values for the sudoku board
78 //and not labels
79 if (row > 0 && cell > 0) {
80 //Set the innerHTML to be the value of default board at the same coordinates, since
81 //our displayed table is 10x10 but the board is 9x9 we need to subtract one from the
82 //current row and cell values.
83 td.innerHTML = defaultBoard[row-1][cell-1];
84 //Set the onclick event for each sudoku table cell so it the player can input values
85 //the function has to be wrapped, i looked this up on stack overflow because otherwise
86 //the current counter variables go out of scope
87 td.onclick = function(row, cell) {
88 return function() {
89 //Prompt user for input by using the window.prompt call
90 var input = window.prompt('Enter a number between 1-9:','1');
91 //If input is entered and it is an integer value between 1 & 9 then continue
92 if (input != null && parseInt(input) > 0 && parseInt(input) < 10) {
93 //Illegal indicates a bad move, r and c are temporary vars to check what region we are in
94 var illegal = false, r = 0, c = 0;
95
96 //If a user clicks on a cell that is in rows 1-3, we need to loop from row 0
97 //If a user clicks on a cell that is in rows 3-6, we need to loop from row 3
98 //If a user clicks on a cell that is in rows 3-6, we need to loop from row 6
99 if ((row - 1) >= 0 && row <= 3) {
100 r = 0;
101 } else if ((row - 1 >= 3) && row <= 6) {
102 r = 3;
103 } else if ((row - 1 >= 6) && row <= 9) {
104 r = 6;
105 }//End if
106
107 //If a user clicks on a cell that is in cols 1-3, we need to loop from col 0
108 //If a user clicks on a cell that is in cols 3-6, we need to loop from col 3
109 //If a user clicks on a cell that is in cols 3-6, we need to loop from col 6
110 if ((cell - 1) >= 0 && cell <= 3) {
111 c = 0;
112 } else if ((cell - 1 >= 3) && cell <= 6) {
113 c = 3;
114 } else if ((cell - 1 >= 6) && cell <= 9) {
115 c = 6;
116 }//End if
117
118 //Set regional limits and copy 'c' so we can loop through all columns for a region
119 //The max we want to loop is from the start of the region to its end which is always 3
120 var cCopy = c;
121 var rMax = r + 3;
122 var cMax = c + 3;
123
124 //Loop through the region & check for bad inputs, if the value exists already in these cells
125 //alert the user
126 for (r; r < rMax; r++) {
127 for (c; c < cMax; c++) {
128 if (currentBoard[r][c] == input) {
129 alert('Illegal move.');
130 illegal = true;
131 }//End if
132 }//End nested for
133 c = cCopy;
134 }//End for
135
136 //Loop through the overall row & check for bad inputs, if the value exists already
137 //in these cells alert the user
138 if (!illegal) {
139 for (var i = 0; i < 9; i++) {
140 if (currentBoard[row-1][i] == input) {
141 alert('Illegal move.');
142 illegal = true;
143 }//End if
144 }//End for
145 }//End if
146
147 //Loop through the overall column & check for bad inputs, if the value exists already
148 //in these cells alert the user
149 if(!illegal) {
150 for (var j = 0; j < 9; j++) {
151 if (currentBoard[j][cell-1] == input) {
152 alert('Illegal move.');
153 illegal = true;
154 }//End if
155 }//End for
156 }//End if
157
158 var gameWon = false;
159
160 //If the input was legal then we need to set that value in the temporary board array
161 if (!illegal) {
162 currentBoard[row-1][cell-1] = input;
163
164 //Grab context of the table cell by the x and y values
165 var ctx = document.getElementById('cell'+row+cell);
166 //Set the innerHTML of this cell to the input variable
167 ctx.innerHTML = input;
168 //If there are no instances of '0' left in the currentBoard array, the user
169 //has won the game!
170 var a = currentBoard.indexOf(0);
171 if (a == null) {
172 alert('You win!');
173 }//End if
174 }//End if
175 } else {
176 alert('Bad input');
177 }//End if
178 }//End click function
179 }(row, cell)//End function wrapper
180 }//End if
181
182 //If we are looping through the first row, we want to set labels on the board
183 if (row == 0 && cell > 0) {
184 td.innerHTML = '<b>' + cell + '</b>';
185 }//End if
186
187 //If we are looping through the first column, we want to set labels on the board
188 //I used an array of letters just to make it easier and not hardcoded
189 if (cell == 0 && row > 0) {
190 td.innerHTML = '<b>' + letters[row-1] + '</b>';
191 }//End if
192 }//End nested for
193
194 //Once the nested loop has finished, we append the table row with all the appropriate columns
195 //to the table element
196 table.appendChild(tr);
197 }//End for
198}//End reset