Sunday, July 14, 2013

This Blog Is a Work In progress.. Riddle-ship- My Version of a popular Board Game Gone Hi Tech With Help

The Second Major Project was to build a PHP version of a popular hit and miss board game.



With some help, the following is the code and how it works.

RiddleShip v1.0 -r4
Ok what does that mean? 


Program Version 1, revision 4

<?php 
The beginning of the code is the beginning of the php…

What is PHP?


To describe what a PHP page is, you could say that it is a file with the extension .php that contains a combination of HTML tags and scripts that run on a web server.
 The best way to explain how PHP works is by comparing it with standard HTML. Imagine you type the address of an HTML document (e.g.http://www.mysite.com/page.htm) in the address line of the browser. This way you request an HTML page. It could be illustrated like this:
As you can see, the server simply sends an HTML file to the client. But if you instead type http://www.mysite.com/page.php - and thus request an PHP page - the server is put to work:



The server first reads the PHP file carefully to see if there are any tasks that need to be executed. Only when the server has done what it is supposed to do, the result is then sent to the client. It is important to understand that the client only sees the result of the server's work, not the actual instructions.
This means that if you click "view source" on a PHP page, you do not see the PHP codes - only basic HTML tags. Therefore, you cannot see how a PHP page is made by using "view source".
Lines 2-24 are comment lines that do not get processed as html or php
most comments throughout the code begin with // if you only have one line of comment
If you have a longer, multi line comment, the best way to comment is by using /* */. You can contain several lines of commenting inside a block 
/*
 * RiddleShip v1.0 -r3
 * 14 July 2013 : 7:06pm
 *
 * HOW IT WORKS
 *
 * RiddleShip is played on a 10X10 grid with rows lettered A through J and columns numbered 1 through 10.  The object
 * is to sink all of the enemy ships on the board by calling out grid locations; if an enemy ship occupies that location,
 * the ship sustains a hit; if enough hits are registered on the ship, the ship sinks.  There are five ships of varying sizes
 * in the enemy fleet.  Normally this is a two player game but the computer does not play, so to make it challenging the
 * human player is allowed to miss only 30 times before the game ends.  If the user can sink all five ships before missing
 * 30 times, he/she is the winner.
 *
 * The game board represented is an array of 100 elements.  The computer places the ships on the board randomly so that
 * no ships are colliding or hanging off the board.  Diagonal placement is not allowed.  When the ships are placed, they
 * are placed with a code letter representing that ship in each of the spaces.  The ships are first placed with lower case
 * letters.  When a hit is registered, the lower case letter is replaced with an upper case letter.  The number of upper
 * case letters for each ship is counted and if that count equals the "size" of the ship, that ship is "sunk."
 */
The following code creates the 100 element array, it is first commented out with the slashes(//)


// Create and scope the 100-element array that will hold the Fleet.
// It represents the spaces on a 10x10 grid, with "A1" being index 0
// "J10" being 99.
Then you begin the declaration of variables as well as the construction of multidimensional arrays. 
// Create and scope the 100-element array that will hold the Fleet.
The array represents the spaces on the grid indexed 0-99
$fleet = array();


// define the navy.  no need to serialize, it never changes

PHP originally implemented serialization through the built-in serialize() and unserialize() functions. PHP can serialize any of its data types except resources (file pointers, sockets, etc.) In the case of Riddle-Ship we did not need to serialize as the ships. While the ships position will change, this is not relevant at this time of the coding process, the most important thing about the decision not to serialize would be because the size of the ships never change.Each ship in the $ship array is in face an array on its on, therefore making it an array of arrays. 


$ships = array(0 => array(display => "Aircraft Carrier", type => "aircraftcarrier", code => "a", size => 5), 1 => array(display => "Battleship", type => "battleship", code => "b", size => 4), 2 => array(display => "Cruiser", type => "cruiser", code => "c", size => 3), 3 => array(display => "Submarine", type => "submarine", code => "s", size => 3), 4 => array(display => "PT Boat", type => "ptboat", code => "p", size => 2));


// If true, elements containing gameplay fields are visible
The following code sets the debug variable to false, It is useful during the coding of the project when the code runs if the variable is set to true in the process of running the game grid becomes visible 

$debug = false;


// to make it challenging, we will only allow you to miss 30 times before the game is over.
The following codes sets the variable that controls the number of hits the user gets before the computer wins. 
$missesRemaining = "";
// Gameplay script holds JavaScript to update the client game board and stats to current values.
// Keeps record keeping and scoring simple.
The following code is responsible for keeping the game current
$gameplayScript = "";


// gets grid spot corresponding to cell index

By “Grid spot” it means converting the cell number into an address like “B4” or “G8.”  It takes the cell index as an argument.  That’s the name or number of a cell, like “cell48.”  The first “if” block returns empty if the argument is empty.  The next line takes the word “cell” off if the cell ID is passed in - if it’s “cell48” it turns it into just “48.”  The next if block, with the two strlen() calls, throws out anything that isn’t 1 or 2 characters - so if “100” gets passed in, that returns “illegal address.”  The next block, with one strlen() call, if the number is less than 10 (length 1), it puts a 0 in front of it.  The final return statement takes the first number of the index and turns it into a letter - that’s what the chr() function does, and letter “A” is character number 65, so it adds 65 to the number and then gets the corresponding letter, and then adds one the second number since the grid starts at 1 instead of 0.  So “99” -- first number 9, add 65, is 74, which is character “J”, second number 9, add 1, is 10 - becomes “J10.”  Input 0, less than 10 so turn it into 00, first number 0, add 65, is letter “A”, second digit 0, add 1, is 1, result is “A1.”

function RowAndColumn($cellIndex) {
    if ($cellIndex == "") {
        return "";
    }
    $cell = str_replace("cell", "", $cellIndex);
    if (strlen($cell) != 1 && strlen($cell) != 2) {
        return "Illegal Cell Address";
    }
    if (strlen($cell) == 1) {
        $cell = "0" . $cell;
    }
    return chr(substr($cell, 0, 1) + 65) . (substr($cell, 1, 1) + 1);
}





// converts array to urlencoded string for storage at client
the following code encodes the array to a string for storage, to remember where the computer placed it's ships.
function SerializeFleet($array) {
    return urlencode(serialize($array));
}

// urldecodes and converts string to array for use in program
the following code decodes the string back into the array so the game can access the information and not forget it 
function DeserializeFleet($string) {
    return unserialize(urldecode($string));
}


// function determines if Fleet grid is clear for placement of ship
the following code will check the grid which has to be clear for the placement of the ships so the game can begin.
function CheckPoints($anchorPoint, $shipDirection, $shipSize, $fleet) {
    $increment = ($shipDirection = "vertical" ? 10 : 1);
    for ($shipPoint = 0; $shipPoint < $shipSize; $shipPoint++) {
        if ($fleet[$anchorpoint + ($increment * $shipPoint)] != " ") {
            return false;
        }
        return true;
    }
}



// takes supplied code and loops through array to determine how many times 
// that ship has been hit.
The following code counts the number of times the ship has been hit, this is important because the ships have a different number of times to get hit before they are destroyed.
function CountHitsOnShip($code, $fleet) {
    $hitCount = 0;
    for ($i = 0; $i < 100; $i++) {
        if ($fleet[$i] == $code) {
            $hitCount++;
        }
    }
    return $hitCount;
}

//Hidden variables
The page is full of them. 
<input type=”hidden” id=”___” name=”____” value=”___” />
There are a couple of those that are hidden or visible depending on whether the page is in debug mode or not.  A lot of the hidden variables are serialized and encoded so they stay the same going down to the client and coming back up (which also makes them very difficult to read for a human, which makes it harder to cheat).
I didn’t use session variables, and I don’t plan to.  You shouldn’t mix session variables and viewstate hidden variables in a one page program, it’s sloppy.  The only time you should use session variables is if you have a multi-page application and you have to remember things about the user no matter what page they’re on.


<input type="<?= ($debug ? 'text' : 'hidden') ?>" readonly='readonly' name="targetSquare" id="targetSquare" />
<input type="<?= ($debug ? 'text' : 'hidden') ?>" readonly='readonly' name="targetShips" id="targetShips" value="<?=RowAndColumn($_POST["targetSquare"]) ?>" /> <input type="<?= ($debug ? 'text' : 'hidden') ?>" readonly='readonly' name="hitShips" id="hitShips" value="<?=  $sunkenShips ?>" />
For revealing the positions of a ship’s letters in the HTML grid once it’s sunk.  Goes through grid from 0 to 99, checks to see if there is a piece of that ship in the grid square and if so adds the JavaScript to put the letter in that grid square.


 for ($q = 0; $q < 100; $q++) {
if ($fleet[$q] == strtoupper($ship["code"])) {
$gameplayScript .= '$("#cell' . $q . '").html("' . $fleet[$q] . '");';
}
}




.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
The next block of code to examine contains most of the HTML for the project,
The code is enclosed by the <form> tag. An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.)Users interact with forms through named controls.

 A control's "control name" is given by its name attribute. The scope of the name attribute for a control within a FORM element is the FORM element.

 Each control has both an initial value and a current value, both of which are character strings. Please consult the definition of each control for information about initial values and possible constraints on values imposed by the control. In general, a control's "initial value" may be specified with the control element's value attribute. However, the initial value of a TEXTAREA element is given by its contents, and the initial value of an OBJECT element in a form is determined by the object implementation (i.e., it lies outside the scope of this specification).

 The control's "current value" is first set to the initial value. Thereafter, the control's current value may be modified through user interaction and scripts.
A control's initial value does not change. Thus, when a form is reset, each control's current value is reset to its initial value. If a control does not have an initial value, the effect of a form reset on that control is undefined.When a form is submitted for processing, some controls have their name paired with their current value and these pairs are submitted with the form. Those controls for which name/value pairs are submitted are called successful controls.
Lets break down the components of the <form> the first line opens up the form tag, gives the form and id, a name along with a method of getting the information from the form to to code that is requesting it

 <form id="gameplayForm" name="gameplayForm" method="post">

 The next line is simply opening up the div that will contain the procedures included inside the form to be considered
  <div>
The next line will style the <div> as well as position the output that the user will see
<div style="width: 170px; float: left; vertical-align: top;">
The next line will create the type of button 

 <input type="submit" name="instruction" id="instruction" value="New Game" /> 
<br/>
<h4>Misses Remaining</h4>
<div class="labelRemaining" id="remainingMisses" name="remainingMisses"><?=$missesRemaining ?></div>
                    <input type="<?= ($debug ? 'text' : 'hidden') ?>" readonly='readonly' name="missesRemaining" id="missesRemaining" value="<?=$missesRemaining ?>" />
<h4>Enemy Fleet</h4>
<span title="It takes 5 hits to sink this ship" id="status_aircraftcarrier">Aircraft Carrier (5)</span>
<br/>
<span title="It takes 4 hits to sink this ship" id="status_battleship">Battleship (4)</span>
<br/>
<span title="It takes 3 hits to sink this ship" id="status_cruiser">Cruiser (3)</span>
<br/>
<span title="It takes 3 hits to sink this ship" id="status_submarine">Submarine (3)</span>
<br/>
<span title="It takes 2 hits to sink this ship" id="status_ptboat">PT Boat (2)</span>
<br/>
<input type="<?= ($debug ? 'text' : 'hidden') ?>" readonly='readonly' name="targetSquare" id="targetSquare" />
<input type="<?= ($debug ? 'text' : 'hidden') ?>" readonly='readonly' name="targetShips" id="targetShips" value="<?=RowAndColumn($_POST["targetSquare"]) ?>" />
<input type="<?= ($debug ? 'text' : 'hidden') ?>" readonly='readonly' name="hitShips" id="hitShips" value="<?=  $sunkenShips ?>" />
<p>
   <a href="http://www.hasbro.com/common/instruct/battleship.pdf" target="_blank">Hasbro's Official Rules</a>
</p>
</div>
<div style="float: left; vertical-align: top; margin-left: 10px;">
<p id="directions" class="gridDirections" style="display:<?= (count($fleet) == 0 ? 'none' : 'block') ?>"; >
<?= $playerMessage; ?>
</p>
<table style="display:<?= (count($fleet) == 0 ? 'none' : 'block') ?>"; cols="11" class="gridTable">
<thead>
<tr>
<th></th>
<?php
                                for ($i = 1; $i <= 10; $i++) {
                                    print('<th class="colLead">' . $i . '</th>');
                                }
                             ?>
</tr>
</thead>
<?php
                        $cellIndex = 0;
                        for ($rowCount = 0; $rowCount < 10; $rowCount++) {
                            print('<tr>');
                            print('<td class="rowLead">' . chr($rowCount + 65) . '</td>');
                            for ($colCount = 0; $colCount < 10; $colCount++) {
                                print '<td onclick="JavaScript:OpenFire(this.id);" class="gridSquare" id="cell' . $cellIndex . '"></td>';
                                $cellIndex++;
                            }
                            print('</tr>');
                        }
                        ?>
</table>
</div>
</div>

 <div style="clear:both;">
&nbsp;
</div>

             <!-- the gameplay script from the server is written into this block.
                it repaints formats, sets counters, places text markers, etc. -->
<script type="text/javascript">
                $( document ).ready(function() {
                    <?php print($gameplayScript) ?>
});
   </script>
 

 <!-- holder for variables at client side.-->
<input type="hidden" name="gameplayScript" id="gameplayScript" value="<?=$encodedScript ?>" />
<input type="hidden" name="fleet" id="fleet" value="<?= $encodedFleet ?>" />
<textarea readonly="readonly" style="width: 600px;display:<?= ($debug ? "inline-block" : "none") ?>;" rows="14" id="debugFleet" name="debugFleet"><?= $debug ? var_dump($fleet) : "" ?></textarea>
<textarea readonly="readonly" style="width: 600px;display:<?= ($debug ? "inline-block" : "none") ?>;" rows="14" id="debugScript" name="debugScript"><?= $debug ? $gameplayScript : "" ?></textarea>

 </form>
The h1 element is used to indicate the most important (or highest-level) heading on the page.In total, we have six heading levels to choose from—h1 to h6—to add structure to the web page. h1 is the highest heading level (and, by default, the largest in terms of font size) and h6 the lowest (and smallest).For my code, I choose the <h1> for my title because it is one of the most important things on the page text-wise. 
                          <h1>RiddleShip</h1>

Paragraphs are defined with the <p> tag.To style the text inside the <p> tags you create a class or define  in the css, and call it before the closing of the opening <p> tag.
          <p>To play click new game button</p>

Facebook like/share(not a requirement, something my mom thought would make it neat and different and she was like how do I let my friends know I won?)
the following code is easily generated from Facebook's app developer tools. It is easily copied and pasted right below the <body> tag, this feature lets users connect the game with their Facebook account.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=155379194883";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
.
.
.
..
.
.
.
.
The code below is for the directions, the text is styled in the css above and accessed through the id="header."
<p id="header"> HOW IT WORKS<br>

  Riddleship<br> is played on a 10X10 grid with rows lettered A through J and columns numbered 1 through 10.  The object <br>
  is to sink all of the enemy ships on the board by calling out grid locations; if an enemy ship occupies that location,<br>
  the ship sustains a hit; if enough hits are registered on the ship, the ship sinks.  There are five ships of varying sizes<br>
  in the enemy fleet.  Normally this is a two player game but the computer does not play, so to make it challenging the<br>
  human player is allowed to miss only 30 times before the game ends.  If the user can sink all five ships before missing<br>
  30 times, he/she is the winner. The game board represented is an array of 100 elements. <br>
  The computer places the ships on the board randomly so that<br>
  no ships are colliding or hanging off the board.  Diagonal placement is not allowed.  When the ships are placed, they<br>
  are placed with a code letter representing that ship in each of the spaces.  The ships are first placed with lower case<br>
  letters.  When a hit is registered, the lower case letter is replaced with an upper case letter.  The number of upper<br>
  case letters for each ship is counted and if that count equals the "size" of the ship, that ship is sunk.</p>

The "footer" id corresponds with the #footer in the css to style the footer content in the manner the author intended.The <footer> element represents a footer for its nearest ancestor sectioning content or sectioning root element.
Point

 A footer typically contains information about its section: 
author
links to related documents
copyright data
etc.
 <p id="footer">Copyright &copy; 2013 DeAnna Riddlespur </p>
When the body part of the file is complete, and you have everything enclosed that you want  to be considered in the body of your generated file ALWAYS remember to close your body properly. 
</body>
As always we should never forget to close our HTML tag, this would make all of our heard work go to waste as the code will not run correctly if something as simple as a closing tag is not properly used. 
</html>






Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)