Image to Word Matching Game
Hi,
I've discovered this site here :
http://www.wisconsinhistory.org/kids...g/matching.htm
Code:
<html>
<Head><Title>State Symbol Matching Game</Title>
<script language="JavaScript">
<!--
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</Head>
<BODY BGCOLOR="#FFFFFF" text="#000000" LINK="#0000ff" VLINK="#000099" onLoad="MM_preloadImages('tryagain_.gif','endgame_.gif','tryagain_.gif','endgame_.gif');MM_preloadImages('1')">
<font size="2" face="Arial, Helvetica, sans-serif">Click the 2 cards to reveal the hidden state symbols. If they match, they will stay revealed. Keep going until you can see all the symbols.</font>
<Center>
<FORM NAME="score" onSubmit="0">
<b><font face="Arial, Helvetica, sans-serif" size="2">Number of Guesses</font></b>
<INPUT TYPE="text" NAME="box" SIZE=4 VALUE ="">
</FORM>
</center>
<div align="center">
</div>
<Center>
<Script language="Javascript">
<!--
var ImageHeight = 64;
var ImageWidth = 64;
var SourceDir = "";
var Imagetype = ".jpg";
var Cardback = new Image(64, 64);
Cardback.src = "card.jpg";
var Cardfaces;
var ClockDelay = 900;
var Swapcount = 0;
var Swapmem1 = 0;
var Swapmem2 = 0;
var checkagain = new Array();
var holdno = new Array();
var pairs = 0;
var Imageno = new Array();
var t=0;
var check = new Array();
var Tries = 0;
document.write('<Table Align=center Border=1 Cellspacing=0 Cellpadding=0>');
for(i = 0; i < 4 ; i++)
{
document.write('<Tr>');
for(j = 0; j < 4 ; j++)
{
var cardno = 4 * i + j;
document.write('<Td>');
document.write('<A href="javascript:Swap(' + cardno + ')">')
document.write('<Img Name="card' + cardno +'" Src="card.jpg" Height=64 Width=64 Border=0');
document.write('</A>');
document.write('</Td>');
}
document.write('</Tr>');
}
document.write('</Table>');
function ImageArray(length, Width, Height)
{
this.length = length;
for( i = 0 ; i < length ; i++)
{
this[i] = new Image(Width, Height);
}
return this;
}
function Swap(cardnumber)
{
if (document.images[cardnumber].src == Cardback.src) {Swapcount++;}
if (Swapcount == 3)
{
if (document.images[Swapmem1].src != document.images[Swapmem2].src)
{
document.images[Swapmem1].src = Cardback.src;
document.images[Swapmem2].src = Cardback.src;
}
Swapcount = 1;
Tries++;
document.score.box.value = Tries;
}
if (document.images[cardnumber].src == Cardback.src)
{
if (Swapcount == 2)
{
Swapmem2 = cardnumber;
}
if (Swapcount == 1)
{
Swapmem1 = cardnumber;}
}
document.images[cardnumber].src = Cardfaces[(cardnumber)].src;
}
document.score.box.value = ""
for (i = 0; i < 18; i++)
{
checkagain[i] = 0;
holdno[i] = 0;
}
for (i = 0; i < 8; i++)
{
Imageno[i] = 8;
check[i] = 0;
}
for (t = 0; t < 8; t++)
{
var bum = Math.floor(Math.random() * 18);
if (!isNaN(bum))
{
if (checkagain[bum] >= 1)
{
t--;
}
else
{
checkagain[bum]++;
holdno[t] = bum;
// alert(t + " " + bum);
}
}
else {t--;}
}
for (i = 0; i < 16; i++)
{
var num = Math.floor(Math.random() * 8);
if (!isNaN(num))
{
if (check[num] >= 2)
{
i--;
}
else
{
check[num]++;
Imageno[i] = holdno[num];
// alert(num);
}
}
else {i--;}
}
for (i = 0; i < 16; i++)
{
document.images[i].src = Cardback.src
}
Cardfaces = new ImageArray(16 , ImageWidth, ImageHeight);
for (i = 0 ; i < 16 ; i ++)
{
Cardfaces[i].src = Imageno[i] + Imagetype;
}
//-->
</Script>
<font face="Arial" size=-1><a href="matching.htm" onClick="MM_goToURL('parent','matching.htm');return document.MM_returnValue" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','tryagain_.gif',1)"><img name="Image1" border="0" src="tryagain.gif" width="125" height="29"></a></font><a href="javascript:window.close();" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','endgame_.gif',1)"><img name="Image2" border="0" src="endgame.gif" width="125" height="29"></a><br />
<noscript>
<font face="Arial"> <font size="2">This game requires a browser that supports
JavaScript.</font></font> <font face="Arial" size=-1>
<p>Your browser either does not support JavaScript, or it has JavaScript support
disabled. If you want to play this game, please upgrade your browser to Netscape
3.0 or higher, or enable JavaScript support. </noscript>
</font>
</Center>
</Body>
</HTML>
The code is pretty straightforward but is there a way where you can change it so that instead of it matching one specific image to another one, like 'Snap', but you can have, say, a picture of a cat and the Spanish word 'gato' and it matches them up? The 'gato' word can be an image simply done in Photoshop.
Thanks
