Witam :)
Chciałbym prosić o pomoc w urozmaiceniu aplikacji zrobionej w jquery. Chodzi tu o słynną grę "Memory", która polega na odkrywaniu par obrazków.
Chciałbym dodać następujące rzeczy:

  • możliwość wyboru wielkości planszy (np. 3 poziomy trudności, które można wybrać z menu rozwijanego)
  • dodanie zegarka, który ruszałby wraz z rozpoczęciem gry
  • dodanie dodatkowego licznika, który by np. zliczał, ile złych ruchów było wykonane
  • zrobienie tak, aby karty po odkryciu obracały się, a nie pojawiały się i znikały.

Przykład był wzięty z internetu, całość wygląda tak, wklejone do html (obrazki potrzebne do działania dostępne w załącznikach) :

<html>
 <head>
 <link rel="Stylesheet" type="text/css" href="style.css" />
 </head>
  <body>
  <div class="plansza">
 
</div>
<div class="moves"></div>
 
<button class="start_game">Rozpocznij</button> 
<button class="zresetujKafelki">Reset</button>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>



<script>
var LICZBA_KAFELKOW = 20;
var KAFELKI_NA_RZAD = 5;
var kafelki = [];
var pobraneKafelki = [];
var moznaBrac = true;
var liczbaRuchow = 0;
var paryKafelkow = 0;
var obrazkiKafelkow = [
    'title_1.png',
    'title_2.png',
    'title_3.png',
    'title_4.png',
    'title_5.png',
    'title_6.png',
    'title_7.png',
    'title_8.png',
    'title_9.png',
    'title_10.png'
];
 
function startGame() {
    kafelki = [];
    pobraneKafelki = [];
    moznaBrac = true;
    liczbaRuchow = 0;
    paryKafelkow = 0;
 
    var plansza = $('.plansza').empty();
 
    for (var i=0; i<LICZBA_KAFELKOW; i++) {
        kafelki.push(Math.floor(i/2));
    }
 
    for (i=LICZBA_KAFELKOW-1; i>0; i--) {
        var swap = Math.floor(Math.random()*i);
        var tmp = kafelki[i];
        kafelki[i] = kafelki[swap];
        kafelki[swap] = tmp;
    }
 
    for (i=0; i<LICZBA_KAFELKOW; i++) {
        var tile = $('<div class="kafelek"></div>');
        plansza.append(tile);
        tile.data('cardType',kafelki[i]);
        tile.data('index', i);
        tile.css({
            left : 5+(tile.width()+5)*(i%KAFELKI_NA_RZAD)
        });
        tile.css({
            top : 5+(tile.height()+5)*(Math.floor(i/KAFELKI_NA_RZAD))
        });
        tile.bind('click',function() {klikniecieKafelka($(this))});
    }
    $('.moves').html(liczbaRuchow);
}
 
function klikniecieKafelka(element) {
    if (moznaBrac) {
        //jeżeli jeszcze nie pobraliśmy 1 elementu
        //lub jeżeli index tego elementu nie istnieje w pobranych...
        if (!pobraneKafelki[0] || (pobraneKafelki[0].data('index') != element.data('index'))) {
            pobraneKafelki.push(element);
            element.css({'background-image' : 'url('+obrazkiKafelkow[element.data('cardType')]+')'})    
        }
 
        if (pobraneKafelki.length == 2) {
            moznaBrac = false;
            if (pobraneKafelki[0].data('cardType') == pobraneKafelki[1].data('cardType')) {
                setTimeout('usunKafelki()', 500);
            } else {
                setTimeout('zresetujKafelki()', 500);
            }
 
            liczbaRuchow++;
            $('.moves').html(liczbaRuchow)
        }
    }
}
 
function usunKafelki() {
    pobraneKafelki[0].fadeOut(function() {
        $(this).remove();
    });
    pobraneKafelki[1].fadeOut(function() {
        $(this).remove();
 
        paryKafelkow++;
        if (paryKafelkow >= LICZBA_KAFELKOW / 2) {
            alert('gameOver!');
        }
        moznaBrac = true;
        pobraneKafelki = new Array();
    });
}
 
function zresetujKafelki() {
    pobraneKafelki[0].css({'background-image':'url(title.png)'})
    pobraneKafelki[1].css({'background-image':'url(title.png)'})
    pobraneKafelki = new Array();
    moznaBrac = true;
}
 
$(document).ready(function() {
 
    $('.start_game').click(function() {
        startGame();
    });
 
})
  
  
  </script>
  </body>  
</html>

i css do tego:

body {
    padding: 10px;
}
 
.plansza {
    position: relative;
    background: #fff;
    overflow: hidden;
    width: 440px;
    height: 355px;
    box-shadow: 1px 1px 1px #fff, inset 1px 1px 6px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}
 
.kafelek {
    position: absolute;
    float: left;
    width: 80px;
    height: 80px;
    background: #f6da17 url(title.png) center center no-repeat;
    margin: 5px;
    border-radius: 5px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2), inset 1px 1px 1px #fff, 1px 1px 3px rgba(0,0,0,1);
}

z góry dziękuję