Как сделать игру для вк

Первые доработки и добавление приложения в каталог ВКонтакте

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

Из-за отсутствия кнопки «Превратить html-файл с игрой в популярное приложение» на этом этапе пришлось подумать, погуглить и почитать. Вариантов, к которым я пришел, было несколько:

1. Делать сайт с игрой.
2. Размещать игру в социальных сетях.
3. Делать мобильное приложение.

Прочитав ряд статей и обдумав свежую информацию, я выбрал второй пункт, а в частности — ВКонтакте, так как только об этой социальной сети я имел хоть какое представление.

Сказано — сделано. Залил игру на виртуальный хостинг, зашел в раздел VK Developers на сайте Вконтакте, нашел ссылку для создания IFrame-приложения, заполнил информацию и лицезрел свою игру, подгружаемой в iframe. Пока приложение не пройдет проверку, оно не появится в каталоге приложений и видно только создателю.

Тут ко мне пришло осознание того, что приложение выглядит малопривлекательно не только с визуальной точки зрения, но и с функциональной. Последовал мозговой штурм, по результатам которого была добавлена возможность выбора размера уровня (3х3, 5х5, 7х7, 9х9, 10х10) и немного переработан интерфейс.

Вывод

Чтобы немного переработать интерфейс и сделать его приятней для глаза (для моего субъективного глаза), мне пришлось часами смотреть на игру и думать о том, что я не знаю, как это сделать. Следствие: если не уверены в своих силах в какой-то из областей, лучше доверьте это тому, кому в этой области вы доверяете. Моя ошибка была в самонадеянности и нежелании делить лавры недостигнутого успеха с кем-то еще.

Превращение игры для себя в некое подобие социальной игры

Далее я наткнулся на статью «Запуск приложения во Вконтакте» (змейка), из которой узнал, что для одобрения приложения нужно реализовать функционал рейтинга пользователей.

И снова Яндекс, VK API, рисунки структуры базы данных… Продумав структуру БД и протестировав работу с VK API, я сел писать серверную часть и js-функционал взаимодействия с сервером. Функционал состоял в следующем: после загрузки index.html js обращается к серверу, получает рейтинги и выводит их на странице; при нажатии на кнопку с размером игрового поля начинается новая игра, а на сервере создается запись о начале игры этим пользователем; когда игра заканчивается, на сервер отправляются результаты (время и очки). За несколько часов я справился с этой подзадачей и радостно отправил игру на проверку, заплатив залог 10 голосов (внутренняя валюта ВКонтакте).

Первый час после отправки я каждые пять минут проверял не одобрили ли приложение, потом успокоился и стал ждать. Примерно через сутки пришел ответ «Заявка на проверку отклонена. Необходимо подключить сертификат безопасности.». Так как тема подключения SSL рассмотрена во многих статьях, упомяну лишь то, что воспользовался бесплатным сертификатом от startssl.com. После следующей проверки, приложение было одобрено и добавлено в каталог.

Вывод

Для того, чтобы сделать социальную игру, не нужно забывать про то, что значит «социальная». Моя ошибка состояла в том, что я сделал лишь обязательный рейтинг, даже не обдумывая другие варианты социализации игры.

Внешний вид

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

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

Дополнительный функционал

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

Уже смирившись с тем, что игра не займет вершину лучших игр в истории человечества, ради получения новых знаний решил добавить возможность покупки новых уровней за голоса. При этом эти уровни можно открыть бесплатно, если набрать нужное количество очков за все игры. Реализация заняла пару часов — спасибо документации VK API.

Вывод

За прошедшее время с момента реализации этого функционала я заработал один голос (примерно 3 рубля при выводе денег из системы) накануне написания статьи.

Реклама и посетители

