Developing User Interfaces
CMSC 498B
Spring 2005
Prof. Ben Bederson
Project #2
Due March 17, 2005

Purpose

The purpose of this program is to implement undo/redo using the Command design pattern, and use an independent model and view.

The Problem

You must create a game that lets users solve a puzzle of the type depicted in the photo below.  An image is broken up into N x N tiles. One of the tiles is missing, and the game starts with all tiles initially in a random order.  There is a single action a player can perform on this game.  Clicking on any tile shifts the tiles between the clicked tile and the empty space one cell towards the empty space.  In this way, the tile clicked on becomes empty.  If the player clicks on a tile which is not in the same row or column as the empty cell, then nothing happens.  In addition, if the player clicks on the empty cell, nothing happens.

There is one extra trick for this implementation which is that you must display two synchronized games with different images, where interacting with either one plays the game, but both games remain in sync.

The requirements of the project are:

• Use one PictureBox control per tile to display the game.
• Layout automatically based on the window size and number of tiles.
• Distribute two images for the game which get displayed by default.
• The default number of tiles should be 4 x 4.
• The game should start with the tiles distributed randomly (but since both games share a single model, they should have the same random distribution).
• Game play should be as described above.  Both games must have a shared model.  You should use the Model-View paradigm discussed in class to avoid duplication of code.
• There should be a menu structure as follows:
  • "File->Exit" should exit the game
  • "Edit->Undo" should undo the previous move.  There must be support for infinite undo.
  • "Edit->Redo" should redo the previous undone move if one.  This should be disabled if there was no previous undo.
  • "Play->Set Grid Size ..." should bring up a dialog that lets users sets the (square) grid size - where N varies between [2, 10].  As soon as this is specified, the game should be re-initialized with the new tile size (i.e., randomly laid out).
  • "Play->Load Images ..." should bring up a dialog that lets users specify two URLs of images.  When these are specified, the images should immediately be loaded into the existing game.  I.e., the display should be changed, but the model should not.
  • "Help->About" should bring up a dialog that briefly describes the game and says who you are.

C# Hints

• To fetch an image given a URL, you can use the following method:

    using System.Net;
    using System.IO;
    public Image FetchImage(string url) {
        HttpWebRequest webRequest = (HttpWebRequest)WebRequest.Create(url);
        WebResponse webResponse = webRequest.GetResponse();
        Stream stream = webResponse.GetResponseStream();
        return Bitmap.FromStream(stream);
    }

• To pull out a piece of an image in order to break it up into N x N sub-images, you can use the following method:

public Image CropImage(Image inImage, int x, int y, int width, int height) {
    Image outImage = new Bitmap(inImage, width, height);
    Graphics g = Graphics.FromImage(outImage);
    g.Clear(Color.Black);
    g.DrawImage(inImage, new Rectangle(0, 0, width, height),
                new Rectangle(x, y, width, height), GraphicsUnit.Pixel);
    g.Dispose();

    return outImage;
}
 

Submitting

Submit following the same rules as Project #1, but make the subject line of your email contain "DUI: Proj #2 submission".  As before, any submissions after the deadline will be ignored.  If multiple submissions are made, then only the last one before the deadline will be looked at.

The zip file you submit must contain all files within a directory named "proj2-<name>.zip" where you replace <name> with your last name.