программный код дудл джамп

Создание игры Doodle Jump для Android в Intel XDK за 2 часа на JavaScript с нуля

Непривычно для меня писать статьи спустя такое долгое время, так как я привык к записи материала на видео, где можно свободно что-либо рассказывать. И так уж получилось, что решил написать статью об Intel XDK, но не просто обзор возможностей, а разобрать среду на примере вполне конкретного проекта. Проектом таким для меня стал «клон» игры «Doodle Jump».

image loader

Часть 1. Подготовка проекта

Разработку я буду вести на JavaScript с использованием движка PointJS (если что, в гугле находится за минуту).

Самое начало создать новый пустой проект. Тут в принципе все достаточно просто:

2. 1. Внизу находим кнопку «Start a new project», и затем во вкладке «Templates» выбираем «Standart HTML5», и жмем «Create».

image loader

2. Теперь хитрым щелчком перейдем в настройки проекта (да-да, жать по этой синей папке):

image loader

3. Дальше в целом все логически понятно:

image loader

Поясню некоторые пункты:
App ID — это уникальный идентификатор вашего приложения, или же Company Domain
Whitelist — разрешенные запросы, которые приложению будет разрешено совершать
Developer Certificate — сертификат приложения. Если он отсутствует, создайте с помощью этого выпадающего меню:

image loader

Заполните достоверными данными, во избежание дальнейших проблем.
После заполнения сертификата его можно будет выбрать в качестве сертификата приложения.
Crosswalk Runtime — Определяет, будет ли Cordova интегрирована в ваше приложения (Embedded), или нет (Shared)

4. Заполните иконки:

image loader

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

По поводу Splash Screen, это экраны загрузки вашего приложения, которые отображаются пользователю, пока ваше приложение грудится. Как правило это занимает обычно чуть менее 2-х секунд, но за это время вы можете показать, например, логотип чего-нибудь или вставить рекламу.

Так как игру мы делаем для Android, остальные ОС и платформы мы отключаем:

image loader

На этом с настройкой приложения мы закончили. Переходим к подготовке самого проекта.

Часть 2. Подготовка файлов

Я для создания игры воспользуюсь игровым движком PointJS, удобная штука весом в 60кб, полностью кроссплатформенная и неплохо оптимизированная. Подготовим проект:

1. Откроем папку проекта в ОС (Show in OS):

image loader

Затем перейдем в папку «www», это и есть наша рабочая папка. Удаляем из нее все, и вставляем движок и с файлом index.html:

image loader

Эти файлы я скачал с сайта PointJS.

Во вкладке «Develop» мы с вами попадаем в (для кого-то привычный) редактор Brackets, и в файле index.html видим следующий код:

Тут уже добавлены какие-то переменные, что-то определено заранее (читаем комментарии в коде). В графе «Emulate» настраиваем понравившийся нам телефон и его ориентацию с масштабированием, заодно убеждаемся, что все работает:

image loader

С файлами разобрались, проект запускается, все хорошо, переходим к основным этапам создания игры.

Часть 3. Создание игры
Наверное заметно, что у нас много объявлений разных ссылок и переменных, вынесем их в отдельный файл (новые строки прокомментированы):

Фоном в игре «Doodle Jump» служит «тетрадный лист», то есть клеточки, для создания такого эффекта создадим файл grid.js со следующим содержанием:

Читайте также:  коды пассажирских вагонов ржд

Помним, что фон у нас закрашивается серым цветом, потому, если отрисовать белые прямоугольники на расстоянии 5px друг от друга, то из-за этих промежутков между ними и получится сеточка.

Теперь, чтобы отрисовать сетку, нам достаточно в любом игровом цикле вызвать функцию drawGrid() и у нас фон зальется сеткой:

image loader

Хорошо, заливать фон сеткой, это конечно хорошо, но мы ведь игру делаем! Поэтому идем дальше!
Теперь, хорошо бы, сделать меню для игры, чтобы игрок видел свой рекорд, видел сколько он набрал за один уровень и смог начать игру сначала, если проиграет (при проигрыше выкидывать в это же меню). Для этого создадим еще один файл и заполним его:

Но мы помним, что файле index у нас запускается сразу цикл «game», давайте это исправим:

Смотрим на результат:

image loader

При нажатии на «Новая игра» у нас возникает ошибка, ведь у нас не определен игровой цикл «game» и нет функции «createLevel», но нас это пока не волнует, создадим с вами игровой цикл «game» и временно поставим запуск игры на него, подправив команду «startLoop».

Опишем игровой цикл:

Сейчас, если игру запустить, у нас полетят ошибки, поэтому функцию drawLevel пока закомментируем, а вот функцию «drawPlayer» сейчас опишем. Создаем новый файл:

Сначала картинка игрока:

image loader

Функцию смещения камеры вы можете посмотреть в API к движку. Кратко скажу, что мы плавно двигаем камеру к позиции игрока, при этом слегка сместив камеру ниже на 500*del пикселей, чтобы он был немного внизу. При этом влево и вправо камеру не двигаем, её центр всегда смотрит на половину ширины экрана (width/2).

