Hi guys I hope you guys can help me. I have an assignment that I have to hand in on Tuesday 11 May which is a sudoku game in javascript. I am given the startboard solution and the final solution of 3 difficulty levels (easy, medium, hard). I need to be able to load both the startboard and final solution at the same time and then be able to input numbers in the sudoku cells, and when a 0 is typed the cell content is emptied. Also i need to be able to check the cell that is selected and check it against the solution and display a message if it is correct or not. I am not using a conventional table as most would be using but im using a sudoku grid that is manipulated by css. I have managed to be able to output the initial startboard but cannot find a way of inputing a number because my table is made out of divs that have 2spans, and i have been wondering how to be able to manipulate the span tags in order to use them as input area. The following is my code.
Why not use the
tag for your cells as in the following:
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
// define the global variables used to represent the board state, size etc.
var startboard; //initial board
var solution;//Sudoku solution board
var boardsize = 9; //number of cells
// Output the cells
function displayCells ()
{
var cells = “
for (var row = 0; row < boardsize ; row += 3) {
for (var column = 0; column < boardsize ; column += 3){
cells += "
for (var rowloop = row; rowloop < row + 3 ; rowloop++) {
for (var columnloop = column; columnloop < column + 3 ; columnloop++){
var id = 'square_' + rowloop + '_' + columnloop;
cells += "
“;
}
cells += “
“;
}
cells += “
“;
}
cells += “
“;
}
cells += “
“;
document.write ( cells );
}
// Output the numbers of the selected Level to the cells and hide the 0’s
function displayvalues ()
{
for (var rowloop = 0; rowloop < boardsize ; rowloop++) {
for (var columnloop = 0; columnloop < boardsize ; columnloop++){
var id = 'square_' + rowloop + '_' + columnloop;
var cell = document.getElementById( id );
cell.value = startboard[ rowloop ][ columnloop ];
if (cell.value == 0) {
cell.value = "";
}
}
}
}
var currentRow = '';
var currentColumn = '';
// save the current Id
function save( row, column )
{
currentRow = row;
currentColumn = column;
}
// Check changes made
function check ()
{
var row = currentRow;
var column = currentColumn;
var id = 'square_' + row + '_' + column;
var cell = document.getElementById( id );
row = parseInt( row );
column = parseInt( column );
var correctValue = solution[ row ][ column ];
var value = cell.value;
if (value == correctValue) {
alert("Correct");
} else {
alert("Try again");
}
}
// define the starting and solution board values for the "easy" level
function loadEasy()
{
startboard = [[0, 4, 6, 2, 8, 0, 0, 0, 0],
[5, 0, 0, 6, 0, 0, 7, 4, 0],
[2, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 5, 0, 3, 2, 0, 7, 0],
[0, 2, 1, 0, 0, 0, 4, 8, 0],
[0, 3, 0, 1, 7, 0, 5, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 5],
[0, 9, 4, 0, 0, 1, 0, 0, 7],
[0, 0, 0, 0, 9, 6, 8, 3, 0]];
solution = [[9, 4, 6, 2, 8, 7, 3, 5, 1],
[5, 8, 3, 6, 1, 9, 7, 4, 2],
[2, 1, 7, 5, 4, 3, 6, 9, 8],
[8, 6, 5, 4, 3, 2, 1, 7, 9],
[7, 2, 1, 9, 6, 5, 4, 8, 3],
[4, 3, 9, 1, 7, 8, 5, 2, 6],
[6, 7, 8, 3, 2, 4, 9, 1, 5],
[3, 9, 4, 8, 5, 1, 2, 6, 7],
[1, 5, 2, 7, 9, 6, 8, 3, 4]];
displayvalues();
}
Sudoku
displayCells();
loadEasy();
document.write(“
“);
On each change to a cell the users input is saved. If they click the “check current” button then the check() function is called which checks their latest change.
For more on the input tag see: http://www.html-tags-guide.com/html-input-tag.html
I know of no way checking the solution without using Javascript, or a server side script.
A non Javascript solution would require that the displayCells() function be written as a server side script, such as in PHP, or the cells be written into the html file.
For server side checking the grid of
tags would need to be placed in a form which would need to be processed by the server side script.
A server side script could also be used to rewrite the page with the standard and difficult puzzles, if the user selected them.
speak up
Add your comment below, or trackback from your own site.
Subscribe to these comments.
Be nice. Keep it clean. Stay on topic. No spam.
You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
recent posts
Categories
Tags
Recent Posts