CS 101   Web Site Construction,  Fall 2011,  Instructor:  Jeffrey Horn    ASSIGNMENT 7

Assignment 7  "The Eight-Puzzle with Javascript"
• Handed out:   Monday, November 21, 2011
• Due:     Tuesday, Dec. 6, 2011
• Goals: 
• Learn basic use of Javascript
• Details:
  • Create a 2D puzzle that requires the player to put a series of images into the correct 2D configuration.   For example:

    Unsolved	Solved

  • GAME PLAY:
    1. The user should be presented with the set of images to be re-arranged.  The images initially should be out of order.   (The initial order can be the same each time the game is played.  For extra points (see grading guidelines below) the order of the images should be randomized each time the game is played.)   The easiest arrangement to program would be to have rectangular (or square) images arranged in a rectangular (or square) grid, such as the 3 by 3 grid in the example above.,
    2. The user is able to move images around the grid by clicking images adjacent to the empty slot.   This should cause the clicked image to "slide" into the empty slot (by simply swapping the image with the empty slot).  
    3. Track and display the number of MOVES (image swaps) so far.
  • BACKGROUND:
    • The eight-puzzle and how to play it.
    • Chapter 14 of our text has almost everything you need to know, and of course I will cover every topic and skill needed in our lectures and labs in class.  You can also find all the information you need on the web by searching.  Finally, I will also be creating and posting some short videos:
      1. Cropping or cutting images into small pieces for your puzzle: 
         • Using Microsoft Office Picture Manager (my preference!), click here. (10 minutes)
         • Using Microsoft Paint, click here. (10 minutes)
      2. Introduction to Javascript
         • JS Intro I:  Alert boxes and how to put Javascript code into "on-click" attributes, click here.
         • JS Intro II:  Global variables (to keep score) and how to put Javascript code into <script> element, click here.
         • JS Intro III:  Output straight to webpage (no popups!) using <form> elements and "getElementById", click here.
  • WHAT TO TURN-IN
    • Get your game working and on the web.  This means uploading all of your files (images too!) and making sure it all works from a web browser.   Send me the URL in an email with "CS 101:  A7" in the SUBJECT LINE, and mail to jhorn@nmu.edu, as usual!
    • Grading guideline:

      • GRADE	Requirements
        D	A web page on the web with clear instructions for the game Images that actually change when clicked on. Images for which a unique ordering "makes sense".   See above video lectures on cropping or cutting images, above.
        C	All of the above , plus... The ability for the player to actually move images (by moving the empty slot) in the puzzle. Use of a table to organize the images (or rather the slots for the images). A way to notify the player of the number of clicks or swaps so far (e.g., an alert box).   See JS Intro I and II video lectures above.
        B	All of the above, plus.... The game actually works.  In other words, you can move images until the game is won. The "score" (e.g., number of clicks or swaps so far) is accurately maintained and posted to the player.  See JS Intro II video lecture above. The "score" is posted to the web page itself (i.e., NOT to a pop-up like an alert box or prompt box).  You can do this with a form element like a text box.   See JS Intro III video lecture above.
        A	All of the above, plus... Web page has a "solution" button that allows the player to see a small image of the completed puzzle.  They should also be able to turn this off!  For example, you could use  <input type="button" onclick="(some Javascript code)"> to bring up the solution image, and another button to hide it.
        A+	All of the above plus... One or more of the following advanced functions: A reset button that resets the game to the original state (in terms of "score" and the positions of images in the table). A "progress" field (e.g., text box) that displays how close the puzzle is to being solved (i.e., how many images are in their correct positions). A "scramble" button that randomizes the puzzle.  This is not easy to do, as you need more than random numbers; you need a random "permutation" (ordering) of the numbers 1...N, where N is the number of images.  Only for advanced students!

      • NOTE:  If your puzzle has more than 8 pieces, you can substitute THAT quality for any one of the functions in any of the lists above that have a number greater than "1"!