Если запустим, то увидим следующую картину:

image loader

Теперь пришло время раскоммментировать функции «createLevel» и «drawLevel», если вы их комментировали. Создадим еще один файл, и заполним его:

image loader

Вот и все, больше никаких файлов создавать не нужно. Игра в своем минимальном виде готова:

image loader

Теперь пояснения:
del — это делитель который множитель, который используется для домножения на него всех значений в пикселях. Так ак высота экрана может быть разной, то и этот множитель на разных экранах меняется, делая и остальные объекты, которые домножат свои размеры на него — динамически масштабируемыми.

Delta-Time, он же переменная dt, это временной фактор. Время в милисекундах, прошедшее от последнего отрисованного кадра до текущего, используется для сгалживания анимации и скоростей при движении, когда игра запускается на устройствах с разной мощностью.

Теперь о компиляции. Она происходит на сервере intel XDK, что хорошо для тех, у кого слабые компьютеры.
И плохо для тех, кто точно знает, что каждый второй хочет украсть его идею

В целом тут сложностей возникнуть не должно, есть вкладка «Build», на которой вы просто выбираете для какой ОС собирать проект, указываете пароль от сертификата, и, это всё. После компиляции вам придет ссылка на загрузку готового проекта на почту, и так же скачать можно прямо из программы. После загрузки файлов с сервера они удаляются.

Скачать исходник проекта: Скачать архив

Для запуска можете открыть файл index.html в Google Chrome, открыть консоль (CTRL+SHIFT+J) и включить режим эмуляции сенсорного экрана, это позволит попробовать поиграть в игру без установки intel XDK.

image loader

Скачать готовый APK: Скачать APK
Его уже нужно запускать либо в эмуляторе, либо установить на реальное устройство.

Для лучшего понимания процесса разработки прикладываю видео:

Источник

Создание Doodle jump на HTML5

image loader
Здравствуйте, Хабражители!
В этом топике я хочу рассказать о том, как я создал браузерную игру «DoodleJump» на HTML5 без использования каких либо то фреймворков. Для тех кто не знает, DoodleJump — это популярная мобильная игра где главный герой «doodler» бесконечно прыгает вверх по платформам, преодолевая различные препятствия, и собирая бонусы. Эта игра широко распространена почти на всех мобильных платформах, но приличной браузерной версии этой игры нет, поэтому я и решили написать браузерную версию этой игры, пусть даже управляемую клавишами а не гироскопом.

Читайте также:  код трудовой функции слесарь кипиа

Итак, начнем. Для начало обозначим сцену, где и будет все происходить:

и применяем к ней стили:

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

image loader

image loader

image loader

Вот пример стилей к элементу doodler:

Зная координаты расположения элементов на спрайте, мы можем залить все объекты по образцу выше.
А вот стили к пружинками и платформам будут немного отличаться, так как они лежат в контейнере, и остальные параметры к ним будут задаваться из java-скрипта:

После того как мы создали все объекты на сцене и придал им стили, мы можем приступать к написанию java скрипта. Сначала для удобства написания кода игры, мы запихнем селекторы объектов в переменные:

Как я и говорил ранее, div’ы — контейнеры такие как: platforms и objects мы заполняем ява циклом:

где numPlatform — это количество платформ в контейнере (максимальное количество платформ, умещаемых на сцене, в нашем случае их 16). Для удобства можно создать функцию для перемещения платформ:

Теперь можно легко переместить любую платформу на желаемое место на сцене, и изменять её тип:

image loader

создадим еще несколько подобных функций:

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

Теперь рассмотрим основную часть ява-скрипта самой игры, бóльшая часть кода будет находится в функции frame(), и запускается 100 раз в секунду. Внутри этой функции дудлер будет постоянно проверятся на столкновение с монстрами и бонусами, а так же там будет находится цикл, внутри которого мы будим проверять дудлера на столкновение с каждой платформой по отдельности:

Что бы обеспечить падение сломанных платформ пишем:

Поэтому все платформы которые вышли за область видимости мы ставим на 30 пикселей выше предыдущей скрываемой платформы:

В зависимости от того, на какой бонус натыкается дудлер — выполняется одно из следующих условий: например если дудлер падает на пружинку:

Вот что происходит когда дудлер натыкается на другие бонусы:

Конечно это не все, осталось много всего необъясненного, но ведь мы рассматривали основную часть нашей работы. Думаю принцип понятен, далее нам оставалось сделать так чтобы сложность игры увеличивалась в зависимости от набранных очков:

image loader

далее мы добавили заставку (с возможностью пропуска), меню, рекорды, справку, меню паузы, звуковое сопровождение, и информацию о достижениях после падения дудлера:

image loader

При запуске игры, она обращается к серверу и получает список результатов, который доступен по кнопке «Рекорды». Если пользователь преодолевает минимальный рекорд, (расположенный в списе на 16-ой строчке), то игра спрашивает его никнэйм, далее в зависимости от набранных очков располагает его на определенной позиции, смещая меньшие рекорды вниз.