В статье про змейку автор говорит о стартовом трафике за счет того, что приложение попадает в раздел «Новые». В момент добавления моего приложения (июль 2014 г.) эта функция стоила 1000 голосов (7000 рублей), поэтому я решил методом проб и ошибок рекламировать игру через таргетированную рекламу ВКонтакте. UPDATE: мне подсказывают, что сейчас размещение в блоке «Новые» снова бесплатно. Но для моего приложения эта функция уже недоступна, т.к. по новым правилам «на место в блоке могут претендовать качественные приложения, прошедшие модерацию менее 6 месяцев назад.»
При создании рекламы ВКонтакте есть много параметров задания целевой аудитории, но при этом также важно проверить, какой формат рекламы наиболее подходит. На выбор предоставляется четыре формата: «Изображение и текст», «Большое изображение», «Квадратное изображение» и «Специальный». Из-за отсутствия опыта первые 500 рублей я спустил практически без какого-либо результата, но потом понял, что нужно проверить разные целевые аудитории и, глядя на результаты, подбирать свою.
UPDATE: Стоит упомянуть о системе рекламы ВК:
Я пользовался только разделом Таргетинг, но упомяну, что на странице "Реклама ВКонтакте" можно выбрать пункт Реклама в сообществах. Интерфейс прост и понятен:
1. В разделе Бюджет можно пополнить баланс, с которого списываются деньги при запуске объявлений.
2. Экспорт статистики позволяет выбрать один из форматов данных: html, xls, csv.
3. Есть настройки оповещений (смс среди ночи это норма) и прав доступа пользователей к рекламным кампаниям.
4. Ретаргетингом не пользовался, но слышал хвалебные отзывы от нескольких друзей, занимающихся рекламой. Имея телефоны, адреса электронной почты или id ВК своих клиентов/пользователей, можно создавать группы пользователей, которым будут показываться отдельные объявления, построенные на том, что им уже был интересен определенный продукт.
5. И, наконец, внутри раздела «Рекламные кампании», для каждого созданного пункта добавляются объявления. При этом, каждое из них проходит премодерацию (ожидание доходило до 20 часов). С ограничением по количеству создаваемых объявления я не столкнулся, но при каждом запуске объявления происходит проверка наличия ста рублей на балансе на каждое объявление.
Расскажу про нюансы, которые для меня были открытием, как для новичка в этой отрасли. При создании объявления помимо естественных полей «Заголовок», «Описание» и «Изображение» есть целый ворох свойств для настройки целевой аудитории (укажу разделы: География, Демография, Интересы, Образование и работа, помимо которых можно выбрать тип мобильного устройства, операционную систему, браузер и принадлежность к категории «Использовал голоса ВКонтакте»), а также Настройки цены. У объявления задается способ оплаты (за переходы или показы) и стоимость перехода/1000 показов, при этом рядом показывается рекомендуемая стоимость перехода/1000 показов.

Выводы

1. Без какой-либо рекламы (таргетированная реклама, посты в сообществах, обзоры) посетителей я не получил. Но при этом, судя по моим субъективным ощущениям, с увеличением количества установок приложения повышается число уникальных пользователей за счет повышения позиции в списке Популярных приложений.
2. При использовании формата Специальный я получил максимальное количество переходов по своим объявлениям (300 переходов, из них 190 установок, на 83 500 показов за 150 рублей).
3. На рекламу моего приложения больше всего реагирует целевая аудитория Женщины до 18 лет.
4. Если выбирать способ оплаты «За показы», можно сэкономить.
5. Ни в коем случае не надо запускать объявление по рекомендуемой стоимости. Следует подбирать значение самостоятельно (иногда я начинал с стоимости в 20 раз меньшей, чем рекомендуемая), т.к. оно влияет на частоту показов, и можно обнулить свой баланс за считанные секунды с гораздо меньшей эффективностью.
6. Обязательно стоит указывать Лимит у каждого объявления, либо не пополнять баланс на крупные суммы.

Безопасность отправки данных

