PDA

View Full Version : Image to Word Matching Game



Jay Dog
06-06-2013, 09:00 AM
Hi,

I've discovered this site here :

http://www.wisconsinhistory.org/kids/matching/matching.htm


<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

vwphillips
06-07-2013, 10:46 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
position:relative;left:0px;top:0px;height:400px;width:400px;border:solid red 1px;
}

#tst IMG {
width:100px;height:100px;
}

/*]]>*/
</style></head>

<body>
<div id="tst" style="" ></div>
<input type="button" name="" value="Reset" onmouseup="matching.reset('tst');" /><input id="tries" />
<script type="text/javascript">
/*<![CDATA[*/

var matching={

init:function(o){
var p=document.getElementById(o.ID),cards=o.Cards,ary=[],rows=4,img,z0=0,z1=0
for (;z0<cards.length;z0++){
cards[z0][2]=z0;
}
o.ip=document.getElementById(o.TriesID);
o.nu=rows*rows;
o.imgs=[];
for (;z1<o.nu;z1++){
img=document.createElement('IMG')
o.imgs[z1]=[img];
p.appendChild(img);
this.addevt(img,'mouseup','click',o,z1);
}
this[o.ID]=o;
this.reset(o.ID);
},


click:function(o,nu){
if (o.cnt==2){
if (o.ary[0][3]!=o.ary[1][3]){
o.ary[0][1]=o.ary[1][1]=true;
o.ary[0][0].src=o.ary[1][0].src=o.CoverSRC;
}
o.cnt=0;
o.ary=[];
}
if (o.imgs[nu][1]){
o.imgs[nu][1]=false;
o.ary[o.cnt++]=o.imgs[nu];
o.imgs[nu][0].src=o.imgs[nu][2];
o.ip&&o.cnt==2?o.ip.value++:null;
}
},

reset:function(id){
if (this[id]){
var o=this[id],cards=this.shuffle(o.Cards),ary=[],z0=0,z1=0;
for (;z0<o.nu/2;z0++){
ary.push([cards[z0][0],cards[z0][2]]);
ary.push([cards[z0][1],cards[z0][2]]);
}
ary=this.shuffle(ary)
for (;z1<o.nu;z1++){
o.imgs[z1][0].src=o.CoverSRC;
o.imgs[z1][1]=true;
o.imgs[z1][2]=ary[z1][0];
o.imgs[z1][3]=ary[z1][1];
}
o.cnt=0;
o.ary=[];
o.ip?o.ip.value=0:null;
}
},

addevt:function(o,t,f,p,p1){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
}
},

shuffle:function(ary){
for (var r,t,z0=0;z0<ary.length;z0++){
r=Math.floor(Math.random()*ary.length);
t=ary[z0];
ary[z0]=ary[r];
ary[r]=t;
}
return ary;
}


}


matching.init({
ID:'tst',
TriesID:'tries',
CoverSRC:'http://www.wisconsinhistory.org/kids/matching/card.jpg',
Cards:[
['http://www.wisconsinhistory.org/kids/matching/0.jpg','http://www.vicsjavascripts.org.uk/StdImages/0.gif'],
['http://www.wisconsinhistory.org/kids/matching/1.jpg','http://www.vicsjavascripts.org.uk/StdImages/1.gif'],
['http://www.wisconsinhistory.org/kids/matching/2.jpg','http://www.vicsjavascripts.org.uk/StdImages/2.gif'],
['http://www.wisconsinhistory.org/kids/matching/3.jpg','http://www.vicsjavascripts.org.uk/StdImages/3.gif'],
['http://www.wisconsinhistory.org/kids/matching/4.jpg','http://www.vicsjavascripts.org.uk/StdImages/4.gif'],
['http://www.wisconsinhistory.org/kids/matching/5.jpg','http://www.vicsjavascripts.org.uk/StdImages/5.gif'],
['http://www.wisconsinhistory.org/kids/matching/6.jpg','http://www.vicsjavascripts.org.uk/StdImages/6.gif'],
['http://www.wisconsinhistory.org/kids/matching/7.jpg','http://www.vicsjavascripts.org.uk/StdImages/7.gif'],
['http://www.wisconsinhistory.org/kids/matching/8.jpg','http://www.vicsjavascripts.org.uk/StdImages/8.gif'],
['http://www.wisconsinhistory.org/kids/matching/9.jpg','http://www.vicsjavascripts.org.uk/StdImages/9.gif'],
['http://www.wisconsinhistory.org/kids/matching/10.jpg','http://www.wisconsinhistory.org/kids/matching/10.jpg'],
['http://www.wisconsinhistory.org/kids/matching/11.jpg','http://www.wisconsinhistory.org/kids/matching/11.jpg'],
['http://www.wisconsinhistory.org/kids/matching/12.jpg','http://www.wisconsinhistory.org/kids/matching/12.jpg'],
['http://www.wisconsinhistory.org/kids/matching/13.jpg','http://www.wisconsinhistory.org/kids/matching/13.jpg'],
['http://www.wisconsinhistory.org/kids/matching/14.jpg','http://www.wisconsinhistory.org/kids/matching/14.jpg'],
['http://www.wisconsinhistory.org/kids/matching/15.jpg','http://www.wisconsinhistory.org/kids/matching/15.jpg'],
['http://www.wisconsinhistory.org/kids/matching/16.jpg','http://www.wisconsinhistory.org/kids/matching/16.jpg'],
['http://www.wisconsinhistory.org/kids/matching/17.jpg','http://www.wisconsinhistory.org/kids/matching/17.jpg']
]
});
/*]]>*/
</script>
</body>

</html>