Real-Time ігри і кросдоменне з'єднання

Минулого місяця на головній сторінці Google красувалася посилання на гру Lightsaber Escape. На жаль, мені пограти в неї не вдалося, але створити щось схоже захотілося.

Про ідеї
Трохи історії. В дитинстві мені дуже подобалася приставка Nintendo Will, саме тим, що ти керуєш рухами і завдяки цьому можна сильніше зануриться в атмосферу гри. Для своєї гри я теж хотів використовувати дану ідею. Контролером повинен був стати телефон з гіроскопом (зараз він є у багатьох), а в якості екрану будь-який пристрій з браузером з підтримкою Web Socket. В якості прототипу для гри був обраний «Paint».

Клієнтська частина
Оскільки у нас в підсумку два вікна — Controller та View — етап реалізації клієнтської частини я розбив на два етапи:

View
В якості полотна для малювання я вирішив використати звичайний canvas:

<canvas id="whiteholst" width="1920" height="155">

</canvas>

Тоді я ще не був знайомий в WebGL або SVG графікою на потрібному рівні для написання гри, тому не судіть вибір строго. В кінцевому результаті вийшов ось такий View:

image

Тут ми бачимо посилання для підключення контролера (альтернатива QR-код).

Controller
Для управління пензликом хотілося використовувати гіроскоп телефону (підтримка в практично у всіх телефонних браузерах була).
В якості панелі були створені div елементи і повзунок:

<div class="gray color"></div>
<input class="slider" type="range" min="1" max="30" step="1" value="1">

В кінцевому підсумку вийшло так:

image

Думаю, вийшло досить зручно.

Серверна частина
Залишалося тільки вирішити, як передавати дані в реальному часі.

Можна було використовувати long polling технологію на php, але я подумав при великій кількості підключень вона буде не дуже швидка на хостингу. Тому була обрана Web Scoket технологія, а в якості сервера Node.js і благополучно розгорнуто в хмарі.
Результат можете подивитися на сайті Arcanone у розділі Ігри, там можна знайти і інші ігри на даній технології.

Ось моє «мистецтво»:

image

Підсумок
Процес написання JS клієнтської складової частини мене кожен раз напружував, майже завжди виходив некрасивий і погано читається код, тому я вирішив написати JS бібліотеку для цієї мети.

Бібліотека на JS
Ісходник бібліотеки ви можете знайти на GitHub
Ігри будуть переписані під бібліотеку трохи пізніше, зараз нижче я опишу принцип роботи з нею і покажу робочий приклад крос-доменного з'єднання.

Кросдоменне з'єднання View
За адресою http://js.do/code/81109 ви можете знайти робочий приклад роботи бібліотеки, давайте розглянемо його детальніше:

image

У другому рядку ми підключаємо бібліотеку:

< script src="http://arcanone.com/api/arcapi.min.js"></script>

Тепер основні функції:

var arcgame=new arcanone("devtest", 'false');

У цій сходинці ми ініціалізуємо змінну arcgame (це постійне ім'я), з параметрами apikey=«devtest» і чи є дане вікно контролером в даному випадку false. Наведу код в загальному вигляді:

var arcgame=new arcanone(apikey,isControll);//apikey - string , IsControll - bool

Йдемо далі:

arcgame.init(function(e){
$("#getid").text(e.id);
});

У цих рядках ми повідомляємо яку дію ми будемо виконувати при підключенні до сервера, в даному випадку виводимо на консоль id для підключення Controller. Наступного рядках:

arcgame.move(function(e){
console.log(e);
$("#red").css('background-color',e.color);
});

Ми повідомляємо говоримо, що будемо перефарбовувати чорний квадрат в той колір, який отримали від Controller.

В останніх рядках програми ми говоримо, що будемо в консоль виписувати id підключених контролерів:

arcgame.addcontroll(function(e){
console.log(e.id);// цей не той id, який ми отримуємо arcgame.init, ці id для мультиплеєра
});

Що в підсумку вийшло:

image

Тут ми бачимо чорний квадрат і id який треба вказати у Controller.

Кросдоменне з'єднання для Controller
Для тестування крос-доменного з'єднання я створив тестову сторінку:

image

При завантаженні сторінки ми повинні вказати arcid, яке ми отримали з View і приєднатися до нього.

Якщо ви не вказали при завантаженні сторінки arcid, ви можете вказати його перед ініціалізацією:

window.qqadres="fptaj";


Розглянемо код нашої сторінки:

image

У перших рядках ми знову ж підключаємо бібліотеку, далі ми ініціалізуємо змінну arcgame, тільки злегка з іншими параметрами, тепер ми говоримо, що це Controller тому другий параметр true:

var arcgame=new arcanone("devtest",true);

У наступних рядках ми говоримо при яких діях ми будемо відсилати результат на View:

$("#go").click(function(){
arcgame.controllersend(",",$("#color").val(),",")
});

В даному випадку при натисненні кнопки «Send», ми відсилаємо значення поля вводу. Розберемо параметри функції controllersend докладніше:

arcgame.controllersend(x,y,color,size,action)

x, y — це сила і напрямки прискорення гіроскопа по осях
color — це колір
size — це розмір
action — це дія(наприклад для гри в танки на цю дію навішано постріл)
Давайте напишемо колір і натиснемо відправити:

image

І ми бачимо, що View змінився колір:

image

Так само є невикористані функції, наприклад:

arcgame.online 

З допомогою цієї функції ми можемо дізнатися скільки людей користується даними apikey в даний час (для ігор подивитися онлайн).

Висновок
Цю бібліотеку можна використовувати для створення real-time ігор або для реалізації крос-доменних сполук. Дана версія бібліотеки далеко не остання, найближчим часом будуть дописані додаткові функції.

Надалі у мене є ідея і бажання написати WebGL гоночну багатокористувацьку 3d гру на гіроскопі і з використанням даної бібліотеки, на жаль, у моїй команді немає людини здатного зробити 3D модель нормальної якості, тому якщо є час і бажання можете зв'язатися зі мною з цього питання.

Спасибі за увагу!

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.