Assignment 1: Project Description and Game Grid

Due: September 4, 2017

For this assignment you will choose a grid-based game (or other web application) for your project and write an HTML page that describes the game. Then you'll decide how to represent the data for your game and make a sample game state. The sample game state shows a snapshot of the game in a format that a program can use: numbers, strings, arrays, and objects. Finally you will make an HTML table for your game grid that will show the sample game state the way that someone playing your game will see it.

For Assignment 2 you will write JavaScript code that generates an HTML table for the game grid. For Assignment 3 you'll hard-code a game state using JavaScript data types and then write JavaScript code that uses that game state to place game objects (like checkers, ships for Battleship, or cards for Concentration) into the grid. By manually making a game state and using that game state to make HTML, you will better understand how to write JavaScript that works with the game state and uses the game state to generate HTML, and that will make it easier to do Assignments 2 and 3.

Choose a project and write an HTML description

Choose a grid-based game or puzzle as described on the Project page. (If you're not into puzzles and games, take a look at the event calendar and expense tracker project suggestions.) If you want to do a project that is not listed on the Project page, you will need to be careful about choosing a project that is the right size (not too much work or too little). It's best to to go with one of the suggested projects unless you have a lot of programming experience. If you'd like, you can talk to me about choosing a good-sized project.

It's helpful to break your project up into phases, so that if you don't have time to complete the whole project you will still have a working web application. You can change your project later if you need to, but please check with me first.

Make a web page that explains how the game is played and a web page with the game grid on it. The game description page should have a link to the game grid page. The file name for the description page should be index.html

The HTML for your description doesn't have to be fancy or complicated, but you should make good use of basic HTML tags, including links, headers, lines, lists, and other tags as appropriate. In particular, it must include the following elements:

Image: As part of the description of your project, include at least one picture or diagram. If you didn't make the image, be sure to give proper credit for it. Don't use images unless you have permission to do so.

External link: Include at least one link on your page that goes to an external web site (outside of UVU). The page should be related to your game.

Separate window for external link: For your external link, specify a target attribute so that the linked file will open in a separate window (or a new window, if there is no open window with the name specified in the target attribute).

Table: Use HTML table tags to make a grid that is suitable for your game. The table should show a snapshot of a game in progress and should not be in the same HTML file as the game description. There is a more detailed description of the table below.

Your game description page (index.html) should have a link to the game grid page. The game grid page should be loaded into the same window as the game description page.

Write a sample game state

Write a sample game state for your game. A game state is a snapshot of the data in use when your game is played, as explained below. Your sample game state should be written in JSON (JavaScript Object Notation) and displayed at the bottom of your game grid page for this assignment. Even though the game state is written in JSON, it should not be inside <script> tags, the way JavaScript usually is, because it needs to be visible on the page and won't be used by JavaScript code for this assignment. One good way to display it is to put in inside <pre> tags.

As you work on your project through the term you will be writing JavaScript code that maintains the data used in the game. By figuring out how that data can be stored now you will make it easier to write the code later.

To write a game state, figure out what variables you will need for the game and what kind of values they will have. For chess and checkers, that means keeping track of the location of pieces on the board. For Concentration that means keeping track of the cards and which ones are face up and which are face down. It also means keeping track of how many matches have been made and how much time the player has spent. For Sudoku it means recording the numbers in the grid and knowing which squares have given numbers, which squares have numbers entered by the user, and which squares are empty. The game state for Sudoku should also have a timer value that tells how long the player has been working on the puzzle.

Make sure that your game state represents a game in progress. That's important because you need to make sure that your game state includes all the necessary information, not just the information available at the beginning of the game. For example, at the beginning of Minesweeper, no squares are revealed or flagged, so if you write your sample game state for the beginning of the game it might not include a way to keep track of which squares have been revealed or flagged.

You can read about how to make a sample game state here: game state tutorial

Make an HTML table for your game grid

Hand code an HTML table that shows a game grid for your sample game state. The JSON that you wrote represents a state of the game but has no information about the game state could be displayed to the player. For this part of the assignment you will make an HTML table that shows how that sample game state will be displayed when you have a working game.

In future assignments you will write JavaScript code that creates and maintains a game state and uses that game state to generate HTML for your game grid. For this assignment, you will use your sample game state to make a mock-up of your game grid that shows what your game will look like but the HTML will be typed in directly rather than being generated by JavaScript. Manually creating a game state and using that game state to write HTML will help you understand what your JavaScript code needs to do later on.

Making a mock-up gives you a chance to see how your game will look before you start programming it. It's easier to try out different possibilities when you are typing in HTML directly than it is if you have to change a program that generates the HTML. Also, when you first learn how to generate HTML from JavaScript, it can be confusing and hard to get right. If you already know what HTML your JavaScript is supposed to generate you will have an easier time writing your JavaScript code.

Make sure that your sample game state is a snapshot of a game in progress and that your HTML table shows all the information it needs to for the game. For example, if your game is Minesweeper, your grid should show some squares flagged, some squares with numbers, and some squares that are unchanged. If your game is Concentration, your grid should show some cards that are face down and some matches that are face up.

You should make good use of HTML, CSS, and images in your game page and grid so that it looks like a game and not just an HTML table. Minimal game grids will not receive full credit.

Here are some requirements for particular games:
• Concentration: Card backs and fronts should be images, as stated on the project page.
• Minesweeper: Flags should be images.
• Sliding tile puzzle: Use a cut-up image so that each tile shows part of a single larger image. The tiles should be shuffled.

If you spend time figuring out how your grid can be created from a game state it will make it easier to write JavaScript to generate the grid (in Assignment 2) and place game elements (in Assignment 3) later.

Type the HTML directly into the file

For assignments in this class, type HTML directly into the file. Don't use an editor that automatically adds HTML tags. By typing in HTML directly, you will become familiar with HTML tags and how they can be used. Later in the term you will write JavaScript code that generates HTML. That will be difficult to do well if you have not had experience making web pages from scratch.

Load your HTML files into a browser to test them

In this class we won't be posting HTML files on a web server. Instead, we will open the HTML files as local files using the browser's Open File... menu option (or a similar menu option). Keep in mind that, unlike compilers, web browsers often ignore mistakes. It's important to be careful about using closing tags and properly nesting HTML elements. Sometimes when you write sloppy HTML it looks fine at first because the browser fills in missing closing tags and ignores some errors. Later, when the document gets bigger and more complicated, it might not work right, and then it can be difficult to figure out what's going on. Writing clean HTML makes it easier to find and fix problems, much like using good indentation and formatting makes programs easier to work with.

Use CSS styles in your game description and your game grid

Use several different kinds of styles: font family, size, color, backgrounds, borders, margins, padding, etc. In the game grid, pay special attention to styles that relate to the properties of tables: dimensions, borders, backgrounds, and text styles.

Use an external style sheet

Use an external CSS style sheet and styles in your game description page and in your game grid page. External style sheets make it easier to share styles between pages. They also help to separate the content of a page from its appearance, which makes it easier to change the appearance without changing the content and vice versa.

Work on your game logic code throughout the term

As you complete assignments during the term you will write HTML, CSS, and JavaScript that you can use in your project web site. However, the assignments alone will not make a complete project.

For example, if your game is Battleship, then in the assignments you will complete several parts of the interface for the game, such as grid displays to use in the game. The JavaScript code that determines when a ship is sunk, or what the computer player's move will be, is game logic code that will part of the project but is not part of any assignment.

Since game logic code is not part of the assignments, but must be finished for the final project, it's important to work on it throughout the term.


Be sure that you use relative URLs for the values of href attributes of link tags and src attributes of image tags. If you use an absolute URL that refers to a file in a location on your computer, the browser will not load the HTTML file or image when I grade your assignment on my computer, and you won't get credit for the link or image.

Here are examples of relative and absolute URLs in link tags:
Relative: <a href="gameGrid.html">
Absolute: <a href="file:///C:/Users/Abigail/Documents/CS2550/A1/gameGrid.html">

The problem with the absolute URL is that it can be used only on a computer that has the exact path C://Users/Abigail/Documents/CS2550/A1/, which my computer (and most others) doesn't have. The relative URL will work fine on any computer, as long as the HTML file (gameGrid.html) is in the same directory as the web page that contains the link.

Turn in

Put both of your HTML files (game description and game grid), and all image and CSS files in a zip file. Turn in your zip file as described on the main Assignments page.

15 Game description page (index.html)
5 Image
5 External link
5 Separate window for external link
20 Sample game state for a game in progress, written in JSON and displayed on the game grid page
20 Game grid page with an HTML table for the grid
10 External style sheet
10 Styles in game description
10 Styles in game grid