Ideas on how to design an application that has similarities to Battle ship.

[ChristopherJ]

I am tasked with writing an application that is similar to battle ship.  There is a 100x100 grid.  Initial, each cell of the grid has a red box in it.  A user clicks the red box, enters a special code that they were given, and that red box reveals a letter or a blank space.  There a certain "winning words".  So lets say the letters WINNIN have been revealed.  The person who reveals the G is a "winner".  So, the application does a few things:

 

Firstly, after a user clicks the square and enters a code, it checks to see if the code is valid.

Then, assuming the code is valid, the red square turns into a letter or a blank space. 
If a letter is revealed, the system checks to see if it's a "winning" letter.  Therefore, the system would need to see if the other letters in that same word have been revealed.

 

I am using a WAMP stack and javascript (jQuery).  I am having trouble figuring out how to swap the image (from a red square to a letter) after an image is clicked.  Keep in mind this needs to be swapped for everyone who will subsequently view the application and therefore must be database driven.  I'm thinking to have a 2 MySql table (with only one column) that corresponds with the visual html table before and after being clicked (lets call them VISUAL_TABLE and ACTUAL_TABLE).  Initially, all the rows in the visual table would contain the following string <img src="redsquare.jpg" />, and row 1 would correspond with cell 1 in the actual html table, row 2 would be cell 2 in the actual html table, etc.  Then, when a user clicks the image in cell 1 (which row 1 in VISUAL_TABLE), it replaces row 1 in VISUAL_TABLE with row 1 in ACTUAL_TABLE.  The row 1 in actual table may contain the following string <img src="letter1.jpg" />,  After this swap has been made, I can run a php script that checks to see if that swap was a winner.  So, for example, if the winning word was WIN, the W being in row 1, the I in row 2, and the N in row 3, the php script would see if all 3 of those rows is no longer <img src="redsquare.jpg" /> and if so then it saves that person as a winner.

 

Does that make sense to anyone else?  Is there a better way to do this?  Is there a framework/library that could make this easier?

[Psycho]

A few thoughts. You should not store something such as "<img src="letter1.jpg" />". That is part of the presentation logic and should be handled outside the database layer. Here is what I would do: I would have two tables, one to store the words that will be displayed in the grid and another to record the squares that have been uncovered.

 

The 'words' table would have three fields: column, row, & letter

 

The other table, let's call it 'hits' would have just fields for column and row

 

You could then query all the records from the two tables and build the table. Here is some sample code. I didn't test this as I wasn't going to build a database to test it, so there may be some minor typos, but the logic should be sound.

 

 

//Query the words table and put results into array
$query = "SELECT * FROM WORDS";
$result = mysql_query($query);
$letters = array();
while($row = mysql_fetch_assoc($result))
{
    $letters[$row['row']][$row['column']] = $row['letter'];
}

//Query the hits table and put results into array
$query = "SELECT * FROM WORDS";
$result = mysql_query($query);
$hits = array();
while($row = mysql_fetch_assoc($result))
{
    $hits[$row['row']][$row['column']] = true;
}

$rows = 100;
$cols = 100;

//Create the table
$output = "<table border='1'>\n";
//Create header row
$output .= "<tr>\n";
$output .= "    <th> </th>\n";
for($col=0; $col<$cols; $col++)
{
    $output .= "    <th>{$col}</th>\n";
}
$output .= "</tr>\n";

//Create the main grid

//Loop thorugh each row
for($row=1; $row<=$rows; $row++)
{
    $output .= "<tr>\n";
    $output .= "    <th>{$row}</th>\n";

    //Loop through each column
    for($col=1; $col<=$cols; $col++)
    {
        //main logic to determine what to display in the square
        if(!isset($hits[$row][$col]))
        {
            //This square has not been revealed
            $square = "<img src='redsquare.jpg' />";
        }
        elseif(!isset($letters[$row][$col]))
        {
            //Square has been revealed, but is not a letter
            $square = "<img src='whitesquare.jpg' />";
        }
        else
        {
            //Square has been revealed, and is letter
            $square = $letters[$row][$col];
        }
        $output .= "    <td>{$square}</td>\n"
    }
    $output .= "</tr>\n";
}
$output .= "</table>\n";

[ChristopherJ]

That makes perfect sense.  Thank you!