Главная RSS Онлайн игры WarCraft Приколы Карта сайта О блоге Поиск

“Муж просыпается злой, ругается с женой и говорит ей:- быстро собери свои вещи и..., в это время звонит телефон жены и она отвечает через громкоговоритель -да папа я тебя слушаю. -дочка, я тебе перевёл на карту 20 миллионов, 10 тебе, а 10 можешь мужу отдать и закончил разговор. Она поворачивается к мужу и говорит: -извини, папа перебил тебя, мне собрать свои вещи и куда с ними? -Что значит куда? Собери свои вещи и принеси мне я хочу их постирать!” - анекдот дня


Разработка программ игр и приложений->Как создавать игры на html 5? Разработка интересной головоломки Space Checkers + исходники

Как создавать игры на html 5? Разработка интересной головоломки Space Checkers + исходники

0

Добавил: Катя Самохина

Дата: 30.10.2020


В данном уроке будет рассказано, как создать логическую головоломку. За основу возьмем небольшую игру. Для реализации кода отлично подойдет html5. Она проста в использовании и не требует установки сторонних программ. Почему выбран именно жанр “logic game”? Ответ прост, пользователям нравятся такие игры. Сильно увлекают игры, как стрельба по шарикам или передвижение предметов. Так же это отличная возможность получить новые знания и узнать, как создавать игры.


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


Как создавать игры на html 5. Интересная головоломка?


Логических игр, где требуются думать, существует много, например: судоку, нарды, шахматы, маджонги и так далее. В нашем случае мы создадим необычную игру, чем-то напоминающие шашки. Сходство заключается в том, чтобы перепрыгивать через фигуры убирая их с доски. Игра, которую мы начнем разрабатывать, называется space checker. Пример на скриншоте.
как_создавать_игры_рис1


Графику добавлять не будем, используем для отрисовки объектов встроенные функции: fillRect, arc и strokeRect (обозначение границ квадрата).


Как создавать игры на html 5. Правила.


Прежде чем приступим к написанию кода, перечислим главные задачи, которые должен выполнять скрипт.
  1. Фишки должны перепрыгивать соседние квадраты, если там есть фигура.

  2. Соответственно при прыжке убирается фишка, как в шашках.

  3. Условия победы выполняется только в том случае, если на территории останется одна фигура. Важно заранее продумать, все возможные комбинации прыжков, чтобы в конечном итоге объекты в финале расположились рядом, и можно было завершить игру одним удачным перепрыгиванием. Примерно такие правила. Если игрок допустит ошибку, объекты расположатся в разных углах области, то появится сообщение о поражении. Пример можно увидеть на картинке ниже. Была сыграна неправильная партия и теперь нельзя завершить игру.


как_создавать_игры_рис2


Как создавать игры на html 5. Разработка скрипта


Мы не будем писать много разных классов. Код будет достаточно прост в освоении, наша цель показать, как работает алгоритм данной игры на практике. Создадим документ html и назовём его game.html и добавим туда следующий код.
как_создавать_игры_рис3


Подключен дополнительный скрипт point.js, который нужен для хранения данных координат. Код в JavaScript “point”, выглядит следующим образом.
как_создавать_игры_рис4


Это единственный код, который будет подключен, остальные мы напишем внутри html документа и начнем с основных переменных. Создайте внутри тега script функцию window.onload, она отвечает за срабатывание кода во время загрузки документа. При старте страницы первым делом срабатывает main, где создается холст и необходимый массив. Ни один код не обходится без переменных, поэтому весь список заранее создан в начале. Какие данные будут записаны в хранилище? Вот список “variable”, с подробным описанием.


  1. Canvas (холст) – здесь мы нарисуем все необходимые объекты. Чтобы начать выводить требуется создать context.

  2. BB – сюда присваивается функция getBoundingClientRect, которая отвечает за вывод информации о рабочей прямоугольной области: ширина, высота, отступы по краям сверху и снизу.

  3. OffsetX, OffsetY – отступы сверху и снизу.

  4. startX, startY – стартовые позиции щелчка мыши.

  5. oldX, oldY – при старте эти переменные фиксируют начальные позиции фишек. Щелчок мыши заменяет начальные данные на x и y координат мыши. Когда пользователь перетащит и отпустит кнопку мыши, то oldX и oldY получат новые данные.

  6. fieldArray – массив, состоящий из нулей и единиц. Один - это заполненная клетка фишкой.

  7. Shapes – (array), сюда сохраняются все наши фишки.

  8. possibleLandings – записывается результат проверки, в случае, если это та фишка, которую бьют. Чтобы они стали таковыми должно сработать условие, несколько фигур вместе, не перекрываемые через клетку другими фишками, как в шашках.

  9. LocalX, localY – при щелчке мыши на фишке, к localx и localy присваиваются результат который получится при расчете: mousePos – arcPos + arcRad / 2. Что означает координаты мыши, вычесть позицию окружности и прибавить половина радиуса этого круга.

  10. 10. pickedMonster – сюда добавляется данные захваченного “юнита”, его координаты и индексы (i,j).


Перечисление всех данных отображено на картинке.
как_создавать_игры_рис5


Функция main – создание холста и занесения фишек в массив


Все игры начинаются с интерфейса пользователей (Gui). С помощью gui игроки взаимодействуют с окружающим миром, собирают предметы и открывают новые локации. В нашем случае интерфейс довольно примитивен, в него входит небольшое поле 500x500 пикселей и расположенные на нем объекты.


