Play Sudoku For Kids Online – Creating a Game, and Link to Game

0
9

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.

Standard Sudoku

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

In order to make the web page self contained, all puzzles that the game can display are downloaded as part of the Javascript in the HTML file (both solutions and starting positions are downloaded). The fact that the user’s browser need not communicate with the server while playing also allows the user to save the web page to his computer and play later even if he is no longer connected to the Internet.

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.

I chose to implement all 288 solutions with seven starting positions for each solution allowing “thousands of puzzles” (288×7=2016). The encoding I chose for each puzzle uses an ASCII character for each cell, sixteen characters to describe the entire grid. The sixteen characters of the solution are each ‘1’/’2’/’3’/’4′ and the sixteen characters of each starting position also include ‘0’s (later displayed by the web page as an empty cell). Each solution along with its seven starting positions is represented in the Javascript by a string of length 128 characters ((1solution+7starts)x16=128).

Here is an example of a string representing a solution and its seven starting positions:

pzl[147]=”31242431134242133004000000000210300000010040020001200000000040030100003000024000002004000300001000042000030000100000043010020000″;

This is not a very space efficient way of representing the data, but all 288 solutions and their starting positions require only about forty kilobytes of data transfer to the user’s computer. When compared to the hundreds of kilobytes required to download images associated with our product advertisement, the forty kilobytes is not enough to significantly impact the user experience. Representing the data as ASCII text made data manipulation by Javascript functions simple.

Here is what happens when you click on each button (click on “Sudoku For Kids” in the author’s resource box and then “View Source” in your browser if you would like to follow along in the HTML/Javascript code):

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

I used a “C” program to generate the strings used by the Javascript to represent the solutions and start points. You can download the “C” source code from php/SudokuForKids.c relative to our home page link in the author’s resource box. You may freely use this code for any legal purpose without restriction but also with no warranties.

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[147]=”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

In conclusion, because creating the Sudoku For Kids solutions and starting positions was computationally expensive it was beneficial to create them in advance (not in real-time) so that the HTML and Javascript running on the user’s computer had little to do in order to implement the game, thus allowing the game to run quickly in the user’s browser. Downloading the solutions and starting positions within the web page also eliminated the need for server-client communication after web page download was complete, allowing the user to save the web page and continue to play after ceasing to be connected to the Internet.

Source

Leave a Reply