Embedded Files
This homework is not required for students in the project track.
Due date: Tuesday June 6, 2017
CrowdGrader Site: https://www.crowdgrader.org/crowdgrader/venues/view_venue/3149
The Assignment
The Assignment
In this assignment, you have to implement a game of battleships between two players over 8x8 boards, using Apache Cordova.
The board has to look more or less as follows:
Players are paired when they write the same magic word, exactly as we did for the tic-tac-toe game.
NOTE: You need to indicate whether:
- The other player has joined the game or not
- The magic word has already been taken by two other users, so you cannot use it to play.
- It is your turn to play or not.
This was done also for the tictactoe game in class, and you can use that logic as starting point.
On top is the board where you "shoot". The squares are initially empty. You "shoot" by clicking (touching, if on a phone) a square. If you shoot and hit a boat, the square turns red. If you shoot and hit water, put a blue dot (or color the whole square blue). When a boat is sunk, color all squares that share an edge with the boat in blue, so that it is evident that the boat is sunk, and so that you mark out as water the positions where no other boat can possibly be.
On the bottom is your own board. It contains 1 3-square ship, 2 2-square ships, and 3 1-square ships. Initially, ships are green and the water is white. When the adversary hits water, the square turns blue. When the adversary hits one of your ships, the ship square turns red.
The game terminates when all of a player's ships are sunk.
At that point, it should become possible to press the "new game" button and start a new game.
Starting a new game before the current game is over should not be permitted.
Your app will be graded by using two instances of it (running into two browser windows) play against each other.
So your app needs to use a protocol that is compatible with itself, but not with any other student's app.
Advice
Advice
Board. If you want to put a blue dot, you can use one of the icons from font awesome, e.g., <i class="fa fa-icon-circle"></i>. To color squares, you can assign classes to them conditionally in vue based on board content, using the v-bind:class directive. Then, in the css, you can define the background-color of <td> cells (assuming you use a table) that have a certain class. This is similar to how it was done in the 15-puzzle; if you did not get this right, go back to CrowdGrader and look at how people solved that problem.
Initial board. To create the initial board, use the getBoard function by our TA Shobhit. In his board, water is represented by "*", and ships by integers, so that e.g. the second ship will consist of two "2" placed on adjacent squares on the board. This numbering allows you to easily tell when a ship is sunk. You can run his code and print the outcome to become familiar with it if you wish, just cut and paste it into the javascript console and then run getBoard and printBoard.
Board content. I haven't thought deeply at how to do it, but if I were to do it, I would use "w" to represent hitting water, and I would represent hitting a ship with "2" in the square, with ... not sure, perhaps "-2".
Starter code. The starter code consists of the tic-tac-toe code, https://bitbucket.org/luca_de_alfaro/cordovastarterapp/branch/tictactoe , as well as the code provided by Shobhit.
The cloud server. As for tic-tac-toe, you can use the following methods:
The magic word. To avoid clashes with fellow classmates, choose a random string (e.g., "bananapie", but choose another as this is not random), and append it to the beginning of what the user enters, so that if the user enters potato, you use "bananapiepotato". Using the prefix should minimize clashes with classmates.
Implementing the game. As for the tic-tac-toe game, you have to come up with a representation of the game state. I have not implemented this game, but my guess is that the state should include:
- Board 1
- Board 2
- player_1: <id of player1> (so that players know which is their board, and which is the adversary's one)
- player_2: <id of player2>
- turn_counter: an integer denoting the number of moves played in the game. You increment this when a player plays. This can be used also to determine whose turn it is, according to whether it's even or odd.
- game_counter: a counter of the number of games played. This is incremented when a new game is started. You need this because a new game is going to have a smaller turn_counter than the old one, but it is still a more recent game state.
If you have two states s1, s2, then s1 is more recent than s2 if (s1.game_counter, s1.turn_counter) > (s2.game_counter, s2.turn_counter), where the inequality is evaluated using lexicographic order. You can use this timing relation in order to merge the state on the phone with the state you get from a server call; for tic-tac-toe, this merging is done here. Rather than comparing board positions, you can compare the counters.
Be flexible. In my tic-tac-toe code, I put some code in functions such as update_local_vars. I don't know if this is the best arrangement for battleships. Be flexible, don't think my starter code is cast in stone.
Page updated
Report abuse