CSE 154: Web Programming, Autumn 2012

Homework 8 (Fifteen Puzzle) FAQ

Part A:

Q: I am stuck. Nothing works. Help me!

A: Try doing these things:

• W3C HTML/CSS validate your page first.
• Make sure Firebug doesn't say any red error message text at bottom-right. If you don't have Firebug, install Firebug and never web program ever again without Firebug. Ever.
• Put a JS alert at the top of your file and/or function and see if it shows up.
• Run your JS code through JSLint and fix all errors.
• Try the Firebug debugger and see if you can step through and find the bug.

Q: I can't get the background image to show up properly on the tiles.

A: Make sure you are setting the CSS background-image property on the tiles properly in your JS DOM code. Try alerting the exact string you're setting it to. Remember that it should be a string storing a pair of values with units after them, such as "100px 300px". Also remember that the offsets you need to shift the image behind each tile may be negative, such as "-100px -300px". Note that there isn't a comma in the string; it is two integers, each with "px" after, separated by a space. You may have to build said string using variables' values.

Q: I don't know how to structure my code. It is an ugly mess.

A: Most of your functions are probably event handlers, but you can add more functions to clean up your code. Create helper functions to do important things in your program, such as:

• move a given square to the location of the empty square
• determine whether a given square can move right now or not
• figuring out the row or column of a given square, based on its left/top style values

Try to make your code read more like English. "If I can move this square, move it to the location of the empty square." If your code doesn't have methods for those things, you need more procedural breakdown of the problem.

Q: How do I figure out which pieces are movable and make them 'light up' when the user hovers over them?

A: The squares that are neighbors of the empty square are the ones that should light up when hovered upon. If you are keeping track of the location of the empty square, you should be able to tell for any given other square, whether that square is next to the empty square. You could choose to apply a class attribute to such squares as a target for CSS styling.

Q: Is it okay if I make an empty div element to represent the empty square in my puzzle?

A: You shouldn't need to do this, and you can't modify the provided .html file. But you can use the JS DOM to add an empty div if you like, if it makes your code easier to write.

Part B:

Q: How do I shuffle?

A: A decent pseudo-code for shuffling is the following:

for (~500 times):
    figure out all the squares that neighbor the empty square.
    put them into an array or something.
    randomly choose an element of that array.
    swap the randomly chosen element with the empty square.

Q: How do I "simulate a click" on a square? I want to run my square onclick handler function, without having to actually click on the square.

A: You can't just tell JS to fire off a fake onclick event. But just turn your click response code into a helper function, and call that.

Q: My code pops up a message when the user solves the puzzle. But now when shuffling the board, it sometimes pops up that same message! The shuffle is "solving" the puzzle. How do I stop it from doing that?

A: You need to decouple the movement logic from the "check to see if the game is over" logic. Put them into separate functions.

Q: If I am making my board do the animation feature, do I need to also animate my shuffle? It goes really slow if I do.

A: No, your shuffle doesn't need to animate.