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.
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.
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
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.
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.
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 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 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.
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.
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.Points
|15||Game description page (index.html)|
|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|