Model and view for game grid and pieces Solution



In Assignment 1 you wrote a sample game state and made hand-coded an HTML mock-up showing the sample game state. Then in Assignment 2, you wrote JavaScript code to generate HTML for a table to use as the grid for your game. In this assignment, you will put your sample game state into JavaScript and write JavaScript code that uses the sample game state to display the game in a view, which is the HTML table.

We are using a simple version of the Model-View-Controller (MVC) design pattern, which is an important and commonly used software design pattern. The game state is part of the model, which contains JavaScript data and the functions that work with that data. The controller will be the JavaScript code that gets data from the model (JavaScript arrays and objects, with some JavaScript code) and displays it in the view (an HTML table). For purposes of this class, the controller and the view can considered to be the same thing, but usually the controller and the view are separated.

Be sure to read the notes on MVC in the Lesson 5 notes and watch the video (or read the script).

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.

Make a sample game state using JavaScript objects and arrays

The first thing to do for this assignment is to decide what data and functions will be part of the model. Your sample game state from Assignment 1 should be helpful in doing that, although you might need to modify it. For Assignment 1 you didn’t have to pay too much attention to JavaScript syntax, but for this assignment you’ll need to code your sample game state in JavaScript.

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: dealplayCardendTrickendHand.

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.

Most grid games will include a two-dimensional JavaScript array in the model. For example, in Minesweeper each cell in the 2D array could indicate whether that square in the grid has a mine, and if not, how many mines are in adjacent squares. It can also include information about whether the square has been revealed or whether the user has flagged it.

Many kinds of grid games can also make good use of JavaScript objects in the model. For Battleship, each ship in the game can be represented by a JavaScript object that tells the size, location, and orientation of the ship, as well as how many hits it has taken.

Write JavaScript code that creates a sample game state by initializing the data in your model. You should use alerts, output to debugging divs, and browser debugging tools like the Chrome developer tools to make sure that your model (sample game state) is properly created.

Your model should not contain any HTML, CSS, images, or image file names. Those things should be in the view part of your program. To receive full credit, you must have the JavaScript for the model in a different file than the view (and controller) code. (For this assignment, don’t worry about separating the controller from the view.)

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.

If you have two loop counters that are used in nested loops, it’s easy to use those counters to index into a 2D JavaScript array in the model. It’s possible to use those same counters to access cells in an HTML array.

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.

Getting started

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

Turn in

Put your JavaScript file, along with your game desription HTML file, grid HTML file, CSS file, and image file(s) in a zip file and turn the zip file in as specified on the main Assignment page.



Creates and initializes a model that uses JavaScript arrays and objects


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.