Ineeda Coffee
10-18-2002, 03:36 AM
I'm trying to learn JavaScript backwards, by studying and adapting other people's scripts. I liked Kien Caoxuan's 'Face Memory Game'' http://javascriptsource.com (even though it refuses to restart a NewGame with the copy I made in Netscape Composer on my iMac. Composer insists on changing all lines that begin with input type. (Example) input type= button name=newgamebutton becomes input type="button" name="newgamebutton". Would that ruin the restarting feature? )
I thought I could simplify it by removing the randomization and comparison between the randomly generated image and the user's input, and reducing the number of images that change from 9 to 3 to make a face-changing 'toy' that wouldn't need to restart.
Here is my adaptation, which at the moment only produces a table with three rows (1 image across each row) and three scroll boxes at the bottom. I want the scroll boxes to change the images in the table, the way they do in the original Face Memory game. (Sorry, I don't know the right words to describe things.)
I *did* try reading all the tutorials I could find, but I just got hopelessly confused. Any assistance/explanation would be greatly appreciated.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Out Of Character</title>
<script language="JavaScript">
function Chosen(prt,num){
document[prt].src=prt +num + ".gif";
YourRebel[i]=document[Parts[i]].src
}
top1=new Image;
top1.src= "top1.gif"
mid1=new Image;
mid1.src= "mid1.gif"
bot1=new Image;
bot1.scr= "bot1.gif"
top2=new Image;
top2.src= "top2.gif"
mid2=new Image;
mid2.src= "mid2.gif"
bot2=new Image;
bot2.scr= "bot2.gif"
top3=new Image;
top3.src= "top3.gif"
mid3=new Image;
mid3.src= "mid3.gif"
bot3=new Image;
bot3.scr= "bot3.gif"
}
</script>
</head>
<body>
<div align="Center"> Recombinant DNA Rebels<br>
</div>
<br>
<table cellpadding="2" cellspacing="2" border="1" width="60%" align="Center">
<tbody>
<tr>
<td valign="Top" height="110" align="Left"><img name="top" src="top1.gif" border="0" top="" height="110" alt="top of head" width="50">
<br>
</td>
</tr>
<tr>
<td valign="Top" height="110" align="Left"><img name="mid" src="mid1.gif" border="0" top="" height="110" alt="middle of head" width="50">
<br>
</td>
</tr>
<tr>
<td valign="Top" height="110" align="Left"><img name="bot" src="bot1.gif" border="0" top="" height="110" alt="bottom of head" width="50">
<br>
</td>
</tr>
</tbody>
</table>
<br>
<script language="JavaScript">
<!-- Begin
YourRebel = new Array();
Parts = new Array("top", "middle", "bottom");
for (x = 0; x < Parts.length; x++) {
document.write("<select name=Prt",x," size=4 onChange=Chosen('",Parts[x],"',this.options[this.selectedIndex].value);>");
document.write("<option selected>",Parts[x],"</option>");
document.write("<option value='1'>Avon");
document.write("<option value='2'>Blake");
document.write("<option value='3'>Cally");
document.write("</select>");
}
// End -->
</script><br>
<br>
<br>
<br>
<br>
</body>
</html>
I thought I could simplify it by removing the randomization and comparison between the randomly generated image and the user's input, and reducing the number of images that change from 9 to 3 to make a face-changing 'toy' that wouldn't need to restart.
Here is my adaptation, which at the moment only produces a table with three rows (1 image across each row) and three scroll boxes at the bottom. I want the scroll boxes to change the images in the table, the way they do in the original Face Memory game. (Sorry, I don't know the right words to describe things.)
I *did* try reading all the tutorials I could find, but I just got hopelessly confused. Any assistance/explanation would be greatly appreciated.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Out Of Character</title>
<script language="JavaScript">
function Chosen(prt,num){
document[prt].src=prt +num + ".gif";
YourRebel[i]=document[Parts[i]].src
}
top1=new Image;
top1.src= "top1.gif"
mid1=new Image;
mid1.src= "mid1.gif"
bot1=new Image;
bot1.scr= "bot1.gif"
top2=new Image;
top2.src= "top2.gif"
mid2=new Image;
mid2.src= "mid2.gif"
bot2=new Image;
bot2.scr= "bot2.gif"
top3=new Image;
top3.src= "top3.gif"
mid3=new Image;
mid3.src= "mid3.gif"
bot3=new Image;
bot3.scr= "bot3.gif"
}
</script>
</head>
<body>
<div align="Center"> Recombinant DNA Rebels<br>
</div>
<br>
<table cellpadding="2" cellspacing="2" border="1" width="60%" align="Center">
<tbody>
<tr>
<td valign="Top" height="110" align="Left"><img name="top" src="top1.gif" border="0" top="" height="110" alt="top of head" width="50">
<br>
</td>
</tr>
<tr>
<td valign="Top" height="110" align="Left"><img name="mid" src="mid1.gif" border="0" top="" height="110" alt="middle of head" width="50">
<br>
</td>
</tr>
<tr>
<td valign="Top" height="110" align="Left"><img name="bot" src="bot1.gif" border="0" top="" height="110" alt="bottom of head" width="50">
<br>
</td>
</tr>
</tbody>
</table>
<br>
<script language="JavaScript">
<!-- Begin
YourRebel = new Array();
Parts = new Array("top", "middle", "bottom");
for (x = 0; x < Parts.length; x++) {
document.write("<select name=Prt",x," size=4 onChange=Chosen('",Parts[x],"',this.options[this.selectedIndex].value);>");
document.write("<option selected>",Parts[x],"</option>");
document.write("<option value='1'>Avon");
document.write("<option value='2'>Blake");
document.write("<option value='3'>Cally");
document.write("</select>");
}
// End -->
</script><br>
<br>
<br>
<br>
<br>
</body>
</html>