"На карте великого мира Беларусь как кленовый листок..."

Данный проект был создан в рамках республиканского конкурса

по разработке компьютерных игр патриотической направленности.

Разработчик проекта: Дерюго Максим Станиславович, ученик 9"В" класса ГУО "Средней школы №20 г.Борисова", руководитель проекта Бадюля Александр Павлович

 

Целью проекта является: привлечение внимания и интереса к историко-культурному наследию и традициям белорусского народа, обогащение духовного наследия учащихся, воспитание гражданина-патриота. Развитие наблюдательности, пространственного и логического мышление учащихся.

В рамках проекта была создана "Историческая раздвижная головоломка". За основу взята простая игра "Пятнашки".

Пятна́шки — популярная головоломка, придуманная в 1878 году Ноем Чепмэном. Представляет собой набор одинаковых квадратных костяшек с нанесёнными числами, заключённых в квадратную коробку. Длина стороны коробки в четыре раза больше длины стороны костяшек для набора из 15 элементов (и в три раза больше для набора в 8 элементов), соответственно в коробке остаётся незаполненным одно квадратное поле. Цель игры — перемещая костяшки по коробке добиться упорядочивания их по номерам, желательно сделав как можно меньше перемещений.

Обычные, классические пятнашки - это "поле" 4x4 с 15-ю квадратами с цифрами 0т 1 до 15 и одним свободным местом, что б двигать "цифры". Задача - за минимальное время расположить "цифры" по порядку.

В ходе реализации проекта перед нами стояли следующие задачи:

1. Разработать онлайн игру, похожую на игру "Пятнашки", адаптировать её к сегодняшним достижениям в пространстве интернет.

2. Выбрать общую тематику для игры.

Выбор общей тематики:

Известная истина гласит, что без прошлого нет будущего. Именно бережное отношение к культурному наследию помогает сохранить крупицы истории, дабы передать их следующим поколениям. На сегодняшний день в Беларуси зарегистрировано более 5 тысяч объектов, имеющих историко-культурную значимость. В центре внимания нашего проекта - Замки Беларуси.

Мирский замок, Замок Радзивиллов в Несвиже, Бресткая крепость и т.д.

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

Animals crossing

Если вы видите, обычное изображение вместо головоломки,
убедитесь включен ли JavaScript или JQuery не совместим с браузером.


Вы можете найти больше примеров в Демо ».

Требования

Головоломка проверена начиная от Firefox 1.5 +, Internet Explorer 6 + 7 и Opera 9. Она также работает в Safari, Chrome.

Головоломка требует JQuery 1.2.1 или выше.

Если ли у Вас есть предложения, Вы нашли ошибки, или патчи? Напишите мне.

Как использовать

Возможности использования

  1. Скачать JQuery библиотеку JavaScript с страницы jQuery.
  2. Настроить HTML страницы и скопировать JQuery и Головоломку каталог сайта.
  3. Скопируйте следующие строки в <head> вашего HTML файла и настроить имена файлов, если это необходимо:
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.jqpuzzle.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery.jqpuzzle.css" />

Настройка раздвижной головоломки

Вариант 1 Добавление имя класса

Вставка изображения, на Вашу страницу и просто добавить класс = "Puzzle" в тег изображения. Вот и все!

Пример: Демо »

<img src="street.jpg" alt="Замки Беларуси" class="Puzzle" />
Вариант 2: Использование формата CSS

Эта опция позволяет вам контролировать наиболее важные особенности головоломки. Он расширяет Вариант 1 в формате CSS. Этот формат является просто второе имя класса, который применяется к изображению метки. Синтаксис для микро-формат (CSS класса) выглядит следующим образом:

jqp[-LANGUAGE]-rROWS-cCOLS[-hHOLE][-sSHUFFLE_ROUNDS][-FLAGS]

Заменить все UPPER CASE в случае с реальными значениями. Значения в скобках [] являются необязательными.

Пример 1: 3 ряда, 5 колонок, отверстие в положении 5Демо »

<img src="street.jpg" alt="Замки Беларуси" class="jqPuzzle jqp-r3-c5-h5" />

Пример 2: Немецкий, 5 строк, 5 столбцов

<img src="street.jpg" alt="Замки Беларуси" class="jqPuzzle jqp-de-r5-c5" />

Пример 3: 4 ряда, 4 колонки, 1 перетасовать по кругу

<img src="street.jpg" alt="Замки Беларуси" class="jqPuzzle jqp-r4-c4-s1" />

