Oto wersja klasycznej gry pamięciowej, która pozwala odwiedzającym na twoją stronę dopasowywać obrazy w układzie siatki za pomocą JavaScript.
Dostarczanie obrazów
Będziesz musiał dostarczyć obrazy, ale możesz używać dowolnych obrazów z tym skryptem, o ile masz prawa do korzystania z nich w Internecie. Przed rozpoczęciem musisz także zmienić ich rozmiar na 60 na 60 pikseli.
Będziesz potrzebować jednego obrazu na odwrocie „kart” i piętnastu na „frontach”.
Upewnij się, że pliki obrazów są tak małe, jak to możliwe, w przeciwnym razie ładowanie gry może potrwać zbyt długo. W tej wersji ograniczyłem skrypt do 30 kart, ponieważ wszystkie obrazy znacznie spowolnią ładowanie strony. Im więcej kart i obrazów na stronie, tym wolniej strona będzie się ładować. Może to nie stanowić problemu dla osób z dobrymi połączeniami szerokopasmowymi, ale osoby z wolniejszymi połączeniami mogą stać się sfrustrowane czasem.
Co to jest gra pamięciowa z koncentracją?
Jeśli wcześniej nie grałeś w tę grę, zasady są bardzo proste. Istnieje 30 kwadratów lub kart. Każda karta ma jeden z 15 obrazów, przy czym obraz nie pojawia się więcej niż dwa razy - są to pary, które zostaną dopasowane.
Karty zaczynają się „zakryte”, ukrywając obrazy na 15 parach.
Celem jest odkrycie wszystkich pasujących par w jak najkrótszym czasie.
Gra rozpoczyna się od wybrania jednej karty, a następnie wybrania drugiej. Jeśli pasują, pozostają odkryte; jeśli się nie zgadzają, dwie karty są odwrócone, zakryte. Podczas gry będziesz musiał polegać na swojej pamięci poprzednich kart i ich lokalizacji, aby wykonać udane mecze.
Jak działa ta wersja koncentracji
W tej wersji JavaScript gry wybierasz karty, klikając je. Jeśli dwa, które wybierzesz, będą pasować, pozostaną widoczne, jeśli nie, to znikną ponownie po upływie około sekundy.
Na dole znajduje się licznik czasu, który śledzi, ile czasu zajmuje dopasowanie wszystkich par.
Jeśli chcesz zacząć od nowa, po prostu naciśnij przycisk licznika, a cała tablica zostanie przetasowana i możesz zacząć od nowa.
Obrazy użyte w tym przykładzie nie pochodzą ze skryptu, więc jak wspomniano, będziesz musiał podać własne. Jeśli nie masz zdjęć do użycia z tym skryptem i nie możesz utworzyć własnego, możesz wyszukać odpowiednie clipart, z których można korzystać bezpłatnie.
Dodawanie gry do swojej strony internetowej
Skrypt gry pamięciowej jest dodawany do strony internetowej w pięciu krokach.
Krok 1: Skopiuj poniższy kod i zapisz go w pliku o nazwie memoryh.js.
// Gra pamięciowa z koncentracją obrazów - Head Script
// prawa autorskie Stephen Chapman, 28 lutego 2006 r., 24 grudnia 2009 r
// możesz skopiować ten skrypt pod warunkiem zachowania informacji o prawach autorskich
var back = 'back.gif';
var tile = [„img0.gif”, „img1.gif”, „img2.gif”, „img3.gif”, „img4.gif”, „img5.gif”,
„img6.gif”, „img7.gif”, „img8.gif”, „img9.gif”, „img10.gif”, „img11.gif”,
„img12.gif”, „img13.gif”, „img14.gif”];
funkcja randOrd (a, b) {return (Math.round (Math.random ()) - 0.5);} var im = []; dla
(var i = 0; i <15; i ++) {im [i] = new Image (); im [i] .src = płytka [i]; kafelek [i] =
''; pole [i + 15] =
tile [i];} funkcja displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'height = "60" alt = "back" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload = start; funkcja start () {dla (var i = 0; i <= 29; i ++)
displayBack (i); clearInterval (tid); tmr = tno = cnt = 0; tile.sort (randOrd
); cntr (); tid = setInterval ('cntr ()', 1000);} funkcja cntr () {var min =
Math.floor (tmr / 60); var sec = tmr% 60; document.getElementById ('cnt'). Wartość =
min + ':' + (sec <10? „0”: „”) + s; tmr ++;} funkcja disp (sel) {if (tno> 1)
{clearTimeout (cid); conceal ();} document.getElementById ('t' + sel) .innerHTML =
dachówka [sel]; if (tno == 0) ch1 = sel; else {ch2 = sel; cid = setTimeout ('conceal ()',
900);} tno ++;} funkcja conceal () {tno = 0; if (płytka [ch1]! = płytka [ch2])
{displayBack (ch1); displayBack (ch2);} else cnt ++; if (cnt> = 15)
clearInterval (tid);}
Zamienisz nazwy plików obrazów dla plecy i dachówka z nazwami plików twoich zdjęć.
Pamiętaj, aby edytować obrazy w programie graficznym, aby wszystkie miały 60 pikseli kwadratowych, aby ładowanie ich nie trwało zbyt długo (łączny rozmiar 16 obrazów użytych w moim przykładzie to zaledwie 4758 bajtów, więc nie powinieneś mieć problemu z utrzymaniem sumy poniżej 10k).
Krok 2: Wybierz poniższy kod i skopiuj go do pliku o nazwie memory.css.
.blk {szerokość: 70px; wysokość: 70 pikseli; przepełnienie: ukryte;}
Krok 3: Wstaw następujący kod do sekcji nagłówka dokumentu HTML swojej strony internetowej, aby wywołać dwa właśnie utworzone pliki.
Krok 4: Wybierz i skopiuj poniższy kod, a następnie zapisz go w pliku o nazwie memoryb.js.
// Gra pamięciowa z koncentracją obrazów - Body Script
// prawa autorskie Stephen Chapman, 28 lutego 2006 r., 24 grudnia 2009 r
// możesz skopiować ten skrypt pod warunkiem zachowania informacji o prawach autorskich
document.write (''); dla (var b =
0; b <= 4; b ++) {document.write ('id = "t '+ ((5 * a) + b) +'">');} document.write (' ');} document.write ('
Krok 5: Teraz pozostaje tylko dodać grę do swojej strony internetowej w miejscu, w którym ma się pojawiać, wstawiając następujący kod do dokumentu HTML.