Pridajte hernú koncentráciu na webovú stránku pomocou JavaScriptu

Toto je verzia klasickej pexeso, ktorá umožňuje návštevníkom vašej webovej stránky porovnávať obrázky so vzorkou mriežky pomocou JavaScriptu.

Budete musieť dodať obrázky, ale pomocou tohto skriptu môžete použiť ľubovoľné obrázky, pokiaľ vlastníte práva na ich použitie na webe. Pred začatím ich musíte tiež zmeniť na 60 pixelov a 60 pixelov.

Budete potrebovať jeden obrázok pre zadnú stranu „kariet“ a pätnásť pre „predné strany“.

Uistite sa, že obrazové súbory sú čo najmenšie alebo že načítanie hry môže trvať príliš dlho. V tejto verzii som obmedzil skript na 30 kariet, pretože všetky obrázky spôsobia načítanie stránky oveľa pomalšie. Čím viac kariet a obrázkov na stránke, tým pomalšie sa stránka načíta. To nemusí byť problém pre tých, ktorí majú dobré širokopásmové pripojenie, ale pre tých, ktorí majú pomalšie pripojenie, sa môže časom, ktorý to vyžaduje, frustrovať.

Ak ste túto hru ešte predtým nehrali, pravidlá sú veľmi jednoduché. K dispozícii je 30 štvorcov alebo kariet. Každá karta má jeden z 15 obrázkov, pričom žiadny obrázok sa neobjaví viac ako dvakrát - toto sú páry, ktoré sa budú zhodovať.

Karty začínajú „lícom nadol“ a skrývajú obrázky na 15 pároch.

Cieľom je obrátiť všetky párovacie páry v čo najkratšom čase.

Hranie začína výberom jednej karty a následným výberom druhej karty. Ak sú zápasom, zostávajú lícom hore; ak sa nezhodujú, obe karty sa otočia späť lícom nadol. Pri hraní sa budete musieť spoliehať na svoju pamäť predchádzajúcich kariet a ich umiestnenie, aby ste mohli úspešne zápasiť.

V tejto verzii hry JavaScript vyberiete karty kliknutím na ne. Ak sa zvolí zhoda, zostanú viditeľné, ak nie, potom zmiznú znova asi za sekundu.

V dolnej časti je časomer, ktorý sleduje, ako dlho vám bude vyhovovať všetky páry.

Ak chcete začať znova, stačí stlačiť tlačidlo počítadla a celá tabuľa sa znova zamieša a môžete začať znova.

Obrázky použité v tejto vzorke nie sú dodávané so skriptom, tak ako je uvedené, budete musieť poskytnúť svoje vlastné. Ak nemáte obrázky, ktoré by ste mohli použiť v tomto skripte, a neviete si vytvoriť svoj vlastný, môžete vyhľadať vhodnú klipart, ktorý môžete používať zadarmo.

Skript pre pexeso sa pridá na vašu webovú stránku v piatich krokoch.

Krok 1: Skopírujte nasledujúci kód a uložte ho do súboru s názvom memoryh.js.

// Koncentračná pamäťová hra s obrázkami - Head Script
// copyright Stephen Chapman, 28. februára 2006, 24. decembra 2009
// tento skript môžete skopírovať za predpokladu, že si ponecháte oznámenie o autorských právach

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'];

funkcia randOrd (a, b) {návrat (Math.round (Math.random ()) - 0,5);} var im = []; pre
(var i = 0; i <15; i ++) {im [i] = nový obrázok (); im [i] .src = dlaždica [i]; dlaždica [i] =
''; dlaždica [i + 15] =
dlaždice [i];} funkcia displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'

výška = "60" alt = "späť" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload = štart; funkčný štart () {pre (var i = 0; i <= 29; i ++)
displayBack (i); clearInterval (tid); tmr = tno = cnt = 0; tile.sort (randOrd
), CNTR (); tid = setInterval ('cntr ()', 1000);} funkcia cntr () {var min =
Math.floor (tmr / 60); var sec = tmr% 60; document.getElementById ('cnt'). Value =
min + ':' + (sec <10? '0': '') + s; tmr ++;} funkcia disp (sel) {if (tno> 1)
{clearTimeout (cid); conceal ();} document.getElementById ('t' + sel) .innerHTML =
dlaždica [sel]; ak (tno == 0) ch1 = sel; else {ch2 = sel; cid = setTimeout ('conceal ()'),
900);} tno ++;} skrytie funkcie () {tno = 0; if (dlaždice [ch1]! = dlaždice [ch2])
{displayBack (ch1); displayBack (ch2);} else cnt ++; ak (cnt> = 15)
clearInterval (tid);}

Názvy súborov obrázkov nahradíte späť a dlaždica s názvami súborov vašich obrázkov.

Nezabudnite upravovať svoje obrázky v grafickom programe tak, aby boli všetky štvorce s veľkosťou 60 pixelov, aby ich načítanie netrvalo príliš dlho (celková veľkosť 16 obrázkov použitých v mojom príklade je iba 4758 bajtov, takže by ste nemali mať problém udržať celkovú hodnotu pod 10k).

Krok 2: Vyberte kód nižšie a skopírujte ho do súboru s názvom memory.css.

.blk {width: 70px; výška: 70px; pretečenie: skryté;}

Krok 3: Vložte nasledujúci kód do hlavnej časti dokumentu HTML vašej webovej stránky, aby ste zavolali na dva súbory, ktoré ste práve vytvorili.

Krok 4: Vyberte a skopírujte kód nižšie a potom ho uložte do súboru s názvom memoryb.js.

// Koncentračná pamäťová hra s obrázkami - skript tela
// copyright Stephen Chapman, 28. februára 2006, 24. decembra 2009
// tento skript môžete skopírovať za predpokladu, že si ponecháte oznámenie o autorských právach

document.write ( '

Krok 5: Teraz zostáva len pridať hru na webovú stránku, na ktorej sa má zobraziť, vložením nasledujúceho kódu do dokumentu HTML.