Project

Due: Friday, December 8, 2017

The term project will be to use HTML, CSS, and JavaScript to implement a web application. This page describes the project in terms of grid-based puzzles and games. If you would like to make a different kind of web application for your project, you will need to get approval from the instructor.

A point breakdown for the project is at the end of this page.

As part of your first assignment you should select a grid-based puzzle (e.g. Sudoku) or game (e.g., Battleship) that you will implement for your project. For simplicity I will use the term "game" to refer to games, puzzles, or even math problems or science questions. For each subsequent assignment you will improve the implementation of the game and add features. At the end of the term you will turn in the completed game. Keep in mind that although each assignment adds to the game, finishing all of the assignments is not enough to get a good grade on the project. The assignments focus mostly on the user interface, and you will also need to implement game logic that is not part of any assignment.

The main purpose of the assignments and project is to learn how to use HTML, CSS, and JavaScript to create web applications. You will learn how to generate HTML from JavaScript, work with user input in the form of mouse clicks and text input, dynamically change the style (CSS) of HTML elements, and load information from the server without reloading the entire HTML document (Ajax). Our projects will make use of HTML tables because there are many games that make use of grids of one kind or another, but we will use the same techniques that are used with other kinds of HTML elements and layouts.

There are many games from which you can choose, including classics like chess and checkers, and relatively new games like Sudoku. Here is a list of possibilities:

  • chess
  • checkers
  • crossword puzzles
  • word search
  • Battleship
  • Minesweeper
  • Sudoku
  • Concentration (matching game)
  • Othello/Reversi
  • adventure/dungeon game map
  • sliding tile puzzle
  • Black Box

Two other possibilities for projects that are not games are an event calendar and an expense tracker. Like the games listed above, these applications make use of a grid and therefore work well with the assignment specifications, which are written in terms of grids.

Since there are many possibilities for games, I have written the assignment specifications in general terms. It is very important that you do every assignment, even if it doesn't seem to fit your game very well. For the final version of your game you can leave out elements that don't fit, as long as you satisfy the project requirements listed at the end of this page.

I am asking you to choose a project early in the term, before you get a chance to see how JavaScript web applications work. If you decide later that your project is too ambitious, or you find something more interesting, you can change your project. Just send me email to get my approval of your new project.

Assignments will focus primarily on the interface. Over the course of the term you will need to write JavaScript code to implement the logic for your game. The JavaScript code for the game logic should be core JavaScript and not make use of client-side JavaScript functions or refer directly to web-page elements.

For the final project you will integrate code from the assignments with the game logic code to make a complete, functional game. Not every assignment will be relevant for every game, but you should do the assignments in such a way that they fit into the overall game as well as possible. If you are not sure how an assignment relates to your game, talk to me.

Game functionality

In order to earn full credit for the final project, you will need to implement a playable game that includes reasonable functionality. For the game to be playable, it must include some kind of a challenge, provide variety, must be reasonably easy to use (without lots of alerts), and must contain some element of fun. For projects that are not games (such as the event calendar or expense tracker), think in terms of usefulness rather than playability and fun. Ease of use is important for games and for other kinds of projects.

Here are some descriptions of game functionality that would be sufficient for full credit:

It's especially important to keep your project simple if you don't have previous experience with HTML and JavaScript, or if you don't have much experience with programming in general. If you want to do a game for which I have not described the game functionality, please talk to me about what you plan to do for your project and the game functionality.

Model and view

It's important to decide how you will store the information needed for your game. For example, in the game of Battleship, you need to store information about where ships are in the grid, the player's shots, the computer's shots, and so on. That kind of game data is called the model. In this class, we will be using JavaScript arrays and objects for the model. You will need to decide what kind of arrays and objects you need, and how many. The model for your project should not include any information about how the game will be displayed. That means that it shouldn't have any HTML, CSS, or image file names.

The views for your game will be various HTML elements. Any JavaScript code that works with HTML, CSS, or image file names will be part of the view. It's important to make the view independent of the model, so that the view can be changed without changing the model.

The Model View Controller (MVC) design pattern is very commonly used in software development. One of the advantages of using MVC is that the same model can be used with many different kinds of views. For example, you could start out with a very simple view that uses lines of text to show the locations of ships and shots in the grid. Later, you could make a view to show images instead of characters. You could use that view without making any changes to the model. You could incorporate animation, video, audio, and renderings of 3D models into the view also, and still not have to change the model. In this class we won't distinguish between the view and the controller.

Project checkpoints

One assignment will be a project checkpoint that is worth 25 points more than regular assignments. The additional 25 points will be for demonstrating some part of the game logic for your project.

HTML5

Choose one of the following features of HTML5 to use in your final project: audio tags, video tags, canvas (drawing graphics with JavaScript), or local storage. Audio and video should be controlled by your JavaScript code, not by the user.
NOTE: The local storage functionality from Assignment 5 does not satisfy this requirement. Along the same lines, simply storing a user or player name in local storage does not satisfy this requirement either. Your use of local storage should relate to your particular game. Make sure that make a way to save, display, and clear the information in local storage.

XML or JSON

Your project should load XML or JSON game data using XMLHttpRequest. You can use your work for Assignment 6 to satisfy this requirement, but the log-in functionality for Assignment 5 does not satisfy this requirement.

Notes

Extra Credit

If you include two different HTML5 components in your project, I will give you extra credit for the second component. See the Points breakdown at the bottom of this page for the number of points.

For purposes of extra credit, I consider audio and video to be the same. That means that if you use audio for one HTML5 component, the second one needs to be local storage or canvas (not video).

Turning in the final project

See the top of this page or the course schedule for the due date of the final project. Submit a zip file with your project files in it by uploading it in Canvas.

Score Summary

Here is the score summary for the project:
10 Documentation explaining how you implemented your game and how it satisfies the remainder of the requirements. The documentation should be in a file named documentation.html, with a link to the documentation file on the project description page.
20 Game grid that uses CSS and is generated by JavaScript
20 User input in the form of text, select options, and/or buttons
20 User input in the form of mouse clicks
20 Dynamic modification of HTML using innerHTML or DOM functions
20 Use of XMLHttpRequest to load JSON or XML game data that is displayed on the grid page
20 Incorporates HTML 5 audio tags, video tags, canvas, or local storage
120 Game logic code
20 Extra Credit Include a second HTML5 component. If your first HTML5 component is media (audio or video) then your second component can't be a media component.
250 TOTAL