Добавете концентрацията на играта към уеб страница с JavaScript

Ето версия на класическата игра с памет, която позволява на посетителите на вашата уеб страница да съответстват на изображенията в мрежа с помощта на JavaScript.

Ще трябва да предоставите изображенията, но можете да използвате каквито и да е изображения, които харесвате с този скрипт, стига да притежавате правата за използването им в мрежата. Също така ще трябва да ги преоразмерите до 60 пиксела с 60 пиксела, преди да започнете.

Ще ви трябва едно изображение за гърба на „картите“ и петнадесет за „фронтовете“.

Уверете се, че файловете с изображения са възможно най-малки или играта може да отнеме твърде дълго време за зареждане. С тази версия ограничих скрипта до 30 карти, тъй като всички изображения ще направят страницата много по-бавна за зареждане. Колкото повече карти и изображения има страницата, толкова по-бавно ще се зарежда страницата. Това може да не е проблем за тези с добри широколентови връзки, но тези с по-бавни връзки могат да се смутят от времето, което отнема.

Ако не сте играли тази игра преди, правилата са много прости. Има 30 квадрата или картички. Всяка карта има едно от 15 изображения, като изображението не се появява повече от два пъти - това са двойките, които ще бъдат съпоставени.

Картите започват "с лицето надолу", прикривайки изображенията на 15-те двойки.

Целта е да се покажат всички съвпадащи двойки за възможно най-кратко време.

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

В тази версия на JavaScript, вие избирате карти, като щракнете върху тях. Ако двете, които изберете, съвпадат, те ще останат видими, ако не са, те ще изчезнат отново след секунда.

В долната част има брояч на времето, който проследява колко време ви отнема, за да съответствате на всички двойки.

Ако искате да започнете отначало, просто натиснете бутона на брояча и цялата таблица ще бъде променена отново и можете да започнете отново.

Изображенията, използвани в тази извадка, не идват със скрипта, така че, както беше споменато, ще трябва да предоставите свой собствен. Ако нямате изображения, които да използвате с този скрипт и не можете да създадете свой собствен, можете да потърсите подходящ клипарт, който е свободен за използване.

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

Етап 1: Копирайте следния код и го запишете във файл с име memoryh.js.

// Игра с памет за концентрация с изображения - Head Script
// авторски права Стивън Чапман, 28 февруари 2006 г., 24 декември 2009 г.
// можете да копирате този скрипт, при условие че запазите известието за авторски права

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

функция randOrd (a, b) {return (Math.round (Math.random ()) - 0.5);} var im = []; за
(var i = 0; i <15; i ++) {im [i] = ново изображение (); im [i] .src = плочка [i]; плочка [i] =
''; плочка [i + 15] =
tile [i];} функция displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'

височина = "60" alt = "обратно" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload = започне; функция start () {for (var i = 0; i <= 29; i ++)
displayBack (i); clearInterval (tid); tmr = tno = cnt = 0; tile.sort (randOrd
); CNTR (); tid = setInterval ('cntr ()', 1000);} функция cntr () {var min =
Math.floor (tmr / 60); var sec = tmr% 60; document.getElementById ('cnt'). Value =
min + ':' + (sec <10? '0': '') + сек; tmr ++;} функция disp (sel) {if (tno> 1)
{clearTimeout (cid); conceal ();} document.getElementById ('t' + sel) .innerHTML =
плочка [sel]; ако (tno == 0) ch1 = sel; иначе {ch2 = sel; cid = setTimeout ('скриване ()',
900);} tno ++;} функция скриване () {tno = 0; ако (плочка [ch1]! = плочка [ch2])
{displayBack (ch1); displayBack (ch2);} else cnt ++; ако (cnt> = 15)
clearInterval (tid);}

Ще замените имената на файлове с изображения за обратно и плочка с имената на файловете на вашите изображения.

Не забравяйте да редактирате вашите изображения във вашата графична програма, така че всички те да са квадратни 60 пиксела, така че да не отнемат много време за зареждане (комбинираният размер на 16-те изображения, използвани за моя пример, е само 4758 байта, така че не трябва да имате проблем със запазването на общия под 10k).

Стъпка 2: Изберете кода по-долу и го копирайте във файл, наречен memory.css.

.blk {ширина: 70px; височина: 70px; препълване: скрито;}

Стъпка 3: Поставете следния код в главната секция на HTML документа на вашата уеб страница, за да извикате двата файла, които току-що сте създали.

Стъпка 4: Изберете и копирайте кода по-долу, след което го запишете във файл, наречен memoryb.js.

// Игра с памет за концентрация с изображения - Body Script
// авторски права Стивън Чапман, 28 февруари 2006 г., 24 декември 2009 г.
// можете да копирате този скрипт, при условие че запазите известието за авторски права

document.write ( '

Стъпка 5: Сега остава само да добавите играта към вашата уеб страница, където искате тя да се появи, като поставите следния код във вашия HTML документ.