Добавьте игру «Концентрация памяти» на свою веб-страницу

Классическая игра «Концентрация» в легко добавляемом коде JavaScript

• Делиться
• флипборд
• Эл. адрес

• Бакалавр компьютерных наук, Государственный университет Северной Каролины

Стивен Чепмен (Stephen Chapman) — старший разработчик Oracle PL/SQL в SEI Financial Services с более чем 20-летним опытом разработки программного обеспечения и консультирования.

Вот версия классической игры на запоминание, которая позволяет посетителям вашей веб-страницы сопоставлять изображения в виде сетки с помощью JavaScript.

Предоставление изображений

Вам нужно будет предоставить изображения, но вы можете использовать любые изображения, которые вам нравятся, с этим скриптом, если у вас есть права на их использование в Интернете. Вам также придется изменить их размер до 60 на 60 пикселей, прежде чем начать.

Вам понадобится одно изображение для обратной стороны «карт» и пятнадцать для «лицевой стороны».

Убедитесь, что файлы изображений имеют как можно меньший размер, иначе игра может загружаться слишком долго. В этой версии я ограничил скрипт до 30 карточек, так как все изображения замедлят загрузку страницы. Чем больше карточек и изображений на странице, тем медленнее будет загружаться страница. Это может не быть проблемой для тех, у кого хорошее широкополосное соединение, но те, у кого более медленное соединение, могут расстроиться из-за времени, которое требуется.

Что такое игра с концентрацией памяти?

Если вы еще не играли в эту игру раньше, правила очень просты. Есть 30 квадратов или карт. На каждой карточке есть одно из 15 изображений, причем ни одно изображение не появляется более двух раз — это пары, которые будут совпадать.

Карты начинаются «лицом вниз», скрывая изображения 15 пар.

Цель состоит в том, чтобы найти все совпадающие пары за как можно более короткое время.

Игра начинается с того, что вы выбираете одну карту, а затем выбираете вторую. Если они совпадают, они остаются лицевой стороной вверх; если они не совпадают, две карты переворачиваются лицевой стороной вниз.Во время игры вам нужно будет полагаться на свою память о предыдущих картах и ​​их расположении, чтобы проводить успешные матчи.

Как работает эта версия концентрации

В этой версии игры для JavaScript вы выбираете карты, нажимая на них. Если выбранные вами два совпадают, они останутся видимыми, если нет, то снова исчезнут через секунду или около того.

Внизу есть счетчик времени, который отслеживает, сколько времени вам потребуется, чтобы сопоставить все пары.

Если вы хотите начать сначала, просто нажмите кнопку счетчика, и вся таблица будет перетасована, и вы сможете начать заново.

Изображения, используемые в этом образце, не поставляются со сценарием, поэтому, как уже упоминалось, вам придется предоставить свои собственные. Если у вас нет изображений для использования с этим скриптом и вы не можете создать свои собственные, вы можете поискать подходящий клипарт, который можно использовать бесплатно.

Добавление игры на вашу веб-страницу

Сценарий игры на память добавляется на вашу веб-страницу за пять шагов.

Шаг 1: Скопируйте следующий код и сохраните его в файле с именем памятьh.js.

// Концентрация памяти игра с изображениями — Head Script
// авторское право Стивен Чепмен, 28 февраля 2006 г., 24 декабря 2009 г.
// вы можете скопировать этот скрипт при условии, что сохраните уведомление об авторских правах

вар назад = 'назад.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) var im = []; за
(var i = 0; i < 15; i++) ' '; плитка[я+15] =
tile[i];> function displayBack(i) ' height="60" alt="back" />';> var ch1, ch2, tmr, tno, tid, cid, cnt;
окно.onload = запуск; функция start() displayBack(i);clearInterval(tid);tmr = tno = cnt = 0;tile.sort( randOrd
);кнтр(); tid = setInterval('cntr()', 1000);> function cntr() Math.floor(tmr/60);var sec = tmr%60;document.getElementById('cnt').value =
min+':'+ (функция sec disp(sel) 1)
document.getElementById('t'+sel).innerHTML =
tile[sel];if (tno==0) ch1 = sel;else 900);>tno++;> function hidden() else cnt++; если (цент >= 15)
очиститьИнтервал(ТИД);>

Вы замените имена файлов изображений на назад а также кафельная плитка с именами файлов ваших изображений.

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

Шаг 2: Выберите приведенный ниже код и скопируйте его в файл с именем память.css.

Шаг 3: Вставьте следующий код в раздел заголовка HTML-документа вашей веб-страницы, чтобы вызвать два файла, которые вы только что создали.

Шаг 4: Выберите и скопируйте приведенный ниже код, а затем сохраните его в файл с именем памятьb.js.

// Концентрация памяти игры с изображениями — Скрипт тела
// авторское право Стивен Чепмен, 28 февраля 2006 г., 24 декабря 2009 г.
// вы можете скопировать этот скрипт при условии, что сохраните уведомление об авторских правах

Шаг 5: Теперь осталось только добавить игру на свою веб-страницу, где вы хотите, чтобы она отображалась, вставив следующий код в свой HTML-документ.