Как только я реализовал функционал отправки количества очков по завершению игры, меня стала посещать навязчивая мысль о нехороших игроках, которые могут посмотреть js-код и запросы с результатами, отправляемыми на сервер и отправить любое количество очков на сервер, ведь игра происходит полностью на клиенте, а на сервер можно отправить все, что угодно, главное притвориться браузером с нужным HTTP_REFERER. Потратив две недели времени, несчетное число нервов, но приобретя несколько седых волос, я понял, что подход с игрой (а точнее с рандомом) на клиенте работает только в случае повторения нескольких итераций следующего цикла:

• адовое запутывание кода;
• добавление уникальных для каждого запроса токенов;
• обфускация.

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

Вывод

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

Статистика

Это график уникальных посетителей по дням. Все пики, кроме последнего, соответствуют рекламным объявлениям, последний пик — необъяснимое повышение количества установок из раздела Популярное. Самый высокий пик соответствует объявлению в формате Специальный.

Итоги

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

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

У вас большие запросы!

Точнее, от вашего браузера их поступает слишком много, и сервер VK забил тревогу.

Эта страница была загружена по HTTP, вместо безопасного HTTPS, а значит телепортации обратно не будет.
Обратитесь в поддержку сервиса.

Вы отключили сохранение Cookies, а они нужны, чтобы решить проблему.

Почему-то страница не получила всех данных, а без них она не работает.
Обратитесь в поддержку сервиса.

Вы вернётесь на предыдущую страницу через 5 секунд.
Вернуться назад

Из стримера — в разработчики: как создать игру на VK Mini Apps за сутки и ноль рублей

Михаил Малышкин уже шесть лет занимается стримингом, а в этом году решил попробовать себя в новой роли — и создал игру Flappy Ring на платформе VK Mini Apps. Как стать разработчиком игр и какие первые шаги сделать, если нет опыта, — читайте историю успеха в четырёх главах.

Глава первая: карьера стримера

Привет! Меня зовут Михаил, мне 33 года. Играми увлекаюсь с детства. Как и у многих, всё началось с Dendy, потом появилась легендарная PlayStation 1, потом уже ПК. А в 2017 году я решил стримить, на это меня вдохновил популярный в те годы летсплеер Артур BlackSilverUFA. Особенно нравилась его манера повествования: создавалась такая тихая и спокойная атмосфера, будто бы сидишь с другом, и вы вместе играете в приставку.

В игре ВКонтакте Flappy Ring, которую я разработал, тоже спокойная и тихая атмосфера — я добавил фэнтезийный сюжет привычной аркаде

И вот я решил попробовать стриминг. По совету диванных экспертов начал с популярных сетевых боевиков типа Dota 2 и CS:GO, что, конечно же, было ошибкой. Четыре месяца проиграл впустую, потом призадумался — и перешёл на культовый Silent Hill.

Я стримил на многих площадках: Twitch, YouTube, Trovo, Mixer, WASD. Сейчас остановился на VK Play Live, и очень доволен, уже почти год веду здесь прямые трансляции на канале GLFire. Мне нравится, что я напрямую общаюсь с менеджерами и девелоперами, могу просто взять и рассказать им о своих хотелках, это большая редкость! Вижу, как площадка растёт и меняется на глазах — и если ещё год назад было трудно объяснить аудитории, почему я перешёл на VK Play, теперь меня все понимают.

Глава вторая: от стримера к разработчику

В ноябре 2022 года я начал проходить игру UNDECEMBER. На трансляции приходили в среднем 50–60 зрителей, и неожиданно одним из них оказался Алексей Лобачёв, известный в узких кругах инди-разработчик. Ему понравились мои стримы, он стал частенько на них заглядывать — и как-то предложил мне создать игру.

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

Несмотря на то что я учился на инженера-программиста, меня никогда не привлекал кодинг. Разработка не нравилась, даже когда я занимался сайтами в 18 лет — мне больше по душе редакторы и конструкторы вроде Tilda. Всё потому, что когда пишешь код руками, сложно визуализировать конечный результат.

