Assignment 3 Notes

Here's a step-by-step outline of what you need to do for Assignment 3. It uses the Tic-Tac-Toe sample game state from the Assignment 1 notes about sample game states.

Step 1: Make JavaScript variables for your sample game state

Here's the sample Tic-Tac-Toe game state from the Assignment 1 notes:

gameState: {
   "grid": [[1, 0, 0], [0, 1, 0], [2, 0, 0]],
   "turn": 2,
   "gameOver": false
}

In this case I will make three JavaScript variables: one for grid, one for turn and one for gameOver:

var grid = [[1, 0, 0], [0, 1, 0], [2, 0, 0]];
var turn = 2;
var gameOver = false;

Your project will need different variables, but the basic idea is the same. Since all projects are grid-based games or apps, they will all need at least one two-dimensional array variable like grid in the example above. Look back at your sample game state from Assignment 1 to see what kind of data should go in each element of the 2D array.

Since the game state is part of the model, I'll put these variables in a file called model.js. View code will go in a separate file called view.js You don't have to use those file names, but it's a good idea to have separate files for model code and view code.

Step 2: Write a getSquare function to get the contents of a grid square

Write a function in your model that will return the contents of one grid square from the sample game state. In the case of the Tic-Tac-Toe game state, each square has a player number (1 or 2) if a player has placed a mark (an X or an O) in that square or a zero if a player hasn't placed a mark there. I will refer to this function as getSquare but you can name it whatever you want. Here's the function I wrote:

function getSquare(row, col) {
   return grid[row][col];
}
This function is simple but it does the job.

Your getSquare function will probably be similar and might be exactly the same. One thing you might want to do is check the parameters to make sure that they are in bounds. If they're not, you could throw an exception or print an error message to the console.

At this point your model file might be finished for purposes of Assignment 3. Here's a link to my example file model.js

Step 3: Test your getSquare function in the console

The next step is to test your getSquare function in the console. It might be a simple function (like mine) but it's a good idea to test it so that you get some practice using the console and get in the habit of testing your code early and often.

I've included my model file in this HTML document so that you can try calling getSquare in the console. To try it out, open this page in Chrome and then open the Chrome Developer Tools. Go to the Console tab and you will see a prompt that looks like this: >

You can type in any JavaScript expression you want to, and the browser will evaluate it and print the result when you press Enter. Here's a screen shot after two calls to getSquare have been evalated and a third call has been typed in but not evaluated:

Step 4: Put a call to your getSquare function in your view code

Now that you've written and tested your getSquare function it's time to switch to the view code. Your view code from Assignment 2 should have nested for loops to generate an HTML table. Inside the inner for loop put a call to your getSquare function. Pass the loop counter from the outer loop as the first parameter (the row) and the loop counter from the inner loop as the second parameter (the column).

Here's an example of how to do that:

function gen() {
    for (r = 0; r < 3; r++) {
	for (c = 0; c < 3; c++) {
	    var content = getSquare(r, c);
	    console.log("row: " + r + " col: " + " " + c
			+ " content: " + content);
	}
    }
}

This example doesn't have any of the code to create HTML elements, but you should have that code from Assignment 2.

Step 5: Use the getSquare value to make HTML for the table cell

After the call to getSquare you can use if-else statements to create the right HTML for the table cell. In the Tic-Tac-Toe example, getSquare returns a 0, 1, or 2. If the return value is 0, the table cell should be empty. If it returns a 1 the table cell should have an image of an X, and if it returns a 2 the table cell should have an image of an O.

Here's some JavaScript code that shows that basic structure, although it doesn't include any code for creating HTML elements:

function gen(rows, cols) {
    for (r = 0; r < rows; r++) {
	for (c = 0; c < cols; c++) {
	    var content = getSquare(r, c);
	    if (content == 1) {
		// MAKE AN IMAGE TAG FOR AN X
		console.log("row: " + r + " col: " + c + " image: X");
	    } else if (content == 2) {
		// MAKE AN IMAGE TAG FOR AN O
		console.log("row: " + r + " col: " + c + " image: O");
	    }
	}
    }
}

Here's a link to my view file: view.js

As with getSquare, I can test gen by calling it in the developer tools console:

view.js is loaded with this HTML page so you can try out gen in the console. Keep in mind that model.js and view.js files are a bare bones approach to Assignment 3. There are some things that they don't do well, especially with regard to error handling.

Notice how the model is separated from the view. I might start with a view with a simple HTML table that contains Xs and Os as characters. Then if I decided to use some CSS to make the table look better, I could do so without changing the model at all. I could also change from X and O characters to images of Xs and Os or of images of sea turtles and starfish.