52. Puzzle Part3. Прикручиваем игровую логику

Game – Серия статей посвященных разработке flash-игр на языке ActionScript. Игры для соц.сетей и мобильных платформ iOS, Android.
http://flashpress.ru/blog/category/game/
Создаем flash-игру Пазл(Puzzle-game):
  1. Puzzle Part1. Генерируем сетку пазла
  2. Puzzle Part2. Разрезаем картинку на кусочки
  3. Puzzle Part3. Прикручиваем игровую логику
  4. Puzzle Part4. Создаем игровое меню
  5. Puzzle Part5. Добавляем уровни сложности (скоро)
  6. Хочу продолжение > хочу

В предыдущих двух статьях серии puzzle мы с вами научились создавать сетку пазла и резать картинку на кусочки пазлов. Давайте прикрутим к этому игровую логику. Т.е. чтобы можно было таскать элементы пазла и укладывать их на свои места.
наш порядок действий:

Помните в предыдущих двух статьях, в классе PuzzleGrid, когда мы создавали элементы пазла, мы принудительно отодвигали их друг от друга чтобы лучше разглядеть результат:

Так вот самое время убрать +50 из этих строчек, чтобы элементы пазла лежали плотно к друг другу.

Разброс элементов пазла

Вот как будет выглядеть функция Mix в классе PuzzleGrid:

Рисуем сетку под элементами пазла

Чтобы видеть куда будут уложены элементы пазла, нам надо нарисовать полупрозрачную сетку под элементами пазла. Посмотрите на скриншоте что я имею ввиду:
puzzle-part3-1
Для создания такой сетки, нам понадобится второй экземпляр класса PuzzleGrid. Т.е. сперва мы рандомно создаем игровую сетку, затем получаем из от неё состояние сетки(т.е. где какой элемент), а затем создаем вторую сетку методом клонирования. Подправим сперва класс PuzzleElement:

Из изменений, мы перенесли применения фильтров в метод set Image, т.к. эти фильтры нужны только в том случаем, если этот элемент создан для нарезки картинки. Добавились новый метод Background, который рисует элемент пазла для фона(применяется соответствующий фильтр). Как вы уже заметили, мы еще в этом классе вместе параметров left, top, right и bot используем объект data класса ElementData. Это сделано для того чтобы объединить четыре параметра в один, для того чтобы можно было получить список таких параметров для создания копии сетки для фона. Вот как выглядит класс ElementData:

Метод toString здесь носит вспомогательный характер, для вывода в trace сообщения. Метод isEmpty проверяем является ли элемент тестовым, который был создан для определения размера элемента пазла.

Класс PuzzleGrid выглядит вот так:

Таскание и бросание элементов пазла

Добавим в класс PuzzleElement метод set Selected, этот метод будет вызываться в момент когда мы наводим мышку на фоновый элемент пазла при таскании элемента пазла с картинкой:

Окончательный вид класса PuzzleGrid:

В этом классе мы использовали собственное событие GridEvent. Вот как должен выглядеть класс события GridEvent:

Главный класс приложения PuzzleApp выглядит так:

Вот такая вот флешка у вас должна получится в итоге:

Здесь должна быть флешка. Установите Flash Player

Скачать исходники можно здесь.

Продолжение урока читайте здесь Puzzle Part4. Создаем игровое меню
Создаем flash-игру Пазл(Puzzle-game):
  1. Puzzle Part1. Генерируем сетку пазла
  2. Puzzle Part2. Разрезаем картинку на кусочки
  3. Puzzle Part3. Прикручиваем игровую логику
  4. Puzzle Part4. Создаем игровое меню
  5. Puzzle Part5. Добавляем уровни сложности (скоро)
  6. Хочу продолжение > хочу

Да прeбудет с вами Flash.
Serious Sam
Эту статью прочитали 2120 раз

Возникли вопросы по статье? Не стесняйтесь спрашивать в комментариях или любым другим способом на странице Контакты .

Присоединяйтесь к нам в социальных сетях: ВКонтакте , Twitter и Facebook
Понравилась статья? Буду благодарен если вы поделитесь ссылкой с друзьями:


Комментарии ВКонтакте:




Комментарии Facebook:




Комментарии WordPress: