Сразу давайте обозначимся: тема API ВК тут рассматриваться не будет, ее я затрону в будущих материалах, так как она довольно обширна и представляет хорошие возможности. В этой статье будет самая основная часть: написание игры и публикация ее в социальной сети, как запускаемое приложение.
Что потребуется для работы:
— Текстовый редактор (на ваш вкус)
— Любой браузер, поддерживающий HTML5
— Немного свободного времени
Часть 1. Игра на HTML
Думал, что можно использовать в качестве примера, пусть это будет та же игра, что и в видеоуроке про «Две шкатулки».
Суть ее проста: перед пользователем есть две шкатулки, кликом по любой из них либо прибавляется, либо отнимается значение «score».
Вся игра изнутри выглядит так:
И ее файлы с комментариями:
Файл index.html
Две шкатулки // Инициализируем сцену scene= createScene(‘iCanvas’, ‘#EED6C6’); // Разворачиваем приложение на весь экран scene.fullScreen(true); // Инициализируем устройство ввода initInput(scene); // Создаем менеджер постэффектов post= createPost(scene); // Создаем меню createMenu(); // Создаем игру createGame();
onload=«startGame(Menu, 30)» означает, что игра будет запущена с игрового состояния Menu с частотой кадров в 30.
Как Создать Игру Для Вк На JavaScript | Degreet
Файл 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=0B09c3UoyWG0xfjBYaEtxWlNMdDFEbmUwVjhTb3pqV0l5SUI1NTVmLW1CTGE4Vm4zaHgyYmMusp=sharing
Удалив все НЕжирное, получим ссылку вида:
https://0B09c3UoyWG0xfjBYaEtxWlNMdDFEbmUwVjhTb3pqV0l5SUI1NTVmLW1CTGE4Vm4zaHgyYmM
Дописываем после https:// путь к googledrive.com/host и получаем ссылку вида:
https://googledrive.com/host/0B09c3UoyWG0xfjBYaEtxWlNMdDFEbmUwVjhTb3pqV0l5SUI1NTVmLW1CTGE4Vm4zaHgyYmM
Скопировав ссылку в браузер, откроется ваша игра. Откроется как обычная интернет страница в интернете, но по безопасному соединению.
Не теряйте модифицированную ссылку, она нам пригодится.
Часть 3. ВКонтакте
После того, как вы научились открывать вашу игру через Googledrive в браузере, переходим на сайт ВКонтакте в раздел приложения:
На этой странице скроллим в самый низ и выбираем «Разработчикам», откроется страница для девелоперов:
Тут жмем «Создать приложение» и заполняем вашими данными форму:
После заполнения ВК отправит вам смс для подтверждения, введя код подтверждения (бесплатный) вас перебросит в панель управления вашими приложениями. Там будет много разной информации, вы можете походить по вкладкам, по-нажимать, по-проверять:
Теперь важный момент: приложение пока доступно для запуска только вам, как создателю, другие его не видят. Чтобы оно стало видимым для всех нужно в графе «Состояние» выбрать соответствующий пункт.
Обратим внимание на строки для ввода iFrame адреса. Тут два поля. Первое поле — адрес http, второе — https. Лучше оба заполнить в формате https, так надежнее. Ту ссылку, что мы получили путем нехитрых модификаций вставляем в адрес и сохраняем данные. После сохранения данных, можно пробовать запустить игру:
Теперь, открывая пункт «Управление приложением» вы можете манипулировать вашей игрой, смотреть статистику и т.д.
Управлять же файлами самой игры можно просто: редактируете, их, к примеру, на локальной машине, и, как только все изменения отлажены, заменяете файлы на гугл диске в нужной папке. Повторно выставлять права и доступ не нужно, так как выставлены они для всей папки, ссылки менять тоже не нужно.
Пример получившегося приложения могу дать в ЛС.
На этом у меня всё. Работа с VK API уже есть и доступна в виде видеоуроков, которые тут публиковать не буду. Ранее за публикацию видео аккаунт был заблокирован.
- создать игру для вк
- разместить приложение вконтакте
- причем тут linux?
Источник: habr.com
Полезные советы в создании игр ВКонтакте
Телеграм-канал Программист и бизнес.
Каждый день интересные истории, как программист строит бизнес.
Развлекательные приложения в популярной платформе «ВК» помогают весело провести время. Но некоторые пользователи с их помощью зарабатывают хорошие деньги. Создание игр ВКонтакте может приносить отличный доход. Конечно, чтобы этим заниматься, нужно обладать определенными знаниями. Освоить подобный вид заработка способен каждый человек, кто «дружит» с компьютером.
В статье разберемся, какими знаниями требуется обладать, чтобы создавать развлекательные программы. Также вы узнаете о технических моментах и первых шагах в сервисе разработчиков.
Этапы создания игры
Существует несколько этапов создания развлекательных программ. Рассмотрим их подробно:
Этап I
Создание концепта. Данный этап необходим, чтобы «вживую» видеть собственную целевую аудиторию. Это вам поможет позиционировать свою игру.
Разработка геймплея. Этот пункт главным образом нужен во время разработки небольших приложений. Ведь вам требуется выбрать жанр игрушки.
Механика игры. Здесь вы сможете рассчитать необходимые математические процессы, использующиеся в утилите. Например, механика выстрелов, баланс от наносимого ущерба.
Этап II
Создание прототипа игры. Вам требуется создать прототип так называемого «движка».
Этап III
Разработка альфа-версии. В это время программисты разрабатывают концепцию героев и общую графическую составляющую.
Этап IV
Создание бета-версии. Это важный момент. Должно быть готово практически все приложение и 70% всего контента. Пользователи уже могут испытать игру. В команду подбирают специалистов, проводящих тесты, и определяется время рекламной компании.
Этап V
Релиз. Теперь игра становится доступна широкой аудитории, и разработчики вносят требующиеся правки. Исправляются различные обнаруженные проблемы.
Для разработки развлекательного приложения требуется обладать многими знаниями.
Технические моменты
Если вы хотите создать качественную игрушку, нужно хорошо разбираться в таких областях:
Без этих знаний создать качественное приложение не получится.
Первые шаги в сервисе разработчиков
В процессе работы по созданию игрового приложения, вам придется использовать сервис разработчиков. Чтобы попасть на него, наберите адрес: https://vk.com/dev. Страница будет иметь такой вид:
Вам требуется перейти в раздел под названием «IFrame/Flash приложения для ВКонтакте».
Здесь простой интерфейс. Необходимо прокрутить страничку в самый низ и пройти по ссылке называющейся: «Как создать приложение ВКонтакте».
Вам поступит сообщение с информацией о том, что для вас появился доступ к программам: Flash, а также IFrame. Для начала работы требуется кликнуть по ссылке: https://vk.com/editapp?act=create. После ее открытия появится окно создания программы. Нужно заполнить необходимые поля:
- Наименование.
- Тип (IFrame/Flash программы).
- Нужно добавить описание.
- Тип (выберите игра).
- Укажите категорию.
После заполнения всех полей кликните по пункту: «Перейти к загрузке приложения».
Откройте в телефоне сообщения и запросите СМС-уведомление для проверки. Далее введите его в нужную форму. Когда поступит подтверждение, вы окажитесь на страничке с информацией.
Согласитесь с правилами внизу страницы, кликнув по соответствующей кнопке. Проверьте правильность введенных данных и начинайте загружать графические элементы.
Вам осталось осуществить разработку технической части и запустить созданную собственную игру.
Заключение
В статье мы описали общий процесс, связанный с созданием своей игры. Но на самом деле вам необходимо все детально изучить. Ведь программирование довольно сложное занятие. В рамках данного материала все в мельчайших деталях рассказать просто невозможно. Но если задаться целью, вы можете найти необходимую информацию по данной теме и внимательно изучить ее.
Тогда можно будет зарабатывать хорошие деньги в социальной сети «ВКонтакте».
Источник: greatchat.ru
Создание игры Flappy Bird для социальной сети ВКонтакте, публикация в GitHub.Pages
Всем привет. Саш надо небольшой интерактивчик. Я решил с вами тут замутить собственно в группе прямо сейчас сделал пост поступит ли какие-нибудь вопросы пока я пишу на — это видео.
Если в дальнейшем хотите собственно такую же штуковина то наверное.
Можете просто поставить лайк и наверное будет актуальна и так хорошо сегодня я бы хотел поговорить вот на тему который я туда не насиловал вот — это вот наша приложение. Давайте перейдём в него. Сейчас она у меня доступна не из локалхоста.
Я думаю, что многие уже пробовали его потестить в этом видео разберёмся как же всё-таки его опубликовать потому, что в прошлом мы потерпели некая фиаско думаю, что пора бы — это дело всё исправить и нам в этом поможет с вами гитхаб вы сейчас подумаете. Причём здесь гитхаб.
Ну на самом деле очень даже приду и так давай тебе приду в свой аккаунт вот здесь я уже тут что-то делал всё — это дело я вам потом подробнее объясню, что и как. Но перво-наперво нам нужно удалить вообще этот репозитории при удалении её здесь просит ввести такой вот информацию. Да я согласен я понимаю и прекрасно осознаю все свои действия и так снова перейду вот сюда flappy Bird.
У нас конечно же теперь будет недоступен здесь на 404 и нормально. Так вопросы пока нету, но кстати не думаю, что так быстро не поступят. Ну пускай пока повисит во вкладке и так OK так настройки настройки настройки. Ладно управления редактировать нам нужно снова перейти в локалхост. Сегодня мы немножко выпили.
Ну так конечно же пухлость так ну-ка сейчас скопирую равняться. Кстати почему работает повести. Пеппи должна пойти работать по https так OK Google посмотрим прокатит или нет. А ну да конечно, что я тебе в настройки надо вот здесь указывать вот тут вот вот мы сами пишем сохраняем изменения ещё раз обновляемся и смотрим. Да всё. Мы на месте. Это какие правки.
Я сейчас хочу внести в игру. Ну во-первых самое главное — это возможность падать падать вниз что-то тупанул вот собственно можно упасть вниз и при этом остаться живым давайте — это мы с вами. Если честно такая же ситуация с верхом — это некая читерство потому, что можно просто упасть вниз и всё оставить, но вот и набирать очки сколько угодно.
О’кей Давай — это исправим так я сейчас прямо вот в этом файле нам наверное монет консольном пока не нужно и так хорошо. Первое, что я бы хотел сделать так так так так так так наш цикл G Dragon Sword Game. Нам нужен up-grade вот он смотрите мы здесь можем проиграть во время игры здесь в нашем другу мы с вами делаем никого проверку — это вот которая у нас вызывает.
Дима Смотрите тут я указывал кстати для проверки можно сделать вообще прямо просто так вот взять написать здесь или писать сюда вот — это и эту конструкцию, тогда можно вообще убрать можно сделать вот так — это также будет. Геймер, но я не буду этого делать вместо этого я тут добавлю ещё одно событие и так если и так Bird X у нас стал меньше пока вставить Y Una стал меньше нуля.
То есть если птичка наша начала вылетать за верхнюю грань экрана там и соответственно делаем здесь вот таким вот и еще одно условие если опять же. Наша птичка бёрд Y, но только теперь уже так Bird речь внезапно стал больше чем высота в этом случае тоже самое у нас вызывается гейм. Овер так. Смотрим, но ответили уже набрал на 100 очков.
Ну, что давайте пойдём одни трубы трубы проходить здесь легко и так вверх всё gamewer в теперь вниз пойти тоже должен быть геем. Да всё всё и так хорошо с этим мы сами разобрались теперь по поводу рестарта смотрите при старте у нас возникает такая странная ситуация, что во-первых трубы они никуда не девается во-вторых движения птички она становится просто колоссальной.
О’кей давай ты тоже исправим и так смотрите в нашем игра. Мстители гейм. У нас есть событие апдейт она выполняется у нас в игровом цикле. Но кроме всего прочего. У нас есть события в порты этого игрового цикла.
Давайте первое, что мы здесь делаем покажем наш борт до Y как 03 сбросим ускорение и после этого нам нужно с вами что-то сделать с трубами то есть смотрите при ацеклагин наши трубы должны по идее снова с генерируется перед нашей птичка и чтобы она нас не застревала в них и не рождалось в том месте где они остались при смерти. Поэтому вот этот вот кусочек кода где у нас идёт создание всего этого дела какие-то блок вот — это вот этого тела мы с вами.
Давайте переместимся вот сюда события при входе в игру вот таким вот образом в формате и первое, что нужно сделать для того как мы начнём добавлять блоки это. Удалить предыдущие блоки смотреть они у нас хранятся в массиве Blocks вот так Dropbox вот здесь вот вот — это вот строчку мы копируем и вот сюда вот вставляем то есть при старте этого игрового цикла мы выполним такую вот команда только в этом уверен потому, что мы будем эти переменные.
Объявлять и так во-первых блок сравняется пустой массив этим мы сбрасываем предыдущие трубы то есть вообще их убираем из этого массива и записывая в массив новую трубы. Давайте посмотрим. Будет ли — это работать и так всё. Старт пошёл первой трубы создались и. Давайте Вот — это вместе я проиграю и так рестарт всё за новые трубы у нас опять же спереди и. Птичка у нас никуда не улетает соответственно. Теперь если она.
Источник: marketing2day.ru