This article is about creating a web page that implements a kids version of the popular Sudoku game. Much of what is discussed will apply to the implementation of many different types of on-line games. I did not invent this kids version of Sudoku, so if you are already familiar with Sudoku played on a four by four grid of cells you can skip to the section below entitled “Sudoku For Kids: User Interface.” If you are familiar with the standard (nine by nine) version of Sudoku but not familiar with the four by four version you can skip to the section below entitled, “Sudoku For Kids: Four By Four Version.” If this is all new to you then just keep on reading.
The standard version of Sudoku is played on a nine by nine grid where in a fully solved puzzle each cell of the grid contains an integer between one and nine (inclusive). The rule that defines a correct solution is: each of the nine cell rows (horizontal collection of cells) must contain each integer from one to nine once and only once, each column (vertical collection of cells) must contain each integer from one to nine once and only once, and each three by three sub-group of cells must contain each integer from one to nine once and only once. There are nine sub-groups, three rows of three sub-groups per row (each sub-group is a three by three collection of individual cells) which cover the entire nine by nine grid of cells.
Sudoku For Kids: Four By Four Version
My version of Sudoku For Kids uses a four by four grid of cells where in a fully solved puzzle each cell of the grid contains an integer between one and four (inclusive). Analogous to the standard version, Sudoku For Kids requires each row, column and sub-group to contain each integer from one to four. In Sudoku For Kids a sub-group is also a quadrant (the four quadrants being upper-left, upper-right, lower-left and lower-right).
Sudoku For Kids: User Interface
I put the game at the top of the page on the right side and display an advertisement of our product just to the left of the game. The game grid’s four quadrants have four different background colors to make it easier for young kids to consider those groups of four cells when making sure all four integers are present.
Four buttons appear just under the grid: “New” (start a new puzzle) / “Reset” (start the same puzzle again from the beginning) / “Hint” (fill in one of the empty cells for me) / “Check” (display incorrect cells in red, or tell me if the puzzle is completely solved). The “Hint” and “Check” buttons are important for young kids. Any child who can use a computer mouse and click on a button can solve the puzzle, the limiting case being asking for hints until the entire grid is filled in. If the puzzle is solved and the user clicks on “Check” an alert box is displayed that congratulates the user for solving the puzzle and tells him how many hints were received and how many times “Check” was clicked before the final time when the puzzle had been solved. The hope is that the child will continue playing until “Hints: 0 / PreChecks: 0” is displayed at which time the child might be ready to move on to playing standard Sudoku.
Instructions are displayed just under the game, not at the top. This is for the benefit of returning users who need not be distracted by reading the instructions again.
Sudoku For Kids: Operation of the Web Page
The four by four Sudoku For Kids game has only 288 unique solutions (legal ways to fill in all sixteen cells). All of the solutions can be “forced” by initially filling in four cells (four cells of the solution can be chosen such that only this particular one of the 288 possible solutions is consistent with the values chosen for the four initially filled in cells). Some of the 288 solutions have 12 different four-cells-filled-in-starting-positions and some have 128 different four-cells-filled-in-starting-positions. None of the 288 unique solutions can be uniquely specified using less than four cells in the starting position.
I chose to only implement starting positions with the minimum four filled in cells for two reasons. 1) Sudoku For Kids is already far easier than standard Sudoku because of the decreased size of the playing grid; it seemed reasonable to make it otherwise as hard as possible. 2) Any user wishing to play an easier puzzle can click on the “Hint” button to fill in additional cells before beginning to fill in cells manually.
Here is an example of a string representing a solution and its seven starting positions:
New (calls function NewPuzzle):
1) Generate a random number from 0-287 to pick one of the 288 unique solutions.
2) Generate a random number from 0-6 to pick one of the seven starting positions for the solution.
3) Initialize “solution” and “startpt” using parts of the forty kilobytes of downloaded data (which parts are used is specified by the random numbers chosen in steps 1 and 2 above). “solution” and “startpt” are each arrays of sixteen numbers (possible values are 1-4 for solution and 0-4 for startpt).
4) Call function ResetPuzzle (see next button).
Reset (calls function ResetPuzzle):
1) Set font color to black for all cells (might have previously been red if incorrect answer).
2) For all cells if part of starting position fill in number and make cell read only, otherwise make cell blank and writable.
3) Set number of hints received and PreChecks done to zero.
Hint (calls function HintPlease):
1) Repeatedly generate random number from 0-15 until it corresponds to a blank cell or until you have tried 1,000 times.
2) If you failed to find a blank cell in step 1, go through each cell from 0-15 looking for a blank cell.
3) If you have found a blank cell, copy the value from the corresponding cell in “solution” to the cell in the displayed grid.
4) Increment number of hints received.
Check (calls function CheckPuzzle):
1) Make all cells’ font color black.
2) For each cell if value doesn’t match “solution” (and if the cell is not blank) then change the font color to red.
3) If all cells matched “solution” then congratulate the user.
4) Increment the number of PreChecks.
Sudoku For Kids: Creating the Puzzles
The code starts by finding the 288 unique Sudoku For Kids solutions, then for each solution it tries all possible combinations of four starting cells and tests which starting positions can only result in this one ending solution. After finding all possible starting positions for all solutions, it writes each solution and seven associated starting positions to a file as a string in the format presented above (see pzl=”312…” above).
The structure that represents the Sudoku For Kids grid contains a three dimensional array containing every possible value that can be present in each grid cell (elements[4rows][4columns][num_vals_still_poss_for_cell]). When a puzzle is solved, num_vals_still… is equal to 1 for all cells. SudokuSolver is a recursive function (it calls itself) that finds all solutions by “guessing” each possible value of each cell one at a time and then calling itself on the “guess”-containing puzzle (num_vals_still… for that cell is equal to 1 and the “guess” is now the value in that cell), terminating a branch of the tree when it encounters an unsolvable position (num_vals_still… for some cell is equal to 0, which means some previous guess was incorrect).
Sudoku For Kids: Conclusion