In this lab you will create a logic-based game to be played against the computer. Basically you will select a number and an open location on a three-by-three grid to place that number. The computer will then do the same and this turn-taking approach will repeat until a winner is found or there is a draw/tie. The goal in winning this number-placement puzzle is to get three of the players numbers in a row that sum to 15.
You will create a three-by-three grid that will act as the playing board for the game. As shown in the image below, initially the board will be blank and numbers will be added to the board as they are selected and placed. Either the player or the computer can place the numbers, depending on whose turn it is. This is a two-player game where one player is the computer. Each players selection on the board should be identifiable from the other player, by using external CSS stylizing. This can either be by using a certain set of colors, fonts, and/or effects for each player.
In addition to providing the playing board, players should also be provided a set of numbers that they can choose from. Both players, with one being the computer, share this single set of numbers. As the number is placed on the board, it should become unavailable for future use by either player for the remainder of the game. As a three-by-three grid provides nine space possibilities, only the numbers from 1 to 9 should be provided as choices to the players. By the time all squares are filled with selections, all possible numbers provided should also be used up and therefore unavailable.
Play should continue in turn until, when summed, either a players row of values equals 15 (horizontal, vertical, or diagonal) or all squares have been filled without either players combination equaling 15. In the former case, the winner would be announced and the game would terminate. In the latter case, it would be announced that the game ended in a draw. In either case the ability to reset the board should be provided via a button so the player can start the game over at any time. See image.
In addition to programming the logic for this general functionality, additional details provided below should be implemented in the design of the game.
For the early submission points, you do not need to be concerned about having the complete functionality implemented. You should focus on setting up the playing board visually and determining the possible square combinations for winning. At the point of final submission, your application should be laid out in the Lab Content area of your web site as illustrated in the previous left image. Form elements should only be implemented after the first submission point.
When creating the three-by-three playing board for the game and number selector, you should use a new, additional external style sheet to both position the form elements and stylize them. Tables should not be used for creating the playing board, as they are not XHTML compliant. The playing board should be made up of a series of square form buttons placed in a three-by-three grid. The < button> form element is similar to the < input type=submit> and < input type=reset> form elements you are familiar with, however they provide additional stylizing and functionality which you will need.
Choosing a number from the options provided should be mutually exclusive. For example, if I chose the number 9 and then, before selecting a board square to place it on decide I want the number 7 (assuming both are available), the number 9 should no longer be selected. After selecting the available square on the playing board where I would like the number to go, the number should no longer be able to be chosen. Once a number has been placed on a particular square and stylized for that player, that square button should become disabled to prevent it from being selected again during the same game. If a winner is found, all square buttons should be disabled. The reset button should allow all the disabled squares to become enabled as form buttons again and should be implemented using the
As you will want the current playing board logic to be updated with the new selection, you should have the form submit to itself. As such, your logic will need to be able to handle the new square selections and numbers coming in from the form, so that they can be added to the playing board. In addition, you will want to make sure that you can handle the selections that the computer player is making also.
While the game takes place in turns, the computer player should never go first. After a player submits their selection by choosing from the available numbers and selecting an available position on the playing board, the computer should then provide their desired number and position. The computers selection will be provided by an API, which your code will interface with. In order for the computer to make its selection, you must let the computer know the current layout of the board, including any squares that have already been selected, the player who has selected that square, and the numerical value on the square.
In order to play against the computer, you will need to send a request to the API file p2turn.php containing the information needed for the computer to take its turn without error. The URL where you will specify the current arrangement of the playing board to the computer is:
http://helios.vse.gmu.edu/~dgarriso/ss/p2turn.php?cn=p#&vn=value
where n is the square number whose player information and value are being provided, and # is the player number who has a value on that square. The computer is considered player p2, and the other player is p1. When providing selection information to the computer, you should note that the square layout is zerobased therefore the first square is (c0, v0).
So for example, if the current layout of the playing board is: See image.
your PHP code would provide the needed information to the computer player so that it can make its square selection by using the URL:
http://helios.vse.gmu.edu/~dgarriso/ss/p2turn.php?c0=p1&v0=9&c1=&v1=&c2=&v2=&c3=&v3=& c4=p2&v4=2&c5=p2&v5=4&c6=&v6=&c7=p1&v7=5&c8=&v8=
Once you have compiled the URL, you will need to use it to send the current arrangement so that the computer can return which number and square position it would like. You should use the built-in file() function to send the URL. As you will note from searching this function in the http://php.net docs, this function returns an array. This array containing the computers selection will allow you to retrieve the information right into your PHP code. The array structure returned from this URL file request is in the following format:
array [0] – Square number desired by the computer (zero-based)
array [1] – Number desired for the square chosen by the computer
You should take the information provided in the returned array and use that to select the square desired by the computer and place the number chosen by the computer on that square. Of course that square should now be deselected and the number should no longer be available for either player to use (as it was just used by the computer).
With the computer knowing the square and number you chose and then responding with what it desires from those remaining, you can update the board. For the round of turns, it should show the updated square selections, whose chose them, and the corresponding numbers chosen by each player (one player being the computer). Of course you should retain all the previous selections on the board, identifying both the player and their number for each selected square. Make sure that the numbers that players can choose after this update correspond to those that havent already been played on the board.
After each turn, whether it is the players or the computers, you should check whether there is a winning combination for that particular player. As noted earlier this will require summing up all the values belonging to each player for each possible straight line combination, whether horizontal, vertical, or diagonal. If a combination for that player equals (but is not greater than or less than) 15, the player has a winning combination. It is worth noting that you are not simply adding up the values in a particular line of squares, but rather you are adding up the values in that line of squares that belong to the player you are evaluating. You will evaluate the possible winning combinations for the player after they make their selection and you will evaluate the possible winning combinations for the computer after it makes its selection. This may require checking all possible winning straight-line square combinations after each turn to see if the new value produces the sum of 15.
If the player has just made a winning selection, there would be no reason to have the computer make their selection and complete the round. In this case you should just output the selection of the player on the board, thereby showing the winning board combination. This would be in addition to continuing to show the previous selections of the computer and player that were not part of the winning combination. You should then indicate that the player has won as show in the image below (left): See image.
If after receiving the selection from the computer (thereby finishing the round) you find that the computer has made a winning board combination, you should indicate that the computer has won. In this case you would provide the selections of both players for the round in addition to the previous selections of the player and computer that are not part of the winning combination.
It is possible that if all the numbers have been played and squares have been chosen but no winning combination is found for either player, effectively a draw or tie is achieved. This should be indicated, as the game is over with no winner. No matter which scenario occurs (player win, computer win, or draw), all buttons on the playing board should be disabled, whether selected as part of this game or not. In addition as shown in the image above, all the number choices should also disappear whether played or not.
As making a game like this involves many repetitive calls, the use of user-defined functions should be heavily implemented in the coding design to make your code more efficient. In addition to creating them to determine whether a player has won, you should also implement built-in functions when creating the playing board grid. Create functions for other areas where appropriate. Further, you should utilizing decision structures and iteration structures when beneficial and/or necessary. Built-in functions, iteration structures, and decision structures should be part of your early submission points.
When laying out your web page, you should retain the common navigation and structural components (header and footer) of your website even though not shown in the images. This will require you to incorporate the SSI file references in this lab assignment as you did on previous the lab assignment. SSI files should not be moved but rather you should provide the path to their original file location. The common navigation and structural components should present visual continuity across all the web pages of your website and should not shift at all when going from web page to web page. You should not update any SSI files (including the links within them) for this lab assignment. In addition, while the image does not demonstrate this, you need to include a working link on this page to get back to your home page.
In order to create the output required of this assignment you should use XHTML for the content of all files and CSS for the stylizing and layout. While setting up the positioning of the playing board, its elements, the number selectors, and outcome indicators, note that the layout should remain consistent and visible no matter the size of the browser window. Cascading styles necessary for this assignment should be implemented as part of the early submission points. While you should continue to use the external CSS you created for your home page, you should not modify or update the file. Your new CSS file should not conflict or modify the layout and positioning of earlier lab assignments.
You should use a file name that will automatically load if a user specifies only the folder name as part of the URL. The file should be uploaded to your Lab Assignment 2 directory. Your XHTML file should be well-formed and created using a strict XHTML DTD. You can create the web page using any text editor (Microsoft Notepad, RogSoft Notepad+, Adobe Homesite, etc) that is not WYSIWYG capable (Adobe Dreamweaver, Microsoft Word, etc).
As you are building your web page you should either submit that web page to the W3C Validator or use the Firefox HTML Validator to assure XHTML compliancy. Beyond these requirements, you should make sure that your website is visually appealing. In other words, once meeting the requirements listed, go ahead and be creative.
You should first make sure you meet the requirements of the first submission point before proceeding with the final requirements. The accompanying grade sheet further details these requirements.
In general, the first submission point requires you to design a three-by-three grid for the playing board by using iteration structures. In addition, you should implement some simple decision structures that check for the possible winning combinations for the player and computer based upon the elements used to create the playing board. The playing board should be positioned (and stylized where possible) using the CSS requirements stated.
Your final submission point requires you to add functional form elements to the playing board that are stylized per the CSS requirements. Number selection requirements, positioning, and stylization should also be added for the final submission. Finally, game play should be implemented for the player and also the computer using the API provided.