Flickr Puzzle Mashup - Client-Side JavaScript
(Page 5 of 6 )
JavaScript is used on the client side to enable the user to move the puzzle pieces. Here I chose to make use of Yahoo's User Interface Library available from developer.yahoo.com, but you can use which ever library you may feel more comfortable with or even roll your own. All that's needed here is to include the necessary dependency files and then pass each image's id to new dragable objects.
<script type="text/javascript" src="yui/yahoo.js"></script>
<script type="text/javascript" src="yui/dom.js"></script>
<script type="text/javascript" src="yui/event.js"></script>
<script type="text/javascript" src="yui/dragdrop.js"></script>
<script type="text/javascript">
window.onload = function() {
<?php for ($x = 0; $x < $numPieces; $x++) { ?>
new YAHOO.util.DD("piece<?php echo $x; ?>");
<?php } ?>
} |
As the page loads, users will see the puzzle pieces in order. They can move the pieces about themselves and then put the puzzle back together again, but it would be better to offer them an automatic way to scramble the puzzle.
window.onload = function() {
...
document.getElementById("randomizeBtn").click = randomize;
}
function randomize() {
<?php for ($x = 0; $x < $numPieces; $x++) { ?>
YAHOO.util.Dom.setX("piece<?php echo $x; ?>", Math.floor(
Math.random() * YAHOO.util.Dom.getViewportWidth()));
YAHOO.util.Dom.setY("piece<?php echo $x; ?>", Math.floor(
Math.random() * YAHOO.util.Dom.getViewportHeight()));
<?php } ?>
}
<input type="button" value="Randomize" id="randomizeBtn" /> |
Next: Conclusion >>
More Miscellaneous Articles
More By bluephoenix
