Přidejte herní koncentraci na webovou stránku pomocí JavaScriptu

Zde je verze klasické paměťové hry, která umožňuje návštěvníkům vaší webové stránky porovnávat obrázky ve vzoru mřížky pomocí JavaScriptu.

Budete muset dodat obrázky, ale s tímto skriptem můžete použít libovolné obrázky, pokud vlastníte práva k jejich použití na webu. Než začnete, musíte je také změnit na 60 pixelů a 60 pixelů.

Budete potřebovat jeden obrázek pro zadní část „karet“ a patnáct pro „přední strany“.

Ujistěte se, že obrazové soubory jsou co nejmenší nebo že načítání hry může trvat příliš dlouho. U této verze jsem omezil skript na 30 karet, protože všechny obrázky způsobí, že se stránka načte mnohem pomaleji. Čím více karet a obrázků na stránce, tím pomalejší se stránka načte. To nemusí být problém pro ty s dobrým širokopásmovým připojením, ale ti s pomalejším připojením mohou být frustrováni časem, který to vyžaduje.

Pokud jste tuto hru ještě předtím nehráli, pravidla jsou velmi jednoduchá. K dispozici je 30 čtverců nebo karet. Každá karta má jeden z 15 obrázků, přičemž žádný obrázek se neobjeví více než dvakrát - jedná se o dvojice, které se budou shodovat.

Karty začínají „lícem dolů“ a skrývají obrázky na 15 párech.

Cílem je obrátit všechny odpovídající páry v co nejkratší době.

Hra začíná výběrem jedné karty a následným výběrem druhé karty. Jsou-li zápasem, zůstanou lícem nahoru; pokud se neshodují, obě karty jsou otočeny zpět, lícem dolů. Při hraní se budete muset spolehnout na paměť vašich předchozích karet a jejich umístění, abyste mohli úspěšně zápasit.

V této verzi hry JavaScript vyberete karty kliknutím na ně. Pokud se dva, které vyberete, shodují, zůstanou viditelné, pokud ne, zmizí znovu asi za vteřinu.

Ve spodní části je počítadlo času, které sleduje, jak dlouho vám bude vyhovovat všechny páry.

Pokud chcete začít znovu, stačí stisknout tlačítko čítače a celá tabulka bude přeskupena a můžete začít znovu.

Obrázky použité v tomto vzorku nejsou dodávány se skriptem, takže, jak bylo uvedeno, budete muset poskytnout vlastní. Pokud nemáte obrázky, které by bylo možné použít v tomto skriptu, a nemůžete si vytvořit svůj vlastní, můžete hledat vhodný klipart, který je zdarma k použití.

Skript pro pexeso se přidá na vaši webovou stránku v pěti krocích.

Krok 1: Zkopírujte následující kód a uložte jej do souboru s názvem memoryh.js.

// Koncentrační paměťová hra s obrázky - Head Script
// copyright Stephen Chapman, 28. února 2006, 24. prosince 2009
// můžete tento skript zkopírovat za předpokladu, že si ponecháte oznámení o autorských právech

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

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

výška = "60" alt = "zpět" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload = start; start funkce () {for (var i = 0; i <= 29; i ++)
displayBack (i); clearInterval (tid); tmr = tno = cnt = 0; tile.sort (randOrd
); cntr (); tid = setInterval ('cntr ()', 1000);} funkce cntr () {var min =
Math.floor (tmr / 60); var sec = tmr% 60; document.getElementById ('cnt'). Value =
min + ':' + (sec <10? '0': '') + sec; tmr ++;} funkce disp (sel) {if (tno> 1)
{clearTimeout (cid); conceal ();} document.getElementById ('t' + sel) .innerHTML =
dlaždice [sel]; pokud (tno == 0) ch1 = sel; jinde {ch2 = sel; cid = setTimeout ('conceal ()',
900);} tno ++;} skrytí funkce () {tno = 0; if (dlaždice [ch1]! = dlaždice [ch2])
{displayBack (ch1); displayBack (ch2);} else cnt ++; pokud (cnt> = 15)
clearInterval (tid);}

Názvy souborů obrázků nahradíte zadní a dlaždice se jmény souborů vašich obrázků.

Nezapomeňte upravit své obrázky v grafickém programu tak, aby byly všechny čtverce o velikosti 60 pixelů, aby jejich načítání netrvalo příliš dlouho (společná velikost 16 obrázků použitých v mém příkladu je pouze 4758 bytů, takže byste neměli mít problém udržet celkový počet pod 10k).

Krok 2: Vyberte níže uvedený kód a zkopírujte jej do souboru s názvem memory.css.

.blk {width: 70px; výška: 70px; přetečení: skryté;}

Krok 3: Vložte následující kód do hlavní části dokumentu HTML vaší webové stránky a vyvolejte dva právě vytvořené soubory.

Krok 4: Vyberte a zkopírujte níže uvedený kód a uložte jej do souboru s názvem memoryb.js.

// Koncentrační paměťová hra s obrázky - Body Script
// copyright Stephen Chapman, 28. února 2006, 24. prosince 2009
// můžete tento skript zkopírovat za předpokladu, že si ponecháte oznámení o autorských právech

document.write ('

Krok 5: Nyní zbývá pouze přidat hru na webovou stránku, kde se má zobrazit, a to vložením následujícího kódu do dokumentu HTML.