After you have read through the assignment, be sure to read the Assignment 3 Notes. (This is the same link as in the Getting Started section on the bottom of this page.)
Models and views
Chess can be played with any number of different chess sets, or even no set at all (if moves are recorded on paper, as in a play-by-mail game), but every game makes use of a similar model. The model for a chess game includes information about the location of pieces, which pieces have been captured, and whose turn it is. It also includes information about how the pieces can move and capture. The chess set (board and pieces) are the view of the game. The same kind of model is used for games played on a small pocket set with a magnetic board and pieces, or a large board where people act as the pieces.
The same idea applies to other games. For instance, in Battleship, the state of the game (or model) includes what shots have been taken, which shots were missed, and which shots were hits. The model also includes information about ships: size, location, and orientation, and damage. The model does not include any information about how the game is displayed. That means that the same model could be used with any kind of view, ranging from a simple text display on a phone to a big-screen 3D display with surround sound.
By separating the model and the view, we can make the model simpler and easier to understand. We can also make it possible to use the same model with different kinds of views.
It’s important to decide what functions the model will provide, since no code outside of the model should directly access the data structures in the model. For example, in my sample software design for a program for the card game Hearts, the following functions are described: deal, playCard, endTrick, endHand.
If you do a good job defining the interface to the model (the functions that can be called), then it will be relatively easy to change the data structures used inside the model if you need to. Keep in mind that for this assignment the only part of the model that you have to write is the code that creates the data for the sample game state. In most cases that code will be relatively simple.
You don’t have to implement model functions for this assignment. You will implement those functions as part of the final project. For Assignment 4 there will be a project checkpoint where I will ask you to say how much of the game logic you have implemented, and you’ll need to have at least 25% of the game logic implemented to get full credit for the checkpoint.
Use a model state that represents a game in progress so that you have some game pieces to display in the grid. Setting up various test cases takes time, but it can save a lot of debugging time later on.
Display game objects in your HTML grid
After you have written the code for your model, write code that will display game objects (like chess pieces) in the HTML grid based on the data in the sample game state. The code that displays game objects should be executed after the code that generates the HTML grid.
In many cases, the code that displays game objects will have nested loops that go through each cell of a 2D array in the model and use the model cell’s contents to add the appropriate content to a cell in the HTML table.
The first thing you need to do is to use getElementById to get a pointer to the HTML table element:
var gridTable = document.getElementById("myTableId");
Next, use the loop counters as the row and column to index into the elements of the HTML table and get a pointer to the table cell (td element) like this:
var cell = gridTable.rows[row].cells[col];
The previous line of code assumes that
row is the counter for the outer loop and
col is the counter for the inner loop.
Once you have a pointer the HTML table cell element, you can use the innerHTML property to set the contents of the cell appropriately.
Important: I need to be able to look at your HTML table and see that it correctly displays the model. For that reason you might need to display something other than the initial state of the game. In Concentration or Minesweeper, for example, the initial display will be a grid where all squares of the grid look the same. For games like those you should display an intermediate state or the final state of the game so that I can see that information from the model is correctly displayed.
Make a software design
For Assignment 1 you made a sample game state and described some of the functions that will be part of the model. For this assignment you should incorporate the sample game state and function descriptions into a software design. Your design should include your (updated) sample game state along with descriptions of the arrays and objects used in the model. It should also include descriptions of the functions/methods that the model provides.
You can look at my preliminary software design example for the card game Hearts to get an idea of what to include. Note, however, that it does not include a sample game state, which should be in your software design. You can see an example of a sample game state in the web page for Assignment 1.
Your design should be displayed on the project home page (index.html) or in an HTML document that has a link on the project home page.
Not sure how to get started on implementing your model and view? Here are some notes that have step-by-step instructions for setting up your model and view: Assignment 3 Notes
Displays information from the model in the HTML table. The display shows a game in progress with game objects placed in the grid.
Software design describes the model and includes an updated sample game state and descriptions of the functions/methods it provides.