Assignment 1 Tutorial

Game States

In order to write a web application for a game like Battleship or for tracking expenses, you need to have a good way to represent the applications's information. That means you have to answer questions like "How will my program represent the location of ships on the Battleship grid?" and "What information should be recorded for each transaction in the expense tracker?" One good way to figure out how to represent the information is to look at a snapshot of the application and see what data structures (numbers, strings, arrays, and objects) are necessary to record all of the information needed for the snapshot. I will refer to the snapshot as a "game state", even though some projects, like the expense tracker and the event calendar, are not games.

Let's look at a game state for Tic-Tac-Toe. It will be simpler than the game state for your project but it still shows the basic idea. The game state for Tic-Tac-Toe needs to include the following information:
• The location of Xs and Os in the grid.
• Whose turn it is.
• Whether a player has three in a row.

Arrays and Lists

The easiest way to represent the Tic-Tac-Toe grid is probably a two-dimensional array. In JavaScript you can use square brackets to write an array. Here's a list of numbers:
      [1, 2, 3]
Here's a list of lists, which can be used as a two-dimensional array:
      [[1, 2, 3], ["a", "b", "c"]]

One way to represent the Tic-Tac-Toe grid is with a 3x3 array with Xs and Os represented by strings and empty squares represented by spaces. At the beginning of the game, the grid would look like this:
      [[" ", " ", " "], [" ", " ", " "], [" ", " ", " "]]

For this assignment your sample game state should show a game in progress, so that it can include things that might not be in the game at the beginning. In Tic-Tac-Toe we would want the game state to have at least one X and at least one O so that it's clear how the Xs and Os would be represented. We could use something like this:
      grid: [["X", " ", " "], [" ", "X", " "], ["O", " ", " "]]
In this example "grid: " means that grid is a variable that has the two-dimensional array as its value. It isn't JavaScript code, it's just a convenient way to show the value of a variable. (Actually, you'll see in a minute that it's pretty close to being JavaScript code.)

Another possibility would be to use numbers to represent Player 1 and Player 2, with zeros for empty squares, like this:
      grid: [[1, 0, 0], [0, 1, 0], [2, 0, 0]]

For Tic-Tac-Toe we also need a way to keep track of turns. For that we could use a variable named turn and set it to a the number of the player whose turn is next. Here's an example:
      turn: 2
We could also have a variable gameOver with a value of false to show that the game isn't over yet:
      gameOver: false

Objects

JavaScript Object Notation (JSON) is a way of writing objects that is useful for writing a sample game state. The basic idea is that an object is represented by curly braces. An object with no properties is just written with nothing between the braces, like this: {}

Properties are represented by the property name, then a colon, and then the property value. Properties are separated by commas. Here's an object that has two properties, size and flavor. The value of size is large and the value of flavor is chocolate.
      {"size": "large", "flavor": "chocolate"}
You don't always have to put quotes on the property names, but I think it's a good practice. Property values that are numbers or boolean values (true and false) don't have to be in quotes.

Property values can be boolean values, numbers, strings, arrays, or objects. Here's an example of an object that has objects as the values for each of its two properties:

order: {
   "milkshake": {"size": "large", "flavor": "chocolate"},
   "sundae": {"size": "medium", "flavor": "caramel"}
}

Here's a sample game state written as a JavaScript object literal:

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

In addition to figuring out the data and what the game state will look like, it's also a good idea to look at what functions you will need to work with the game state. In the case of Tic-Tac-Toe, one of the most important functions will be the function that checks to see if there are three Xs or three Os in a row. We will also need to a function to update the contents of a square.

Model-View-Controller

The Model-View-Controller (MVC) design pattern a way of designing applications so that the appearance and user interface can be changed without affecting the basic data and mechanics of the application. For example, if I write an application for playing chess, there are many different ways that I could display the chess board and pieces, ranging from plain text to animated 3D graphics. However, changing the appearance of the chess board doesn't change the rules of the game. If I am using the MVC pattern then I will separate the code that works with the rules of the game (like checking to see if a move is legal) from the code that displays the board and pieces. That way I can change one without changing the other, and it makes it simpler and easier to work with each of the parts.

For the project in this class we will be using the basic idea of MVC but we will not distinguish between the view and the controller. The view will include the HTML that's used to display the game and the user interface, and the model will be the game state and the functions that work directly with the game state.

We will talk more about MVC later on, but the most important thing to keep in mind now is that the game state, as part of the model, should not have anything in it that tells what the game will look like. For our purposes that means that the game state won't have any HTML, CSS, or image file names in it.