Пример 4: Французский, 3 ряда, 3 колонки, отверстие в положении 5, первоначально скрыть номера, скрыть движется / сек отображать

<img src="street.jpg" alt="Замки Беларуси" class="jqPuzzle jqp-fr-r3-c3-h5-NDE" />

Пример 5: Немецкий, 5 рядов, 7 колонн, первоначально части перемешать, скрывать кнопку Перемешать и секунды отображения

<img src="street.jpg" alt="Замки Беларуси" class="jqPuzzle jqp-de-r5-c7-SAE" />
Вариант 3: JQuery плагин синтаксиса

С помощью этой опции можно полностью контролировать все особенности раздвижной головоломки. Реализован как обычный плагин для jQuery. Он добавляет новый метод JQuery объекта. Это означает, что можно использовать всю мощь и элегантность JQuery. Программа делает всю работу: фильтрует элементы изображения и создает раздвижние.

Пример: плагин синтаксис без параметровДемо »

<script type="text/javascript">
    $(document).ready(function() {
        $('img').jqPuzzle(); // apply to all images
    });
</script> 

Можно также использовать различные селекторы как $('#box img') (apply to all images in '#box') или $('.puzzle') (apply to all images with class name 'puzzle'). См. страницу JQuery селекторы для получения дополнительной информации.


API: ()-метод

jqPuzzle(settings, texts)

Метод может иметь два необязательных аргумента. Первый параметр настройки объекта, который позволяет настроить раздвижные головоломки. Ниже можете найти полное описание объекта с его значениями по умолчанию. Если необходимо передать собственные настройки, не нужно указывать полный объект, просто определяем различные значения (и обращаем внимание на правильное вложение).

API: Параметры объекта с его значениями по умолчанию

