CSS Codes
CSS Layouts
Results 1 to 2 of 2

Thread: Image to Word Matching Game

  1. 06-06-2013, 09:00 AM #1
    Jay Dog
    Jay Dog is offline Regular Coders
    Join Date
    Oct 2012
    Location
    England
    Posts
    103
    Thanks
    28
    Thanked 2 Times in 1 Post

    Default 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
    Reply With Quote Reply With Quote
  2. 06-07-2013, 10:46 AM #2
    vwphillips
    vwphillips is offline Elite Coders
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Similar Threads

  1. image word wrap and horizontal lines
    By james438 in forum CSS
    Replies: 9
    Last Post: 07-20-2012, 07:13 AM
  2. Word association game
    By hmsnacker123 in forum The lounge
    Replies: 1239
    Last Post: 05-13-2010, 07:00 PM
  3. word-wrap:break-word doesn't work in Firefox
    By NirupamaV in forum CSS
    Replies: 4
    Last Post: 04-29-2009, 08:21 AM
  4. Random Linked Image + matching text
    By Falah in forum JavaScript
    Replies: 5
    Last Post: 10-17-2008, 04:08 AM
  5. I file .doc in word xp containing image, how I can modify image in fireworks ?
    By leonidassavvides in forum Computer hardware and software
    Replies: 1
    Last Post: 04-28-2008, 10:51 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules