Basic JQuery game

Basic JQuery game

Hello,
i have a problem. I´m pragramming a simple memory game but i need match two different images. With different file names like 01.png and 01_.png. Can you help me with it in this code? It's my first jQuery program and I'm beginer. Thank you so much for response.

<! DOCTYPE html >
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >
< title > JQuery Memory Game </ title >
< script type = "text/javascript" >
var boxopened = "" ;
var imgopened = "" ;
var count = 0 ;
var found = 0 ;

function randomFromTo ( from , to ){
return Math . floor ( Math . random () * ( to - from + 1 ) + from );
}

function shuffle () {
var children = $ ( "#boxcard" ). children ();
var child = $ ( "#boxcard div:first-child" );

var array_img = new Array ();

for ( i = 0 ; i < children . length ; i ++) {
array_img [ i ] = $ ( "#" + child . attr ( "id" )+ " img" ). attr ( "src" );
child = child . next ();
}

var child = $ ( "#boxcard div:first-child" );

for ( z = 0 ; z < children . length ; z ++) {
randIndex = randomFromTo ( 0 , array_img . length - 1 );

// set new image
$ ( "#" + child . attr ( "id" )+ " img" ). attr ( "src" , array_img [ randIndex ]);
array_img . splice ( randIndex , 1 );

child = child . next ();
}
}

function resetGame () {
shuffle ();
$ ( "img" ). hide ();
$ ( "img" ). removeClass ( "opacity" );
count = 0 ;
$ ( "#msg" ). remove ();
$ ( "#count" ). html ( "" + count );
boxopened = "" ;
imgopened = "" ;
found = 0 ;
return false ;
}

$ ( document ). ready ( function () {
$ ( "img" ). hide ();
$ ( "#boxcard div" ). click ( openCard );

shuffle ();

function openCard () {

id = $ ( this ). attr ( "id" );

if ( $ ( "#" + id + " img" ). is ( ":hidden" )) {
$ ( "#boxcard div" ). unbind ( "click" , openCard );

$ ( "#" + id + " img" ). slideDown ( 'fast' );

if ( imgopened == "" ) {
boxopened = id ;
imgopened = $ ( "#" + id + " img" ). attr ( "src" );
setTimeout ( function () {
$ ( "#boxcard div" ). bind ( "click" , openCard )
}, 300 );
} else {
currentopened = $ ( "#" + id + " img" ). attr ( "src" );
if ( imgopened != currentopened ) {
// close again
setTimeout ( function () {
$ ( "#" + id + " img" ). slideUp ( 'fast' );
$ ( "#" + boxopened + " img" ). slideUp ( 'fast' );
boxopened = "" ;
imgopened = "" ;
}, 400 );
} else {
// found
$ ( "#" + id + " img" ). addClass ( "opacity" );
$ ( "#" + boxopened + " img" ). addClass ( "opacity" );
found ++;
boxopened = "" ;
imgopened = "" ;
}
setTimeout ( function () {
$ ( "#boxcard div" ). bind ( "click" , openCard )
}, 400 );
}


count ++;
$ ( "#count" ). html ( "" + count );

if ( found == 10 ) {
msg = '<span id="msg">Congrats ! You Found All Sushi With </span>' ;
$ ( "span.link" ). prepend ( msg );
}
}
}
});
< / script >
</ head >
< body >
< div id = "boxbutton" >
< span class = "link" >
< span id = "count" > 0 </ span >
Click
</ span >
&nbsp;
< a href = "javascript:" class = "link" onclick = "resetGame();" > Reset </ a >
</ div >
< div id = "boxcard" >
< div id = "card1" >< img src = "img/autobus.png" /></ div >
< div id = "card2" >< img src = "img/02.jpg" /></ div >
< div id = "card3" >< img src = "img/03.jpg" /></ div >
< div id = "card4" >< img src = "img/04.jpg" /></ div >
< div id = "card5" >< img src = "img/05.jpg" /></ div >
< div id = "card6" >< img src = "img/06.jpg" /></ div >
< div id = "card7" >< img src = "img/07.jpg" /></ div >
< div id = "card8" >< img src = "img/08.jpg" /></ div >
< div id = "card9" >< img src = "img/09.jpg" /></ div >
< div id = "card10" >< img src = "img/10.jpg" /></ div >
< div id = "card11" >< img src = "img/autobusA.png" /></ div >
< div id = "card12" >< img src = "img/02.jpg" /></ div >
< div id = "card13" >< img src = "img/03.jpg" /></ div >
< div id = "card14" >< img src = "img/04.jpg" /></ div >
< div id = "card15" >< img src = "img/05.jpg" /></ div >
< div id = "card16" >< img src = "img/06.jpg" /></ div >
< div id = "card17" >< img src = "img/07.jpg" /></ div >
< div id = "card18" >< img src = "img/08.jpg" /></ div >
< div id = "card19" >< img src = "img/09.jpg" /></ div >
< div id = "card20" >< img src = "img/10.jpg" /></ div >

</ div >
</ body >
</ html >