macfran.com

This is a javascript matching game featuring character photos from Doctor Who. The code belongs to Brian Gosselin but the pictures are my contribution. Please wait for the game to fully load, then click on a square to uncover the picture beneath. Click on a second square to try to find the matching picture.

{source}
<script language="javascript">

var pics=new Array();
for(i=0;i<=18;i++){
pics[i]=new Image(); pics[i].src='http://macfran.com/interactivegames/61-gamespuzzles/image'+i+'.jpg';
}

var map=new Array(1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,14,14,15,15,16,16,17,17,18,18);
var user=new Array();
var temparray=new Array();
var clickarray=new Array(0,0);
var ticker, sec, min, ctr, id=0, oktoclick, finished;

function runclk(){
min=Math.floor(ticker/60);
sec=(ticker-(min*60))+'';
if(sec.length==1){sec="0"+sec};
ticker++;
document.forms["f"].b.value=" "+min+":"+sec+" ";
}

function scramble(){
for(z=0;z<5;z++){
for(x=0;x<=35;x++){
temparray[0]=Math.floor(Math.random()*36);
temparray[1]=map[temparray[0]];
temparray[2]=map[x];
map[x]=temparray[1];
map[temparray[0]]=temparray[2];
}}}

function showimage(but){
if(oktoclick){
oktoclick=false;
document.images[('img'+but)].src='http://macfran.com/interactivegames/61-gamespuzzles/image'+map[but]+'.jpg';
document.images[('img'+but)].alt='Image '+map[but];
if(ctr==0){
ctr++;
clickarray[0]=but;
oktoclick=true;
}else{
clickarray[1]=but;
ctr=0;
setTimeout('returntoold()', 600);
}}}

function returntoold(){
if((clickarray[0]==clickarray[1])&&(!user[clickarray[0]])){
document.images[('img'+clickarray[0])].src="/interactivegames/61-gamespuzzles/image0.jpg";
document.images[('img'+clickarray[0])].alt="";
oktoclick=true;
}else{
if(map[clickarray[0]]!=map[clickarray[1]]){
if(user[clickarray[0]]==0){
document.images[('img'+clickarray[0])].src="/interactivegames/61-gamespuzzles/image0.jpg";
document.images[('img'+clickarray[0])].alt="";
}
if(user[clickarray[1]]==0){
document.images[('img'+clickarray[1])].src="/interactivegames/61-gamespuzzles/image0.jpg";
document.images[('img'+clickarray[1])].alt="";
}}
if(map[clickarray[0]]==map[clickarray[1]]){
if(user[clickarray[0]]==0&&user[clickarray[1]]==0)finished++;
user[clickarray[0]]=1;
user[clickarray[1]]=1;
}
if(finished>=18){
alert('Fantastic! You did it in'+document.forms["f"].b.value+' !');
init();
}else oktoclick=true;
}}

function init(){
clearTimeout(id);
for(i=0;i<=35;i++)user[i]=0;
ticker=0; min=0; sec=0; ctr=0; finished=0;
oktoclick=true;
document.forms["f"].b.value="Resetting game table...";
scramble();
id=setInterval('runclk()', 995);
for(i=0;i<=35;i++){
document.images[('img'+i)].src="/interactivegames/61-gamespuzzles/image0.jpg";
document.images[('img'+i)].alt="";
}}

var t='<table cellpadding="4" cellspacing="0" border="0">';
for(r=0;r<=5;r++){
t+='<tr>';
for(c=0;c<=5;c++) t+='<td align="center"><a href="javascript:void(0)" onClick="showimage('+((6*r)+c)+'); this.blur()"><img src="/interactivegames/61-gamespuzzles/image0.jpg" name="img'+((6*r)+c)+'" alt="" border="0"></a></td>';
t+='</tr>';
}
t+='</table><br><br><form name="f"><input type="button" value="Downloading images...." name="b" onClick="init()"></form>';
document.write(t);

window.onload=init;
</script>
{/source}