PDA

Click to See Complete Forum and Search --> : number scramble game

2 peachy
02-28-2003, 11:00 PM
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[img] = 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=" 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>
AdamBrill
02-28-2003, 11:14 PM
Try this instead:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD><TITLE>Dickinson College - Logo Scramble Game</TITLE>
<SCRIPT LANGUAGE="JavaScript">

function Initialize() {
var blank;
blankpic = new Image();
blankpic.src = "0.gif"; // pre-cache the blank image
pics = new Array(9); // load images into array
for (var img=0; img < 9; img++) {
pics[img] = new Image();
pics[img].src = document.images[img].src;
}
adjoin = new Array(9); // show which images are next to each other
adjoin[0]="13";
adjoin[1]="024";
adjoin[2]="15";
adjoin[3]="046";
adjoin[4]="1357";
adjoin[5]="248";
adjoin[6]="37";
adjoin[7]="468";
adjoin[8]="57";
} // end function Initialize

function StartGame() {
gamenotstarted = false;
for (var img=1; img < 9; img++) {document.images[img].src = pics[img].src}
document.images[0].src = blankpic.src;
blank = 0;
for (var sloop=0; sloop < 100; sloop++) {
index = Math.floor(Math.random() * adjoin[blank].length);
movepic = adjoin[blank].charAt(index);
document.images[blank].src = document.images[movepic].src;
document.images[movepic].src = blankpic.src;
blank = movepic;
}
tries = 0;
document.game.numtry.value = "";
document.game.message.value = "Good luck!";
} // end function StartGame

function MoveCard(imgnum) {
if (gamenotstarted) {StartGame()}
else {
if (tries == 8) {document.game.message.value = "Harder than it looks?"}
if (tries == 16) {document.game.message.value = "Keep trying, you can do it!"}
if (tries == 24) {document.game.message.value = "Maybe you should start over?"}
if (adjoin[blank].indexOf(imgnum) > -1) {
tries++;
document.game.numtry.value = tries;
document.images[blank].src = document.images[imgnum].src;
document.images[imgnum].src = "0.gif";
blank = imgnum;
}
else {window.alert("You must select a piece that is next to the blank piece.")}
complete = true;
for (var img=1; img < 9; img++) { // see if the pieces are in the right place
if (document.images[img].src != pics[img].src) {complete = false}
}
if (complete) {
gamenotstarted = true;
document.images[0].src = pics[0].src;
document.game.message.value = "Congratulations! You did it!";
}
}
} // end function MoveCard

</SCRIPT>
</HEAD>
<BODY BGCOLOR="#CCCCFF">
<CENTER>
<FORM NAME="game">

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR ALIGN="center" VALIGN="middle"><TD COLSPAN="3"><INPUT TYPE="text" NAME="message" VALUE="" SIZE="30">
Tries: <INPUT TYPE="text" NAME="numtry" VALUE="" SIZE="3"> <INPUT TYPE="button" VALUE="New Game" onClick="StartGame()"></TD></TR>
<TR ALIGN="center" VALIGN="middle">
<TD><A HREF="javascript:MoveCard(0)"><IMG BORDER=0 SRC="01.gif" WIDTH=150 HEIGHT=150 ALT=""></A></TD>
<TD><A HREF="javascript:MoveCard(1)"><IMG BORDER=0 SRC="02.gif" ALT="" WIDTH=150 HEIGHT=150></A></TD>
<TD><A HREF="javascript:MoveCard(2)"><IMG BORDER=0 SRC="03.gif" WIDTH=150 HEIGHT=150 ALT=""></A></TD>
</TR>
<TR ALIGN="center" VALIGN="middle">
<TD><A HREF="javascript:MoveCard(3)"><IMG BORDER=0 SRC="04.gif" WIDTH=150 HEIGHT=150 ALT=""></A></TD>
<TD><A HREF="javascript:MoveCard(4)"><IMG BORDER=0 SRC="05.gif" ALT="" WIDTH=150 HEIGHT=150></A></TD>
<TD><A HREF="javascript:MoveCard(5)"><IMG BORDER=0 SRC="06.gif" WIDTH=150 HEIGHT=150 ALT=""></A></TD>
</TR>
<TR ALIGN="center" VALIGN="middle">
<TD><A HREF="javascript:MoveCard(6)"><IMG BORDER=0 SRC="07.gif" WIDTH=150 HEIGHT=150 ALT=""></A></TD>
<TD><A HREF="javascript:MoveCard(7)"><IMG BORDER=0 SRC="08.gif" ALT="" WIDTH=150 HEIGHT=150></A></TD>
<TD><A HREF="javascript:MoveCard(8)"><IMG BORDER=0 SRC="09.gif" WIDTH=150 HEIGHT=150 ALT=""></A></TD>
</TR></TABLE></CENTER>
<SCRIPT LANGUAGE="JavaScript">
gamenotstarted = true;
Initialize();
</SCRIPT></FORM>
</BODY>
</HTML>

Just change the image src to point to your pictures and it should work. You also have to delete the spaces in javascript. Instead of <a href="java script... change it to <a href="javascript Let me know if you have any problems...
2 peachy
02-28-2003, 11:36 PM
I copied and pasted your script, changing only the images to
1.gif
2.gif
etc...
the images show up, but the game doesnt work.
you can not click and drag the numbers
AdamBrill
03-01-2003, 11:05 AM
Did you remember to remove the spaces in javascript? Beside that it should have worked. You aren't supposed to drag the images, though. Just click one of them that are next to the open spot and it should move it over. Let me know if it works.
2 peachy
03-01-2003, 12:35 PM
here is what I did... everything shows up...when you press new game, it shows good luck and mixes everything up...
but you can not move the numbers.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD><TITLE>Dickinson College - Logo Scramble Game</TITLE>
<SCRIPT LANGUAGE="JavaScript">

function Initialize() {
var blank;
blankpic = new Image();
blankpic.src = "0.gif"; // pre-cache the blank image
pics = new Array(9); // load images into array
for (var img=0; img < 9; img++) {
pics[img] = new Image();
pics[img].src = document.images[img].src;
}
adjoin = new Array(9); // show which images are next to each other
adjoin[0]="13";
adjoin[1]="024";
adjoin[2]="15";
adjoin[3]="046";
adjoin[4]="1357";
adjoin[5]="248";
adjoin[6]="37";
adjoin[7]="468";
adjoin[8]="57";
} // end function Initialize

function StartGame() {
gamenotstarted = false;
for (var img=1; img < 9; img++) {document.images[img].src = pics[img].src}
document.images[0].src = blankpic.src;
blank = 0;
for (var sloop=0; sloop < 100; sloop++) {
index = Math.floor(Math.random() * adjoin[blank].length);
movepic = adjoin[blank].charAt(index);
document.images[blank].src = document.images[movepic].src;
document.images[movepic].src = blankpic.src;
blank = movepic;
}
tries = 0;
document.game.numtry.value = "";
document.game.message.value = "Good luck!";
} // end function StartGame

function MoveCard(imgnum) {
if (gamenotstarted) {StartGame()}
else {
if (tries == 8) {document.game.message.value = "Harder than it looks?"}
if (tries == 16) {document.game.message.value = "Keep trying, you can do it!"}
if (tries == 24) {document.game.message.value = "Maybe you should start over?"}
if (adjoin[blank].indexOf(imgnum) > -1) {
tries++;
document.game.numtry.value = tries;
document.images[blank].src = document.images[imgnum].src;
document.images[imgnum].src = "0.gif";
blank = imgnum;
}
else {window.alert("You must select a piece that is next to the blank piece.")}
complete = true;
for (var img=1; img < 9; img++) { // see if the pieces are in the right place
if (document.images[img].src != pics[img].src) {complete = false}
}
if (complete) {
gamenotstarted = true;
document.images[0].src = pics[0].src;
document.game.message.value = "Congratulations! You did it!";
}
}
} // end function MoveCard