В Flappy Ring нужно играть за птичку: преодолевать препятствия и собирать монеты

В итоге в мае 2023 года мы сели разрабатывать игру. Решили делать это в прямом эфире! Стрим длился почти девять часов — всё это время Алексей сидел со мной и терпеливо объяснял, что и как делать.

В Construct я провёл всего сутки чистого времени, и за 24 часа удалось создать приличную версию игры. Конечно, можно бесконечно допиливать и прокачивать проект — иногда на это требуются годы. Но чтобы сделать MVP и собрать первый фидбэк, достаточно выпустить самую простую версию.

Глава третья: игра Flappy Ring

Для первого раза я выбрал за ориентир Flappy Bird — это простая мобильная игра, где пользователь управляет полётом птицы и пытается избежать столкновения с трубами. При этом мне не хотелось делать очередную копию, поэтому я сел думать — и наткнулся на Flappy Souls, этакий гибрид Flappy Bird и мрачной магической Dark Souls. Идея мне понравилась.

Я решил переделать оригинальную Flappy Bird под стилистику тёмных фэнтезийных миров игры Elden Ring. В итоге собрал свою игру из ассетов с бесплатной лицензией на коммерческое использование. За графику и музыку тоже не пришлось платить, но на их подбор понадобилось много времени — больше, чем на то, чтобы продумать логику.

Я серьёзно подошёл к визуальным эффектам. Единственное, что я сгенерировал сам — это звуки: ударов, меню и взмахов крыльев. Всё без дизайнеров и музыкантов, финансовые затраты составили ноль рублей.

После этого я отправил получившуюся игру на модерацию в VK Mini Apps — это платформа, которая даёт доступ к открытым технологиям продуктов VK и позволяет создавать игры и мини-приложения. Всего за четыре дня игру одобрили и разместили в каталоге. На других площадках этот процесс занял бы в разы больше времени.

Игра монетизируется: пользователи видят короткую рекламу в перерывах между попытками

От App Store и Google Play я отказался сразу: шанс того, что игра там залетит, очень низкий из-за слишком высокой конкуренции. Ещё там нет готовых решений по рекламе игр на движке Construct. А по статистике, больше 60% HTML5-игр делаются на нём — он простой и функциональный.

Также мне очень хотелось мультиплатформенности: если разместить игру на игровой платформе ВКонтакте через VK Mini Apps, она будет работать и на iOS, и на Android, и даже на ПК. Да и проверить-посмотреть, как всё это работает у ребят, было интересно: хотелось познакомиться с правилами модерации, разобраться, как прикрутить рекламу и начать зарабатывать на играх.

Глава четвёртая: новые игры ВКонтакте

Сейчас в Flappy Ring сыграли уже больше 7 тысяч человек. Первый опыт оказался успешным, так что вскоре я создал вторую игру — аркаду с нехитрым названием «Соедини шарики».

Игра собрала сотни пользователей всего за неделю, и, судя по всему, многие из них не собираются останавливаться: каждый день от 80 до 150 человек возвращаются, чтобы соединять шарики, и проводят за игрой больше получаса в сутки. Я специально старался сделать «Соедини шарики» игрой, которая подойдёт для каждого, в ней всё до безумия просто.

Чтобы создать игру, мне понадобилось три дня. Два из них я потратил на физику, ещё день — на доработку графики, поля для шариков, кнопок и текстуры. Да, я много времени уделил физике, которая всегда меня интересовала: у шариков есть трение, угловая скорость и ещё много параметров. Конечно, это не Half-Life 2, но надо же с чего-то начинать.

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

В игре нужно соединять шарики разных размеров, форм, цветов и текстур

