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ę