</SCRIPT>
</HEAD>
<BODY BGCOLOR="#CCCCFF">
<CENTER>
<FORM NAME="game">

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR ALIGN="center" VALIGN="middle"><TD COLSPAN="3"><INPUT TYPE="text" NAME="message" VALUE="" SIZE="30">
Tries: <INPUT TYPE="text" NAME="numtry" VALUE="" SIZE="3"> <INPUT TYPE="button" VALUE="New Game" onClick="StartGame()"></TD></TR>
<TR ALIGN="center" VALIGN="middle">
<TD><A HREF="javascript:MoveCard(0)"><IMG BORDER=0 SRC="1.gif" WIDTH=150 HEIGHT=150 ALT=""></A></TD>
<TD><A HREF="java script:MoveCard(1)"><IMG BORDER=0 SRC="2.gif" ALT="" WIDTH=150 HEIGHT=150></A></TD>
<TD><A HREF="java script:MoveCard(2)"><IMG BORDER=0 SRC="3.gif" WIDTH=150 HEIGHT=150 ALT=""></A></TD>
</TR>
<TR ALIGN="center" VALIGN="middle">
<TD><A HREF="javascript:MoveCard(3)"><IMG BORDER=0 SRC="4.gif" WIDTH=150 HEIGHT=150 ALT=""></A></TD>
<TD><A HREF="java script:MoveCard(4)"><IMG BORDER=0 SRC="5.gif" ALT="" WIDTH=150 HEIGHT=150></A></TD>
<TD><A HREF="java script:MoveCard(5)"><IMG BORDER=0 SRC="6.gif" WIDTH=150 HEIGHT=150 ALT=""></A></TD>
</TR>
<TR ALIGN="center" VALIGN="middle">
<TD><A HREF="javascript:MoveCard(6)"><IMG BORDER=0 SRC="7.gif" WIDTH=150 HEIGHT=150 ALT=""></A></TD>
<TD><A HREF="javascript:MoveCard(7)"><IMG BORDER=0 SRC="8.gif" ALT="" WIDTH=150 HEIGHT=150></A></TD>
<TD><A HREF="javascript:MoveCard(8)"><IMG BORDER=0 SRC="9.gif" WIDTH=150 HEIGHT=150 ALT=""></A></TD>
</TR></TABLE></CENTER>
<SCRIPT LANGUAGE="JavaScript">
gamenotstarted = true;
Initialize();
</SCRIPT></FORM>
</BODY>
</HTML>
AdamBrill
03-01-2003, 01:02 PM
hmm... The code that you posted worked fine for me. Did you delete the spaces in javascript? That's the only thing that I had to do. You have to do it in all nine of the link lines. Let me know if it still doesn't work and I'll attach a .zip of a working version.
2 peachy
03-01-2003, 01:07 PM
I took the spaces out in the nine links and it still will not work for me.
2 peachy
03-01-2003, 04:51 PM
ok... it is working, but... once you get the number in the place that the original picture was in, and you click on it... you get page not found.
I think it has something to do with this part of the code.'

adjoin = new Array(9); // show which images are next to each other
adjoin[0]="13";
adjoin[1]="024";
adjoin[2]="15";
adjoin[3]="046";
adjoin[4]="1357";
adjoin[5]="248";
adjoin[6]="37";
adjoin[7]="468";
adjoin[8]="57";

so how do I make it so the right numbers can end up in the right places ?

ie:
123
456
789

and, other than changing the image size, how do I change the size.
I want mine to be 50x50
2 peachy
03-01-2003, 08:17 PM
I still cant get this to work right
AdamBrill
03-01-2003, 08:22 PM
You can't just put your numbers in there. You have to use Images. I'm not sure if that is what you meant or not, but... And, about changeing the size, in the image lines, just change this:

WIDTH=150 HEIGHT=150

to

WIDTH=50 HEIGHT=50

I hope that helps! :)
2 peachy
03-01-2003, 08:28 PM
I did put images in... and changed the image height and width
and what I got was...
big huge spaces between the images...
and...
play the game.... when you get a number where ... previously there was part of that logo, the number stops in that position and will not let you move it... even if it is not in numeric order

I dont know what to do to fix this thing
AdamBrill
03-01-2003, 10:24 PM
Try adding this:

width="50"

into this line:

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">

I hope this helps. :)
2 peachy
03-01-2003, 10:56 PM
thankyou very much for your help,
have another problem.
the game works... but... number 1 never shows up ....
1.gif is never in the puzzle... so I still have things goofed up with this script
AdamBrill
03-02-2003, 10:17 AM
Space number 1 is where you put the blank piece. That piece will disappear once you start the game. There has to be one piece that disappears, or you couldn't move the pieces. ;)