Я не собираюсь останавливаться на достигнутом. Планов много: хочу развиваться в разработке не только мини-игр, но и суперполезных сервисов ВКонтакте. Всех карт пока раскрывать не буду — ещё не знаю, как всё сложится. Главное — запустить несколько крутых игр и начать получать пассивный доход, чтобы заняться более серьёзными проектами: разработать их и вывести на рынок.

Публикация iFrame / HTML5 игры во ВКонтакте. Основы

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

Что потребуется для работы:
— Текстовый редактор (на ваш вкус)
— Любой браузер, поддерживающий HTML5
— Немного свободного времени

Часть 1. Игра на HTML
Думал, что можно использовать в качестве примера, пусть это будет та же игра, что и в видеоуроке про «Две шкатулки».
Суть ее проста: перед пользователем есть две шкатулки, кликом по любой из них либо прибавляется, либо отнимается значение «score».

Вся игра изнутри выглядит так:

И ее файлы с комментариями:

Файл index.html

onload=«startGame(Menu, 30)» означает, что игра будет запущена с игрового состояния Menu с частотой кадров в 30.

Файл menu.js

function createMenu() < // объявляем глобальные переменные selection= 0; // Создаем объект, указывающий на выделенный пункт menuSelector= createRect(vec2df(50, 50), vec2df(30, 30), '#CD8181'); // СОздаем два прямоугольника, отвечающие за выбор того или иного пункта menuItem1= createRect(vec2df(190, 100), vec2df(300, 50), '#AAA189'); menuItem2= createRect(vec2df(190, 220), vec2df(300, 50), '#AAA189'); >// Описываем игровое состояние Menu function Menu() < // Обновляем позицию курсора input.upd(); // Если пользователь кликнул if (input.lClick) < // Если клик по первому пункту меню if (input.onNode(menuItem1)) < // Если он уже был выбран, сменяем игровое состояние, иначе выделяем его if (selection == 0) < setActivEngine(Game); >else < selection= 0; >> // Аналогично для второго пункта меню else if (input.onNode(menuItem2)) < if (selection == 1) < setActivEngine(Records); >else < selection= 1; >> // Отменяем ввод, чтобы срабатывало только на однократные нажатия input.cancel(); > // Если выбран первый пункт, то двигаем выделение к нему if (selection == 0) menuSelector.moveTo(menuItem1, vec2df(-40, 0)); // Если второй, то ко второму if (selection == 1) menuSelector.moveTo(menuItem2, vec2df(-40, 0)); // Отрисовываем пункты меню menuItem1.draw(scene); menuItem2.draw(scene); // вращаем указатель menuSelector.turn(5); // отрисовываем menuSelector.draw(scene); // теперь выводим текст scene.drawTextOpt( vec2df(200, 115), // Позиция 'Сыграть!', // Текст 'bold 20px sans-serif', // Шрифт (аналогично CSS) 'white', // Цвет текста 'black', // Цвед обводки 2 // Толщина обводки ); scene.drawTextOpt( vec2df(200, 235), // Позиция 'Рекорды!', // Текст 'bold 20px sans-serif', // Шрифт (аналогично CSS) 'white', // Цвет текста 'black', // Цвед обводки 2 // Толщина обводки ); scene.drawTextOpt( vec2df(150, 20), // Позиция 'Две шкатулки!', // Текст 'bold 30px sans-serif', // Шрифт (аналогично CSS) '#478EA4', // Цвет текста 'white', // Цвед обводки 2 // Толщина обводки ); // добавляем плавности при движении и вращениях post.motionBlur(5); > // Игровое состояние Records, если пользователь выберет пункт меню "Рекорды" // Пока это меню нефункционально function Records() < // Если пользователь кликнул в любое место, отправляем его // обратно в меню и отменяем ввод if (input.lClick) < setActivEngine(Menu); input.cancel(); >// выводим текст scene.drawTextOpt( vec2df(150, 20), // Позиция 'Рекорды', // Текст 'bold 30px sans-serif', // Шрифт (аналогично CSS) '#478EA4', // Цвет текста 'white', // Цвед обводки 2 // Толщина обводки ); > 

