Lab 9: Game Time!

You've been introduced to JavaScript, and this week we learned how to truly make our pages come alive by changing the content dynamically. This lab kicks it up a notch. You will now try out your knowledge by creating a web page to play the '8-puzzle'.

The 8-puzzle consists of a 3x3 grid with 8 tiles. The one missing tile enables other tiles to move around. After shuffling the puzzle, the goal is to reconstruct the original picture or configuration. This game has been very often used for research in artificial intelligence, and its properties are well studied.

Read this lab completely before you begin.

Part 0 - Setting up (5%)

  1. Directory: You must create a folder on your web drive called "Lab09" (without the quotes) and store your work in that directory.This lab does NOT draw on the previous labs, so there is no need to copy your old web pages into this directory.
  2. This week you will make a single web page, game.html, that plays the 8-puzzle. We are giving you some starter code, which you must improve upon. Below is the list of requirements. Be sure to read the 'Suggested Approach' below too! Here is how the game should operate:

Part 1 - Game (95%)

  1. When the page is first loaded, it should look like the following. The starter code already does this for you:
  2. When the user clicks 'Load Puzzle', it should replace the monkeys with appropriate images to fill in the picture as shown below. You must copy the appropriate image filenames from the 'TileArray' that is given in the starter code. Once the game starts, your 'Load Puzzle' button is not required to do anything, though resetting the game would be a nice touch.
  3. When the user clicks on a tile, you should shift that tile into the 'hole' in the puzzle, if the hole is directly adjacent to that tile (not diagonally). If the tile is not adjacent, you should popup an error message. You must keep track of the new tile layout in the given 'TileArray'. Don't just change the images. For instance, here is the result after clicking on the middle tile in the last row.
  4. When the user clicks on the 'Shuffle' button, you should do three things:

    1. Check that the 'Number of steps to shuffle' is between 1 and 20. If not, warn the user (alert) and do nothing.
    2. Otherwise, set the background color for the background container (the "wrapper" div) to the value given in the 'Background color' input box.
    3. Shuffle the tiles, based on the number given in the 'Number of steps to shuffle' input box. So if that number is 5, you would do the following 5 times: randomly pick a tile that is able to move, and move it into the 'hole' spot. You must make only legal moves, always moving some tile that is adjacent to the hole, but randomly choosing among those eligible. (If you just randomly shuffle pieces around, there is a 50% chance that you end up with a puzzle that can't be solved).

      You are not required to slowly animate the shuffle like the in-class demo version of the puzzle does (see challenge problem). Instead, you can just show the results after making all the moves.
      After shuffling 2 more tiles and setting the background color to red your page might look like this:

Challenge Problem - Just a bit more (100% or more)

Do some/all of the following (NOTE: saving a backup copy of your working lab is recommended before starting on this):

  1. Make your shuffle operation move slowly, showing the results briefly after each move, like the demo version that was shown in the lab.
    HINT: see documentation for setTimeout() function.
  2. Make your shuffle operation move very smoothly from one location to another (not jumping from (1,1) directly to (1.2).
    HINT: you'll need to ditch the table and just use absolute CSS positioning to make this work.
  3. Make your program work with more than one 'hole' (e.g. two missing tiles). Create some natural user interface for this to deal with the ambiguity that arises when the user clicks on a tile that could move into either of the holes.
  4. Super bonus points: make your program work on any image, given just a single JPG file for that image. Suggestion: use multiple copies of your image on the page, CSS relative positioning, and layers.

General Requirements and Deliverables

  1. You must use JavaScript and Dynamic HTML to accomplish this.
  2. Your file for this lab must be named game.html
  3. Functions: You must make appropriate use of functions to break up your code.
  4. Documentation: As always, you should have appropriate comments. As a start, each function should have a brief summary of its purpose.
  5. Links: Create one link in your top-level IT350.html page under the heading 'Lab09' that links to the game.html page.
  6. Put a README.txt file in the lab directory. This file should have:
    • *Lab number
    • *Your name and alpha
    • *Collaborations in completing this lab (people, online sources used outside the course website)
    • *How far you got (through which part did you finish)? If you tried any additional parts beyond the one you completed, what did you do?
    • *How long this lab took you
    • Any suggestions to improve the lab
    • Any comments needed for the instructor to review the lab (usernames, passwords, etc.)
  7. All of your files should be in a folder called Lab09 in your public_html/IT350 folder. Your instructor will assume that your web page is viewable at http://midn.cs.usna.edu/~mXXXXXX/IT350/Lab09/game.html where XXXXXX is your alpha number.
  8. All labs must be complete and saved to the midn.cs.usna.edu drive before you submit your assignment. Do NOT modify your web files after you have submitted your assignment (unless you resubmit, which you can do as often as you like up until the deadline.)
  9. Submit all files to the online submissions system (submit.moboard.com) on or before the due date, this is Lab09. Use the command line submit script and capture the entire contents of the directory. The easiest way to do this would be to cut and paste the following while logged onto the server:

    
                            cd ~/public_html/IT350
                            ~/bin/submit -c=IT350 -p=Lab09 Lab09
    This assumes that the submit script is located in ~/bin/ and is executable.

Suggested Approach

You can create your puzzle to meet the above requirements in any way you like, provided of course you write your own code and follow all course policies.

However, you may find this lab more challenging. Unless you feel very confident, we suggest that you approach this lab by following this sequence of steps:

  1. Download this starter code by right-clicking and "Save as". Save it as game.html in your new Lab09 directory.
  2. Before you proceed, make sure you understand how everything works in the starter code. Look carefully at the given testFunction() to see how to use 2-dimensional arrays.
  3. Write a function loadImagesFromArray() to copy the image filenames from TileArray to the images in the table (replacing the monkey images). As a test, add a call to loadImagesFromArray() at the very end of the file (where testFunction() was called). When this works, leave the test call to loadImagesFromArray() in place for now.
    (You should not copy the image files to your own directory. Just leave them on the usna.edu server).
  4. Write a function moveImage(row, col) that moves the tile in location (row, col) to the current location of the hole (this implies you'll need to keep track of where the hole is). Perform the move first in the TileArray, then call loadImagesFromArray() to copy the result to the images. Test this by adding a call to moveImage(1,1) to the end of your HTML file.
  5. Once that works, delete the test calls to loadImagesFromArray() and moveImage(1,1) from the end of your HTML file.
  6. Add the appropriate HTML to call loadImagesFromArray() when the user clicks on 'Load Puzzle.'
  7. Add the appropriate HTML to call moveImage() appropriately when the user clicks on one of the images.
  8. Modify moveImage() so that it checks appropriately for an illegal move (if the user clicks on a tile that can't move). Think carefully on paper how to compute this mathematically. If you do it right this should be a small function.
  9. Write appropriate code to make a bunch of random, legal moves when the user clicks on 'Shuffle.'
  10. Write appropriate code so that the script also sets the table background appropriately when the user clicks on 'Shuffle.'
  11. Check that you have good documentation and make appropriate use of functions.
  12. Check that you have met all the Requirements given above.