Игра "Пятнадцать"

Демонстрация

Простая и многим с детства известная головоломка "Пятнадцать". Цель игры состоит в том, чтобы выстроить по порядку в четырех рядах пятнадцать фишек с номерами. Трудность заключается в том, что передвигать фишку допускается лишь на единственное незанятое место. Данная реализация игры представляет ее классический вариант. Для передвижения фишек следует щелкать по ним левой кнопкой мыши.

Установка

Данная реализация игры "Пятнадцать" использует JavaScript-фреймворк MooTools.
Для добавления игры на страницу Вашего сайта перепишите файлы из папок js и css в соответствующее месторасположение на Вашем сайте, затем включите следующий код между открывающим тегом <head> и закрывающим тегом </head>:

<link href="css/fifteen.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/mootools-core-1.3.2-full-compat-yc.js"></script>
<script type="text/javascript" src="js/fifteen.js"></script>
<script type="text/javascript">
  window.addEvent('domready', function() {
    $('fifteen').fifteen();
  });
</script>

Затем вставьте следующий код там, где Вы хотели бы поместить игровое поле:

<div id="fifteen"></div>

В этом примере элемент div с идентификатором "fifteen" будет родительским для игрового поля. Вы можете использовать собственный идентификатор. Тогда вызов $('fifteen').fifteen(); следует изменить соответственно, к примеру: $('content').fifteen();

Параметры

Вызов функции инициализации игры можно выполнять с использованием нескольких параметров:

rows: количество строк игрового поля. По умолчанию - 4.
cols: количество столбцов игрового поля. По умолчанию - 4.
cellClass: класс ячеек таблицы, содержащих цифры игрового поля. По умолчанию - "cell".

Например, вызов может выглядеть так: $('fifteen').fifteen({cols: 5, rows: 5, cellClass: 'td15'});

Обратите внимание, что в файле fifteen.css для ячеек игрового поля определен клаcc cell.