IT350 - Web and
Internet Programming
Lab 07 – Game Time!
Introduction
You’ve come a long way with
JavaScript, and last week we learned about how to truly make our pages come
alive by changing the content dynamically.
For our JavaScript finale, you’ll practice 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 into artificial intelligence, and its
properties are well studied.
Requirements
You must create a folder on you Web drive called
"Lab07" (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.
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. Here is how the game should operate:
- This
is a list of requirements – be sure to read the “Suggested Approach”
below!
- When
the page is first loaded, it should look like the following. The starter code already does this for
you:
- (4
points) 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.
- (5
points) 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.
- (5
points) When the user clicks on the “Shuffle” button, you should do three
things:
a.) Check that the “Number of steps to shuffle” is between 1 and 20. If not, warn the user and do nothing.
b.) Otherwise, set the background color for the whole table to the value
given in the “Background color” input box.
c.) 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 so 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). However, you are not
required to slowly animate the results of the shuffle like the demo
version of the puzzle does (see extra credit). Instead, you can just show the results
after making all the moves.
It’s not required, but a nice touch is insisting that the random move
doesn’t move the hole back to where it just came from. So 2 random moves never leaves the hole
where it started.
So after shuffling 2 more tiles and setting the background color to red
your page might look like this:
- You
must use JavaScript and Dynamic HTML to accomplish this.
- (2
points) You must make appropriate use of functions to break up your code.
- (1
point) As always, you should have appropriate comments. As a start, each function should have a
brief summary of its purpose.
- (1
point) Your default.htm page should have a link to your new game.html
Your web page must be constructed using Notepad or a similar
text-only editor. The use of programs such as Microsoft Word, Microsoft Frontpage, DreamWeaver,
ColdFusion, Mozilla Composer, etc. will be considered an honor offense.
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:
- Follow this step precisely: Download
the starter code by right-clicking on the link,
pick “Save As”, then choose “Web Page HTML
only”. Save it as game.html in your
new Lab07 directory. Using “View Source” and saving the results is not
recommended.
- 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.
- 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).
- 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.
- Once
that works, delete the test calls to loadImagesFromArray() and moveImage(1,1) from
the end of your HTML file.
- Add
the appropriate HTML to call loadImagesFromArray() when the user clicks on “Load Puzzle.”
- Add
the appropriate HTML to call moveImage() appropriately when the user clicks on one of the
images.
- 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.
- Write
appropriate code to make a bunch of random, legal moves when the
user clicks on “Shuffle.”
- Write
appropriate code so that the script also sets the table background
appropriately when the user clicks on “Shuffle.”
- Check
that you have good documentation and make appropriate use of functions.
- Check
that you have met all the Requirements given above.
Extra Credit
For a nominal amount of extra credit 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.
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.
Deliverables
- Your main web page should be
called "game.html" (without the quotes).
- You must meet all the
Requirements given above.
- All of your files should be
in a folder called "Lab07" (without the quotes) on the W drive. Your
instructor will assume that your web pages are viewable at http://intranet.cs.usna.edu/~mXXXXXX/Lab07/game.html
where XXXXXX is your alpha number. You may want to check that this URL is
viewable and that everything works correctly from a computer where
somebody else is logged in. If you've goofed and linked to a file on
your X drive, this will help you catch it!
- Turn in the following
hardcopy at the beginning of class on the due date, stapled together in
the following order (coversheet on top):
- A completed assignment
coversheet. Your comments will help
us improve the course.
- A printout of the source to your
Lab07/game.html file.
- If you use any
external script files, include a printout of those too.
Hints
·
You do not need to (and should not) reload
the page to make any of this work – use DHTML to make changes happen on the
fly.
·
You can set the “src”
attribute of an image to change what image it is displaying. However, trying to read this attribute is not
recommended because the results you get back will vary.
·
If your code doesn't work on Internet Explorer,
look to see if your script tag has an extra space before "text/javascript" like this:
<script type =" text/javascript" src =
"script.js">
If so, change it to like this:
<script type ="text/javascript" src =
"script.js">
This matters whether or not you use an external JavaScript file. This
space is inserted by Firefox when you do “View Source.”
·
If you want to use an external script file, we
suggest the following syntax (modified from the lecture). Otherwise, the browser may ignore later
<script> tag if you try to include JavaScript inline in your
document. Use this:
<script
type = "text/javascript" src="calc.js"
> </script>
Instead of using:
<script type = "text/javascript" src="calc.js" />