Читайте также:  можно ли писать свой cvc код

Источник

Lima Sky

Снимки экрана

1x1 42817eea7ade52607a760cbee00d1495

1x1 42817eea7ade52607a760cbee00d1495

1x1 42817eea7ade52607a760cbee00d1495

1x1 42817eea7ade52607a760cbee00d1495

1x1 42817eea7ade52607a760cbee00d1495

Описание

Играйте в эту БЕСПЛАТНУЮ версию мега-хита Doodle Jump и узнайте сами, что уже знают миллионы игроков по всему миру:

DOODLE JUMP это БЕЗУМНО ЗАХВАТЫВАЮЩАЯ ИГРА!

В Doodle Jump Вы управляете персонажем, называемым Doodler—используя некоторые из самых тонких и точных элементов управления наклоном Вашего устройства—Вы двигаетесь в прыжке выше, выше и выше по листу бумаги в клетку, собирая реактивные ранцы, уклоняясь от черных дыр и стреляя в злодеев из носа по всему пути.

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

11 невероятных миров
сломанные, перемещающиеся, исчезающие, подвижные, и ЛОМАЮЩИЕСЯ платформы для прыжков
РЕАКТИВНЫЕ РАНЦЫ, ШАПКИ С ПРОПЕЛЛЕРОМ, РАКЕТЫ и пружины, на которых Вы можете взлететь выше
НЛО, черные дыры, монстры, капканы на медведей!
прыжки на монстрах в стиле MARIO
возможность делиться очками с Вашими друзьями!
соревнования против друзей!
таблицы лидеров и достижений!
Как играть: Наклоняйте устройство влево или вправо, касайтесь экрана для выстрелов.
Пожалуйста, не играйте в Doodle Jump, когда Вы управляете автомобилем и помните: Doodle Jump это Безумно Захватывающая Игра!
* Это ПОЛНАЯ, БЕСПЛАТНАЯ версия Doodle Jump поддерживаемая рекламой.

Источник

Lima Sky

Screenshots

1x1 42817eea7ade52607a760cbee00d1495

1x1 42817eea7ade52607a760cbee00d1495

1x1 42817eea7ade52607a760cbee00d1495

1x1 42817eea7ade52607a760cbee00d1495

1x1 42817eea7ade52607a760cbee00d1495

Description

Play this FREE version of the mega-hit game Doodle Jump and find out for yourself what millions of players around the world already know:

DOODLE JUMP IS INSANELY ADDICTIVE!

In Doodle Jump, you guide Doodle the Doodler—using some of the most subtle and accurate tilt controls in existence—on a springy journey up, up, up a sheet of graph paper, picking up jet packs, avoiding black holes, and blasting baddies with nose balls along the way.

Laugh with delight as Doodle blows past other players’ actual score markers scribbled in the margins. And be warned: this game is insanely addictive.

FEATURES:
— 11 incredible worlds
— broken, moving, disappearing, moveable, and EXPLODING platforms
— JET PACKs, PROPELLER HATS, ROCKETS, and springs that fly you higher
— UFOs, black holes, monsters, bear traps!
— jump on monsters to bring them down MARIO-style
— Share scores with your friends!
— Race agains friends!
— Global leaderboards, achievements!

How to play:
Tilt to move left or right, tap the screen to shoot.

——————————
*Please don’t Doodle Jump and drive, and BE WARNED: Doodle Jump is Insanely Addictive!
** This is a FULL, FREE version of Doodle Jump supported with advertising.

Источник

Doodle Jump 2 4+

ВНИМАНИЕ: безумно затягивает‪!‬

Lima Sky

Снимки экрана (iPhone)

1x1 42817eea7ade52607a760cbee00d1495

1x1 42817eea7ade52607a760cbee00d1495

1x1 42817eea7ade52607a760cbee00d1495

1x1 42817eea7ade52607a760cbee00d1495

1x1 42817eea7ade52607a760cbee00d1495

1x1 42817eea7ade52607a760cbee00d1495

1x1 42817eea7ade52607a760cbee00d1495

Описание

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

Разблокируйте все уровни и соберите всех персонажей! Побейте рекорды своих друзей и станьте новым королем прыжков Doodle!

— Мир пещерных людей с тираннозаврами, трицератопсами, падающими камнями, доисторическими черепахами…

— Пустынный мир с зыбучими песками, джиннами, скорпионами, пустынными монстрами…

— Сонный мир с блеющими овцами, монстрами-подушками, светлячками, подушками-платформами…

— Мир авиаторов с вертолетами, реактивными платформами, винтовыми платформами…

— Космический мир с платформами из лунного сыра, платформами, пожирающими чудовищ, космическими кораблями, роботами, ракетными циклопами…

— Дождливый мир с грязью и лужами на платформах, ливнем, монстрами в плащах…

— Мир дискотек с дискотечными платформами, диско-шар монстрами…

Источник

Поделиться с друзьями
admin
Здоровый образ жизни: советы и рекомендации
Adblock
detector