Для справки

vec2df() — это конструктор объекта, хранящий в себе две переменные: x и y в вещественном типе, если нужно использовать только целые, для этого есть vec2di()

Файл game.js

// глобальная переменная для счета score= 0; // создаем игровые объекты function createGame() < // принимает значение 1, 2, 3 pos= 0; // "подкладка" под наши шкатулки panel= createRect(vec2df(20, 60), vec2df(510, 220), '#4E7B46'); // рисует звездочку cell= createLine( vec2df(100, 100), // Координаты в игре [ // масив координат для точек [40, 0], [0, 24], [20, -15], [30, 24], [0, -1] ], 1, // Масштабирование (1 - оригинальный) 'white', 2, // Цвет, толщина true, 'yellow'); // Закрашивать цветом // Первая шкатулка box1= createRect(vec2df(130, 110), vec2df(100, 100), '#FDF88D'); // вторая шкатулка box2= createRect(vec2df(330, 110), vec2df(100, 100), '#FDF88D'); >// теперь описываем игровую логику function Game() < // обновляем позицию курсора / тача input.upd(); // Если еще не известно (pos == 0), в какой шкатулке БУДЕТ звездочка, рандомим шкатулку if (!pos) pos= Random(0 , 2); // Если пользователь выбрал любую шкатулку (pos == 3) if (pos == 3) < // ждем пока он не кликнет по полю еще раз if (input.lClick) < // пересоздаем игру createGame(); // отменяем ввод input.cancel(); >> // если рандомно выпала первая шкатулка, позиционируем звездочку if (pos == 1) < cell.setPosition(vec2df(190, 160)); >// Аналогично для второй if (pos == 2) < cell.setPosition(vec2df(390, 160)); >// Если пользователь кликнул по полю if (input.lClick) < // если это первая шкатулка if (input.onNode(box1)) < // и если звезда находится в первой шкатулке if (pos == 1) < // окрашиваем шкатулку в желтый цвет // увеличиваем счет и сдвигаем шкатулку вверх box1.color= '#FFEB00'; score+= 1; box1.pos= vec2df(130, 50); >// если не угадал, то шкатулку окрашиваем в красный else < box1.color= 'red'; score-= 1; >// устанавливаем значение 3, независимо от того, какая была выбрана шкатулка pos= 3; > // Аналогично для второй шкатулки else if (input.onNode(box2)) < if (pos == 2) < box2.color= '#FFEB00'; score+= 1; box2.pos= vec2df(330, 50); >else < box2.color= 'red'; score-= 1; >pos= 3; > input.cancel(); > // отрисовываем панель panel.draw(scene); // затем звездочку cell.draw(scene); // и затем шкатулки box1.draw(scene); box2.draw(scene); scene.drawTextOpt( vec2df(150, 10), // Позиция 'Две шкатулки!', // Текст 'bold 30px sans-serif', // Шрифт (аналогично CSS) '#478EA4', // Цвет текста 'white', // Цвед обводки 2 // Толщина обводки ); scene.drawTextOpt( vec2df(440, 280), // Позиция 'Score: '+score, // Текст 'bold 20px sans-serif', // Шрифт (аналогично CSS) '#478EA4', // Цвет текста 'white', // Цвед обводки 2 // Толщина обводки ); > 

Код игры был написан мной давно на движке j2Ds.

