Додајте концентрацију игре на веб страницу помоћу ЈаваСцрипта

Ево верзије класичне меморијске игре која омогућава посетиоцима ваше веб странице да ускладе слике у обрасцу решетке помоћу ЈаваСцрипт-а.

Слике ћете морати доставити, али можете користити све слике које желите са овом скрипту све док имате права да их користите на вебу. Такође ћете морати да их смањите на 60 пиксела пре 60 пиксела.

Требаће вам једна слика за полеђину "карата" и петнаест за "предње стране".

Пазите да датотеке за слике буду што је могуће мање или да се игра може трајати предуго. Овом верзијом сам ограничио скрипту на 30 карата јер ће се све слике учитати страницу много спорије. Што више картица и слика страница има спорије учитавање. Ово можда није проблем онима који имају добру широкопојасну везу, али они који имају спорије везе могу постати фрустрирани временом које треба.

Ако до сада нисте играли ову игру, правила су врло једноставна. Има 30 квадрата или картица. Свака картица има једну од 15 слика, а ниједна слика се не појављује више од два пута - то су парови који ће се подударати.

Карте почињу "лицем према доле", прикривајући слике на 15 парова.

Циљ је приказати све подударне парове у што краћем року.

Игра се започиње тако што одаберете једну картицу, а затим одаберете другу. Ако су утакмице, остају окренути лицем према горе; ако се не подударају, две картице су окренуте назад, лицем према доле. Док играте, морат ћете се ослонити на своје памћење претходних карата и њихових локација како бисте успели да одиграте мечеве.

У овој верзији игре, одабирете картице кликом на њих. Ако се њих двоје одаберу, они ће остати видљиви, а ако се не изврше, поново ће нестати након секунде или тако нешто.

На дну се налази бројач времена који прати колико вам треба да се уклопите са свим паровима.

Ако желите почети испочетка, само притисните дугме бројача и цео стол ће се преместити и можете почети поново.

Слике кориштене у овом примјеру не долазе са скрипту, тако да је већ споменуто, морат ћете навести свој властити. Ако немате слике које бисте користили са овом скрипту и не можете да направите сопствену, можете потражити одговарајући графикон који је слободан за употребу.

Скрипта за меморијску игру додаје се вашој веб страници у пет корака.

Корак 1: Копирајте следећи код и сачувајте га у датотеци под називом меморих.јс.

// Концентрациона меморија са сликама - главна скрипта
// ауторска права Степхен Цхапман, 28. фебруара 2006., 24. децембра 2009
// можете копирати ову скрипту под условом да задржите обавештење о ауторским правима

вар бацк = 'бацк.гиф';
вар тиле = ['имг0.гиф', 'имг1.гиф', 'имг2.гиф', 'имг3.гиф', 'имг4.гиф', 'имг5.гиф',
'имг6.гиф', 'имг7.гиф', 'имг8.гиф', 'имг9.гиф', 'имг10.гиф', 'имг11.гиф',
'имг12.гиф', 'имг13.гиф', 'имг14.гиф'];

функција рандОрд (а, б) {ретурн (Матх.роунд (Матх.рандом ()) - 0,5);} вар им = []; за
(вар и = 0; и <15; и ++) {им [и] = нова слика (); им [и] .срц = плочица [и]; плочица [и] =
''; плочица [и + 15] =
тиле [и];} функција дисплаиБацк (и) {доцумент.гетЕлементБиИд ('т' + и) .иннерХТМЛ =
'

хеигхт = "60" алт = "назад" \ /> ';} вар цх1, цх2, тмр, тно, тид, цид, цнт;
виндов.онлоад = старт; функција старт () {фор (вар и = 0; и <= 29; и ++)
дисплаиБацк (и); цлеарИнтервал (тид); тмр = тно = цнт = 0; тиле.сорт (рандОрд
); цнтр (); тид = сетИнтервал ('цнтр ()', 1000);} функција цнтр () {вар мин =
Матх.флоор (тмр / 60); вар сец = тмр% 60; доцумент.гетЕлементБиИд ('цнт'). Вредност =
мин + ':' + (сек <10? '0': '') + сек; тмр ++;} функција дисп (сел) {иф (тно> 1)
{цлеарТимеоут (цид); цонцеал ();} доцумент.гетЕлементБиИд ('т' + сел) .иннерХТМЛ =
плочица [сел]; ако (тно == 0) цх1 = сел; елсе {цх2 = сел; цид = сетТимеоут ('скрива ()',
900);} тно ++;} функција скрива () {тно = 0; иф (плочица [цх1]! = плочица [цх2])
{дисплаиБацк (цх1); дисплаиБацк (цх2);} елсе цнт ++; ако је (цнт> = 15)
цлеарИнтервал (тид);}

Заменићете имена датотека са сликама назад и плочица са именима датотека ваших слика.

Не заборавите да уредите слике у свом графичком програму тако да су све квадратне 60 пиксела, тако да се не требају предуго учитавати (комбинована величина 16 слика коришћених за мој пример је само 4758 бајтова, тако да не бисте требали имати проблема да задржите укупну вредност испод 10к).

Корак 2: Изаберите доњи код и копирајте га у датотеку под називом мемори.цсс.

.блк {ширина: 70пк; висина: 70пк; оверфлов: хидден;}

Корак 3: Уметните следећи код у главни део ХТМЛ документа ваше веб странице да бисте позвали две датотеке које сте управо створили.

4. корак: Изаберите и копирајте доњи код, а затим га сачувајте у датотеци која се зове мемориб.јс.

// Игра са меморијском концентрацијом са сликама - Боди Сцрипт
// ауторска права Степхен Цхапман, 28. фебруара 2006., 24. децембра 2009
// можете копирати ову скрипту под условом да задржите обавештење о ауторским правима

доцумент.врите ('

Корак 5: Сада остаје само да додате игру на своју веб страницу на којој желите да се појави уметањем следећег кода у ваш ХТМЛ документ.