var settings = {
    rows: 4,                    // Количество строк [3 ... 9]
    cols: 4,                    // Количество столбцов [3 ... 9]
    hole: 16,                   // Исходное положение отверстия [1 ... * строк столбцов]
    shuffle: false,             // Первоначальная перетасовка [true|false] 
    numbers: true,              // Первоначально показывать номера [true|false]
    language: 'en',             // Выбор языка [language code]

    // отображения дополнительных элементов управления GUI
     контроль: { shufflePieces: true, // 'Перемешать' кнопка [true|false] confirmShuffle: true, // спросить, прежде чем перемешать [true|false] toggleOriginal: true, // 'Оригинал' кнопка [true|false] toggleNumbers: true, // 'Нумеровать' кнопка [true|false] counter: true, // счетчик передвижений [true|false] timer: true, // счетчик секунд [true|false] pauseTimer: true // пауза, если кнопка "Оригинал" активна // [true|false] }, // выполнять действия, когда головоломка решена успешно : { fadeOriginal: false, // показать исходное изображение [true|false] callback: undefined, // обратного вызова пользовательской функции [function] // функции передается объект в качестве аргумента // который включает в себя поля "движения" и "секунды" callbackTimeout: 300 // Время в мс, после которого обратывается вызов }, // Скорость анимации и параметры
     анимации: { shuffleRounds: 3, // Количество перемешиваний [1 ... ] shuffleSpeed: 800, // Время в мс для выполнения перемешивания slidingSpeed: 200, // Время в мс на один ход fadeOriginalSpeed: 600 // Время в мс кроссфейда исходное изображение }, // Дополнительную информацию с помощью CSS
     стиля: { gridSize: 2, // Пространство между двумя частями в пикселях overlap: true, // если это правда, прилегающий участок границы будут перекрывать // применяется, только если GridSize установлен в 0 backgroundOpacity: 0.1 // прозрачность исходного изображения позади частей // [0 ... 1] (0 значит, нет) } }

Второй параметр в головоломке ()-метод текстов. Он содержит все строки, которые используются в пользовательском интерфейсе. Передавая свой ​​объект, вы можете изменить текст.

API: Текст объекта с его значениями по умолчанию

var texts = {
    shuffleLabel:           'Перемешать',
    toggleOriginalLabel:    'Оригинал',
    toggleNumbersLabel:     'Нумерация',
    confirmShuffleMessage:  'Вы действительно хотите, перемешать?',
    movesLabel:             'Перемещений',
    secondsLabel:           'Время'
} 

Обратите внимание, что головоломку можно включить на нескольких языках, которые можно напрямую установить с объектом настроек.


Ниже вы можете найти некоторые примеры использования плагина:

Пример 1: Настройки пользователяДемо »

<script type="text/javascript">
    $(document).ready(function() {
        // define your own settings
        var mySettings = {
            cols: 5,
            hole: 11,
            numbers: false,
            control: {
                toggleNumbers: false,
                counter: false,
                timer: false
            },
            animation: {
                shuffleRounds: 1,
                slidingSpeed: 100,
                shuffleSpeed: 200
            }
        };
        // пример настроек 'Мой рисунок'
        $('#Мой рисунок').jqPuzzle(Мои настройки);
    });
</script> 

Пример 2: Пользовательский текстДемо »

<script type="text/javascript">
    $(document).ready(function() {
        // определить свой собственный текст
        var myTexts = {
		    shuffleLabel:           'Смешать!',
		    toggleOriginalLabel:    'Помощь!',
		    toggleNumbersLabel:     'Помощь!!!',
		    confirmShuffleMessage:  'Действительно смешать?'
        };
        // изменить мой текст на всех изображениях
        $('img').jqPuzzle(null, myTexts);
    });
</script> 

Пример 3: Установить язык, добавить функцию обратного вызова, пересмотреть текстовую меткуДемо »

<script type="text/javascript">
    $(document).ready(function() {
        // определить свои собственные настройки
        var mySettings = {
            rows: 3,
            cols: 3,
            language: 'ru',
			success: {
                callback: function(results) { 
                    alert('Прозрачный ' + results.moves + ' Время прохождения ' +
                        + results.seconds + ' Секунд.');
                }
            }
        };
        // определить свой собственный текст
		var myTexts = {
            secondsLabel: 'Сек.'
        };
        // заменить настройки и мой текст на изображениях
        $('.Фото').jqPuzzle(Настройки, Текст);
    });
</script> 

Стайлинг

Головоломка работает с файлом CSS, которая включает стандартные темы. В зависимости от размера изображения. Можно настроить размеры шрифта или изменить общий вид раздвижные головоломки. Обратите внимание, что некоторые CSS свойства устанавливает сам скрипт, чтобы убедиться, что головоломка работает должным образом. Эти свойства могут быть перезаписаны пользователем определенных свойств.

Также можно изменить стиль головоломки на основе Image ID. ID будет присвоен после удаления изображения раздвижной головоломки. Таким образом, можно индивидуально выбрать стиль каждой головоломки использованием CSS селекторов, которые начинаются с # yourImageId вместо общего класса. Так, определяемые пользователем имена классов (в том числе CSS микроформатов) будут переданы головоломки и может быть использован для укладки.

Некоторые визуальные свойства можно установить только с помощью плагина синтаксиса, добавив стиль объекта внутри объекта настройки. См. описание параметров объекта для получения дополнительной информации.


См. примеры всех стилей Демо ».

Язык

Головоломка поддерживает вышеуказанные языки. Можно установить начальный язык с помощью CSS микроформатов или плагина синтаксиса. Таким образом, можно добавить свой собственный перевод. Возможно добавление различных языков.

ЧаВо (Часто задаваемые вопросы)

»Могу ли я использовать изображения с удаленных объектов в головоломке?

Конечно, можно! Просто введите полный путь к файлу изображения в атрибуте src тега изображения. Но имейте в виду, что изображение могут быть защищены авторским правом.

<img src="http://www.borisovschool20.by/jqPuzzle/street.jpg" class="jqPuzzle"/>

» Может головоломка масштабировать свои изображения?

Нет, простите. Головоломка запускается в браузере, и браузер некорректно отображает изображения, было принято решиние не выполнять эту функцию. Масштабирование изображений сначала с реальным размером обработки изображения.

» Есть ли какие-либо требования для моих фотографий?

Ну, полученные кусочки головоломки должны быть по крайней мере 30 пикселей в ширину и высоту. При этом кусочки становятся крошечные. Вы можете увеличить ваши оригинальные изображения или уменьшить количество строк / столбцов. Не стесняйтесь, чтобы ослабить это требование в исходный код.

» Что произойдет, если у пользователя не включен JavaScript?

Пользователь будут видеть исходное изображение, а не раздвижные головоломки.

» Некоторые специальные символы не отображаются правильно. Что происходит?

Похоже, кодировка вашей HTML страницы не соответствует одному из файлов головоломки JavaScript. Плагин файлы, закодированные в UTF-8.

Если вы не можете настроить кодировку вашей HTML страницы, вы можете явно указать кодировку для файлов JavaScript в тег:

<script type="text/javascript" src="jquery.jqpuzzle.js" charset="utf-8"></script/>