Часть 2. Google Drive
После написания игры, ее отладки, тестирования, встает вопрос, о том, где же разместить игру. Основное правило ВКонтакте: игра должна быть размещена на внешнем ресурсе, и доступ к ней должен осуществляться с SSL (https://).
Бесплатных хостингов, дающих такую возможность, я не нашел. Но есть «Google Диск», который умеет воспроизводить пользовательские JS/HTML файлы. Здорово! Даже если ваша игра и задействует сервер, вы можете воспользоваться AJAX мостом к нему, настроив сервер и приложение должным образом, чтобы они могли нормально взаимодействовать. Из приложения вы можете коннектиться к любым серверам даже по простому http, внутрь iFrame ВК не лезет. Но клиент игры обязан быть доступен только через «https://»

Идем на ГД:

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

После откроется диалог выбора, я выбрал папку www (в которой лежит index.html) просто загрузил ее на сервер:

Как не сложно заметить, структура файлов такая же.
Следующее, что нужно сделать — это дать доступ папке, в которой лежит index.html.

В моем случае index.html находится в папке www, поэтому выходим на уровень назад и выделяем папку www и жмем на пиктограмму открытия доступа:

Включаем доступ по ссылке (вверху справа) и копируем ссылку для общего доступа:

Этим мы открыли доступ к нашей игре всем, кто загестрирован на google. В любом сервисе. Чтобы снять и это ограничение, переходим на вкладку «расширенные», и там активируем доступ для просмотра всем в интернете:

Теперь эту ссылку вставьте в любой текстовый редактор, будем ее модифицировать:
Ссылка выглядит так:
https://drive.google.com/folderview?id=0B09c3UoyWG0xfjBYaEtxWlNMdDFEbmUwVjhTb3pqV0l5SUI1NTVmLW1CTGE4Vm4zaHgyYmM&usp=sharing

Теперь жирным я выделю то, что нам нужно, остальное можно удалить:
https://drive.google.com/folderview?id=0B09c3UoyWG0xfjBYaEtxWlNMdDFEbmUwVjhTb3pqV0l5SUI1NTVmLW1CTGE4Vm4zaHgyYmM&usp=sharing

Удалив все НЕжирное, получим ссылку вида:
https://0B09c3UoyWG0xfjBYaEtxWlNMdDFEbmUwVjhTb3pqV0l5SUI1NTVmLW1CTGE4Vm4zaHgyYmM

Дописываем после https:// путь к googledrive.com/host и получаем ссылку вида:
https://googledrive.com/host/0B09c3UoyWG0xfjBYaEtxWlNMdDFEbmUwVjhTb3pqV0l5SUI1NTVmLW1CTGE4Vm4zaHgyYmM

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

Не теряйте модифицированную ссылку, она нам пригодится.

Часть 3. ВКонтакте

После того, как вы научились открывать вашу игру через Googledrive в браузере, переходим на сайт ВКонтакте в раздел приложения:

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

Тут жмем «Создать приложение» и заполняем вашими данными форму:

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

Теперь важный момент: приложение пока доступно для запуска только вам, как создателю, другие его не видят. Чтобы оно стало видимым для всех нужно в графе «Состояние» выбрать соответствующий пункт.

Обратим внимание на строки для ввода iFrame адреса. Тут два поля. Первое поле — адрес http, второе — https. Лучше оба заполнить в формате https, так надежнее. Ту ссылку, что мы получили путем нехитрых модификаций вставляем в адрес и сохраняем данные. После сохранения данных, можно пробовать запустить игру:

Теперь, открывая пункт «Управление приложением» вы можете манипулировать вашей игрой, смотреть статистику и т.д.
Управлять же файлами самой игры можно просто: редактируете, их, к примеру, на локальной машине, и, как только все изменения отлажены, заменяете файлы на гугл диске в нужной папке. Повторно выставлять права и доступ не нужно, так как выставлены они для всей папки, ссылки менять тоже не нужно.

Пример получившегося приложения могу дать в ЛС.

На этом у меня всё. Работа с VK API уже есть и доступна в виде видеоуроков, которые тут публиковать не буду. Ранее за публикацию видео аккаунт был заблокирован.

• создать игру для вк
• разместить приложение вконтакте
• причем тут linux?