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!!
-
-
What have you managed so far? -
Code:<HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript> function swapImage() { switch (intImage) { IMG1.src = "puzzle1.gif" intImage = 2 return(false); IMG1.src = "puzzle2.gif" intImage = 1 return(false); IMG1.src = "puzzle3.gif" intImage = 3 return(false); IMG1.src = "puzzle4.gif" intImage = 4 return(false); IMG1.src = "puzzle5.gif" intImage = 5 return(false); IMG1.src = "puzzle5.gif" intImage = 6 return(false); } } </SCRIPT> </HEAD> <BODY> onclick="swapImage();"> </BODY> </HTML>
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.Comment
-
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.Comment
-
could you provide an example code. I am really confused now.....
Originally posted by acoderComment
-
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.Comment
Comment