Вот версия классической игры памяти, которая позволяет посетителям вашей веб-страницы сопоставлять изображения в сетке с использованием 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'];
function randOrd (a, b) {return (Math.round (Math.random ()) - 0.5);} var im = []; за
(var i = 0; я <15; i ++) {im [i] = новое изображение (); im [i] .src = tile [i]; плитка [я] =
''; плитка [я + 15] =
tile [i];} функция displayBack (i) {document.getElementById ('t' + i) .innerHTML =
'height = "60" alt = "back" \ /> ';} var ch1, ch2, tmr, tno, tid, cid, cnt;
window.onload = пуск; функция start () {for (var i = 0; я <= 29; я ++)
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 =
мин + ':' + (сек <10? '0': '') + сек; tmr ++;} функция disp (sel) {if (tno> 1)
{clearTimeout (cid); conceal ();} document.getElementById ('t' + sel) .innerHTML =
плитка [sel]; if (tno == 0) ch1 = sel; еще {ch2 = sel; cid = setTimeout ('conceal ()',
900);} tno ++;} функция conceal () {tno = 0; if (плитка [ch1]! = плитка [ch2])
{displayBack (ch1); displayBack (ch2);} иначе cnt ++; if (cnt> = 15)
clearInterval (tid);}
Вы замените имена файлов изображений для назад и плитка с именами файлов ваших изображений.
Не забудьте отредактировать ваши изображения в графической программе, чтобы все они имели площадь 60 пикселей, чтобы они не загружались слишком долго (объединенный размер 16 изображений, использованных в моем примере, составляет всего 4758 байт, поэтому у вас не должно возникнуть проблем с сохранением итогового значения под 10k).
Шаг 2: Выберите код ниже и скопируйте его в файл с именем memory.css.
.blk {ширина: 70px; высота: 70 пикселей; переполнение: скрыто;}
Шаг 3: Вставьте следующий код в раздел заголовка HTML-документа вашей веб-страницы, чтобы вызвать два файла, которые вы только что создали.
Шаг 4: Выберите и скопируйте приведенный ниже код, а затем сохраните его в файл с именем memoryb.js.
// Концентрация памяти игра с изображениями - Body Script
// авторское право Стивен Чепмен, 28 февраля 2006 г., 24 декабря 2009 г.
// вы можете скопировать этот скрипт при условии сохранения уведомления об авторских правах
document.write (»'); для (var b =
0; б <= 4; b ++) {document.write ('ID = "т '+ ((5 * а) + б) +">');} Document.write (' ');} document.write ('
Шаг 5: Теперь осталось только добавить игру на свою веб-страницу, где вы хотите, чтобы она появилась, вставив следующий код в ваш HTML-документ.