By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,411 Members | 1,022 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,411 IT Pros & Developers. It's quick & easy.

Javascript Puzzle Image Swap

P: 5
Hi All! I'm new to javascript and need a little help with a simple puzzle im trying to design. I have a 600x100 pixel picture that I have sliced into 6 100x100 rectangles making a table of of 6 columns and 1 row. I wanted to make a "swap puzzle" where the user clicks on one image then the other and they swap. At first load i want to have the puzzle in a scrambled order and then when they complete it I want to alert the user with how many clicks it took them to solve. So bascially Im having trouble with figuring out how to start out with a scrambled order and how to swap the images. Sorry if its a dumb question im very new to javascript and programming itself... Thanks!!
Nov 10 '08 #1
Share this Question
Share on Google+
5 Replies


acoder
Expert Mod 15k+
P: 16,027
What have you managed so far?
Nov 10 '08 #2

P: 5
Expand|Select|Wrap|Line Numbers
  1. <HTML>
  2. <HEAD>
  3. <SCRIPT LANGUAGE=JavaScript>
  4. function swapImage() {
  5. switch (intImage) {
  6.    IMG1.src = "puzzle1.gif"
  7.    intImage = 2
  8.    return(false);
  9.    IMG1.src = "puzzle2.gif"
  10.    intImage = 1
  11.    return(false);
  12.    IMG1.src = "puzzle3.gif"
  13.    intImage = 3
  14.    return(false);
  15.    IMG1.src = "puzzle4.gif"
  16.    intImage = 4
  17.    return(false);
  18.    IMG1.src = "puzzle5.gif"
  19.    intImage = 5
  20.    return(false);
  21.    IMG1.src = "puzzle5.gif"
  22.    intImage = 6
  23.    return(false);
  24.  }
  25. }
  26. </SCRIPT>
  27. </HEAD>
  28. <BODY>
  29.  onclick="swapImage();">
  30. </BODY>
  31. </HTML>
  32.  


This is all I have so far. I know its not correct I've just been trying to play around with the code adding and deleting things here and there to try to get it to work correctly. Sorry if this is a stupid question i'm just starting out with programming.
Nov 10 '08 #3

acoder
Expert Mod 15k+
P: 16,027
To scramble images, you'll need some randomisation. For that, use Math.random(). You need the six images in the HTML. You also need to access them using their IDs or document.images[]. You can swap images using the image src property. You'll also need to keep a count of the number of clicks in a variable.
Nov 10 '08 #4

P: 5
could you provide an example code. I am really confused now.....

To scramble images, you'll need some randomisation. For that, use Math.random(). You need the six images in the HTML. You also need to access them using their IDs or document.images[]. You can swap images using the image src property. You'll also need to keep a count of the number of clicks in a variable.
Nov 11 '08 #5

acoder
Expert Mod 15k+
P: 16,027
What I would suggest you do first of all is read a good introductory tutorial with examples. This is a good one to get you started.

If you look at my last post, there's a number of things that you need to do. The first thing (after putting the img tags in the HTML) is the randomisation.
Nov 11 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.