Разумеется, при желании можно добавить графики и сделать более красивый дизайн, но наша задача показать, как работает программа. Поэтому в главной функции будет обычная отрисовка холста и создание массива, где будут добавлены наши фишки. Чтобы отобразить “юнитов” и создать поле, так же требуется вызвать draw. Вот пример кода main, с комментариями:
как_создавать_игры_рис6


Draw – создание игрового поля и моделей


Территория, как и в шахматах, на которой происходят действия, будет состоять из квадратов. Чтобы вывести игровую область воспользуемся массивом fieldArray и двумя циклами. В теле цикла for, используем fillRect (для создания прямоугольника) и stroke для рисования границ каждого квадрата.


В основной функции был создан массив “shape”, куда были добавлены параметры обозначающие фишки. Теперь пора их вывести через цикл for и разместить по координатам оси X и Y.


Ранее писали про переменную possibleLandings, сейчас нужно выполнить проверку условия, есть ли по соседству фишки, которые можно убить и чтобы они не блокировались. Если условие выполняется - нарисовать зеленый квадратик rect, в противном случае - красный.
как_создавать_игры_рис7


Примечание: игра, как писалась выше, сильно похожа на шашки, но есть отличие, если перепрыгивание в шашках происходит наискосок, то здесь по горизонтали и вертикали.
Пример кода с комментариями.
как_создавать_игры_рис8


В цикле shapes вызывается circle, где рисуется окружность, пример кода ниже.как_создавать_игры_рис9


Методы управления мышью myDown, moveMonster, dropMonster


как_создавать_игры_рис9


Методы управления мышью myDown, moveMonster, dropMonster


Для захвата и перемещения объектов, нужно сразу задействовать три функции. Пример похожего решения был использован при создании пазлов. Там каждый фрагмент перетаскивался в нужный слот на игровом поле. Раздел “puzzle”, расположен по этой ссылке онлайн пазлы собирать бесплатно без регистрации.


Работа DragMove, начинается с нажатия кнопки мыши и срабатывания функции myDown. Здесь обозначается позиция курсора мыши по x и y. Дальше идет цикл с условием, внутри проверяется щелчок мыши по “юниту”. Dragok и isDragging - обязательно нужно присвоить true. Следом после булевых переменных идет массив pickedMonster, в него записываются данные объекта, по которому был произведен щелчок мышкой, а именно позиции предмета по x,y.


Два идентификатора ранее добавленных в двойной цикл theRow и theCol, и последний параметр, который будет использовать pickedMonster, это id текущего цикла. Разобравшись с “ПикедМонстер”, создадим еще несколько переменных:

  • oldX и oldY – начальные координаты нашего объекта требуется добавить сюда.
  • localX и localY – расчеты, где от позиции мыши вычитается расположения “персонажа” и прибавляется половина радиуса круга “персонажа”.


Последнее, что требуется сделать, это запустить дополнительные события мыши (move, up) и выполнить проверку checkMonster. В самом конце функции startX и startY присваиваем позиции мыши (mx и my). Пока не будем трогать “проверку монстра”. Обсудим это в следующей главе – ниже. А теперь внимание на код, вот что получилось.
как_создавать_игры_рис10


Следующий пример работы moveMoster, он запускается, когда игрок нажимает кнопку на объекте. Тут все достаточно просто, в условии проверяется dragok, потом идут несколько переменных, позиций мыши mx, my и dx, dy. Они нужны, чтобы курсор находился в том месте, куда щёлкнет игрок от позиции объекта. Дальше цикл “отрисовка” с помощью “драв” всех параметров и как в предыдущем коде, startX и startY присваиваем координаты мыши.
как_создавать_игры_рис11


Последний код при отпускании кнопки срабатывает dropMonster. Он проверяет и удаляет фишки, если был зафиксирован прыжок.


Начинается работа метода с двух переменных dropX и dropY, они нужны для проверки номера квадрата, т.е. по x и y они будут начинаться вот так 0,1,2,3. Дальше программа в цикле, при отпускании кнопки мыши, проверяет все возможные варианты, где был совершен прыжок через одну фишку и соответственно legalMove присваивается true.


Дальше в условии legalMove проверяет, удалось ли перепрыгнуть монстра, ничего для этого не препятствует. Если да назначаем новые позиции, в противном случае возвращаем назад , где переменные oldX и oldY. Полностью код с комментированием.
как_создавать_игры_рис12


Функции проверки checkMonster и checkField


Ранее в myDown упоминалось про функции checkMonster. Она работает по такому принципу, проверяет бьющиеся фишки или нет. Вот пример.
как_создавать_игры_рис13


В целом если хотите продолжить разработку игры, потребуется поработать с меню и добавить кнопки выбора уровня. Этой теме посвящён другой урок, там будет объясняться, как сделать меню. Примерно вот такое.
как_создавать_игры_рис14


Подведем итоги. В этой статье мы узнали, как создавать игры и разработали простенькую игру space checkers, чем-то напоминающую шашки. Понравилась статья ставьте лайк, если что непонятно, задавайте вопросы в комментариях. На всякий случай вот исходники. Там есть комментарии, чтобы легче разобраться в коде.


Разработка программ игр и приложений->Как создавать игры на html 5? Разработка интересной головоломки Space Checkers + исходники


Перейти на главнуюВагон игр Назад

Просмотров: 1375

Комментарий к этой заметки:

Добавить ваш камментарий:

Введите капчу

 

Яндекс.Метрика