here is one that I found... and I thought I could make my own images to do this....
I want to have one blank image... and nine number images....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
2 <HEAD><TITLE>Dickinson College - Logo Scramble Game</TITLE>
3 <SCRIPT LANGUAGE="JavaScript">
4
5 function Initialize() {
6 var blank;
7 blankpic = new Image();
8 blankpic.src = "0.gif"; // pre-cache the blank image
9 pics = new Array(9); // load images into array
10 for (var img=0; img < 9; img++) {
11 pics = new Image();
12 pics[img].src = document.images[img].src;
13 }
14 adjoin = new Array(9); // show which images are next to each other
15 adjoin[0]="13";
16 adjoin[1]="024";
17 adjoin[2]="15";
18 adjoin[3]="046";
19 adjoin[4]="1357";
20 adjoin[5]="248";
21 adjoin[6]="37";
22 adjoin[7]="468";
23 adjoin[8]="57";
24 } // end function Initialize
25
26 function StartGame() {
27 gamenotstarted = false;
28 for (var img=1; img < 9; img++) {document.images[img].src = pics[img].src}
29 document.images[0].src = blankpic.src;
30 blank = 0;
31 for (var sloop=0; sloop < 100; sloop++) {
32 index = Math.floor(Math.random() * adjoin[blank].length);
33 movepic = adjoin[blank].charAt(index);
34 document.images[blank].src = document.images[movepic].src;
35 document.images[movepic].src = blankpic.src;
36 blank = movepic;
37 }
38 tries = 0;
39 document.game.numtry.value = "";
40 document.game.message.value = "Good luck!";
41 } // end function StartGame
42
43 function MoveCard(imgnum) {
44 if (gamenotstarted) {StartGame()}
45 else {
46 if (tries == 8) {document.game.message.value = "Harder than it looks?"}
47 if (tries == 16) {document.game.message.value = "Keep trying, you can do it!"}
48 if (tries == 24) {document.game.message.value = "Maybe you should start over?"}
49 if (adjoin[blank].indexOf(imgnum) > -1) {
50 tries++;
51 document.game.numtry.value = tries;
52 document.images[blank].src = document.images[imgnum].src;
53 document.images[imgnum].src = "0.gif";
54 blank = imgnum;
55 }
56 else {window.alert("You must select a piece that is next to the blank piece.")}
57 complete = true;
58 for (var img=1; img < 9; img++) { // see if the pieces are in the right place
59 if (document.images[img].src != pics[img].src) {complete = false}
60 }
61 if (complete) {
62 gamenotstarted = true;
63 document.images[0].src = pics[0].src;
64 document.game.message.value = "Congratulations! You did it!";
65 }
66 }
67 } // end function MoveCard
68
69 </SCRIPT>
70 </HEAD>
71 <BODY BGCOLOR="#CCCCFF">
72 <CENTER>
73 <FORM NAME="game"><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
74 <TR ALIGN="center" VALIGN="middle"><TD COLSPAN="3"><INPUT TYPE="text" NAME="message" VALUE=http://www.webdeveloper.com/forum/archive/index.php/" SIZE="30">
Tries: <INPUT TYPE="text" NAME="numtry" VALUE=" SIZE="3"> <INPUT TYPE="button" VALUE="New Game" onClick="StartGame()"></TD></TR>
75 <TR ALIGN="center" VALIGN="middle">
76 <TD><A HREF="javascript:MoveCard(0)"><IMG BORDER=0 SRC="file:///C|/Documents%20and%20Settings/Owner/Desktop/JavaScript%20Class/1.gif" WIDTH=150 HEIGHT=150 ALT="></A></TD>
77 <TD><A HREF="javascript:MoveCard(1)"><IMG BORDER=0 SRC="file:///C|/Documents%20and%20Settings/Owner/Desktop/JavaScript%20Class/2.gif" ALT=" WIDTH=150 HEIGHT=150></A></TD>
78 <TD><A HREF="javascript:MoveCard(2)"><IMG BORDER=0 SRC="file:///C|/Documents%20and%20Settings/Owner/Desktop/JavaScript%20Class/3.gif" WIDTH=150 HEIGHT=150 ALT="></A></TD>
79 </TR>
80 <TR ALIGN="center" VALIGN="middle">
81 <TD><A HREF="javascript:MoveCard(3)"><IMG BORDER=0 SRC="file:///C|/Documents%20and%20Settings/Owner/Desktop/JavaScript%20Class/4.gif" WIDTH=150 HEIGHT=150 ALT="></A></TD>
82 <TD><A HREF="javascript:MoveCard(4)"><IMG BORDER=0 SRC="file:///C|/Documents%20and%20Settings/Owner/Desktop/JavaScript%20Class/5.gif" ALT=" WIDTH=150 HEIGHT=150></A></TD>
83 <TD><A HREF="javascript:MoveCard(5)"><IMG BORDER=0 SRC="file:///C|/Documents%20and%20Settings/Owner/Desktop/JavaScript%20Class/6.gif" WIDTH=150 HEIGHT=150 ALT="></A></TD>
84 </TR>
85 <TR ALIGN="center" VALIGN="middle">
86 <TD><A HREF="javascript:MoveCard(6)"><IMG BORDER=0 SRC="file:///C|/Documents%20and%20Settings/Owner/Desktop/JavaScript%20Class/7.gif" WIDTH=150 HEIGHT=150 ALT="></A></TD>
87 <TD><A HREF="javascript:MoveCard(7)"><IMG BORDER=0 SRC="file:///C|/Documents%20and%20Settings/Owner/Desktop/JavaScript%20Class/8.gif" ALT=" WIDTH=150 HEIGHT=150></A></TD>
88 <TD><A HREF="javascript:MoveCard(8)"><IMG BORDER=0 SRC="file:///C|/Documents%20and%20Settings/Owner/Desktop/JavaScript%20Class/9.gif" WIDTH=150 HEIGHT=150 ALT="></A></TD>
89 </TR></TABLE></CENTER>
90 <SCRIPT LANGUAGE="JavaScript">
91 gamenotstarted = true;
92 Initialize();
93 </SCRIPT></FORM>
94 </BODY>
95 </HTML>
I want to have one blank image... and nine number images....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
2 <HEAD><TITLE>Dickinson College - Logo Scramble Game</TITLE>
3 <SCRIPT LANGUAGE="JavaScript">
4
5 function Initialize() {
6 var blank;
7 blankpic = new Image();
8 blankpic.src = "0.gif"; // pre-cache the blank image
9 pics = new Array(9); // load images into array
10 for (var img=0; img < 9; img++) {
11 pics = new Image();
12 pics[img].src = document.images[img].src;
13 }
14 adjoin = new Array(9); // show which images are next to each other
15 adjoin[0]="13";
16 adjoin[1]="024";
17 adjoin[2]="15";
18 adjoin[3]="046";
19 adjoin[4]="1357";
20 adjoin[5]="248";
21 adjoin[6]="37";
22 adjoin[7]="468";
23 adjoin[8]="57";
24 } // end function Initialize
25
26 function StartGame() {
27 gamenotstarted = false;
28 for (var img=1; img < 9; img++) {document.images[img].src = pics[img].src}
29 document.images[0].src = blankpic.src;
30 blank = 0;
31 for (var sloop=0; sloop < 100; sloop++) {
32 index = Math.floor(Math.random() * adjoin[blank].length);
33 movepic = adjoin[blank].charAt(index);
34 document.images[blank].src = document.images[movepic].src;
35 document.images[movepic].src = blankpic.src;
36 blank = movepic;
37 }
38 tries = 0;
39 document.game.numtry.value = "";
40 document.game.message.value = "Good luck!";
41 } // end function StartGame
42
43 function MoveCard(imgnum) {
44 if (gamenotstarted) {StartGame()}
45 else {
46 if (tries == 8) {document.game.message.value = "Harder than it looks?"}
47 if (tries == 16) {document.game.message.value = "Keep trying, you can do it!"}
48 if (tries == 24) {document.game.message.value = "Maybe you should start over?"}
49 if (adjoin[blank].indexOf(imgnum) > -1) {
50 tries++;
51 document.game.numtry.value = tries;
52 document.images[blank].src = document.images[imgnum].src;
53 document.images[imgnum].src = "0.gif";
54 blank = imgnum;
55 }
56 else {window.alert("You must select a piece that is next to the blank piece.")}
57 complete = true;
58 for (var img=1; img < 9; img++) { // see if the pieces are in the right place
59 if (document.images[img].src != pics[img].src) {complete = false}
60 }
61 if (complete) {
62 gamenotstarted = true;
63 document.images[0].src = pics[0].src;
64 document.game.message.value = "Congratulations! You did it!";
65 }
66 }
67 } // end function MoveCard
68
69 </SCRIPT>
70 </HEAD>
71 <BODY BGCOLOR="#CCCCFF">
72 <CENTER>
73 <FORM NAME="game"><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
74 <TR ALIGN="center" VALIGN="middle"><TD COLSPAN="3"><INPUT TYPE="text" NAME="message" VALUE=http://www.webdeveloper.com/forum/archive/index.php/" SIZE="30">
Tries: <INPUT TYPE="text" NAME="numtry" VALUE=" SIZE="3"> <INPUT TYPE="button" VALUE="New Game" onClick="StartGame()"></TD></TR>
75 <TR ALIGN="center" VALIGN="middle">
76 <TD><A HREF="javascript:MoveCard(0)"><IMG BORDER=0 SRC="file:///C|/Documents%20and%20Settings/Owner/Desktop/JavaScript%20Class/1.gif" WIDTH=150 HEIGHT=150 ALT="></A></TD>
77 <TD><A HREF="javascript:MoveCard(1)"><IMG BORDER=0 SRC="file:///C|/Documents%20and%20Settings/Owner/Desktop/JavaScript%20Class/2.gif" ALT=" WIDTH=150 HEIGHT=150></A></TD>
78 <TD><A HREF="javascript:MoveCard(2)"><IMG BORDER=0 SRC="file:///C|/Documents%20and%20Settings/Owner/Desktop/JavaScript%20Class/3.gif" WIDTH=150 HEIGHT=150 ALT="></A></TD>
79 </TR>
80 <TR ALIGN="center" VALIGN="middle">
81 <TD><A HREF="javascript:MoveCard(3)"><IMG BORDER=0 SRC="file:///C|/Documents%20and%20Settings/Owner/Desktop/JavaScript%20Class/4.gif" WIDTH=150 HEIGHT=150 ALT="></A></TD>
82 <TD><A HREF="javascript:MoveCard(4)"><IMG BORDER=0 SRC="file:///C|/Documents%20and%20Settings/Owner/Desktop/JavaScript%20Class/5.gif" ALT=" WIDTH=150 HEIGHT=150></A></TD>
83 <TD><A HREF="javascript:MoveCard(5)"><IMG BORDER=0 SRC="file:///C|/Documents%20and%20Settings/Owner/Desktop/JavaScript%20Class/6.gif" WIDTH=150 HEIGHT=150 ALT="></A></TD>
84 </TR>
85 <TR ALIGN="center" VALIGN="middle">
86 <TD><A HREF="javascript:MoveCard(6)"><IMG BORDER=0 SRC="file:///C|/Documents%20and%20Settings/Owner/Desktop/JavaScript%20Class/7.gif" WIDTH=150 HEIGHT=150 ALT="></A></TD>
87 <TD><A HREF="javascript:MoveCard(7)"><IMG BORDER=0 SRC="file:///C|/Documents%20and%20Settings/Owner/Desktop/JavaScript%20Class/8.gif" ALT=" WIDTH=150 HEIGHT=150></A></TD>
88 <TD><A HREF="javascript:MoveCard(8)"><IMG BORDER=0 SRC="file:///C|/Documents%20and%20Settings/Owner/Desktop/JavaScript%20Class/9.gif" WIDTH=150 HEIGHT=150 ALT="></A></TD>
89 </TR></TABLE></CENTER>
90 <SCRIPT LANGUAGE="JavaScript">
91 gamenotstarted = true;
92 Initialize();
93 </SCRIPT></FORM>
94 </BODY>
95 </HTML>