Использование мобильного устройства для управления игрой в браузере с помощью веб-разработки
Поддержка акселерометра доступна в Mobile Safari и на всех новых устройствах Android. Это позволяет браузеру ощущать движение, скорость и направление с помощью Javascript на мобильных и планшетных устройствах. Если мы немедленно передадим данные о перемещении с мобильного устройства через сервер nodejs в браузер, тогда мы сможем управлять игрой в браузере. Это именно то, что мы собрали в этом веселая маленькая демонстрация html5 ,
Попробуйте игру, прежде чем пройтись по компонентам, которые составляют эту демонстрацию.
Контроллер Android / iOS
Пользователь сканирует QR-код или посещает уникальную ссылку, созданную для него, с демо-целевой страницы, чтобы запустить контроллер. Код контроллера считывает значения акселерометра, а затем передает движение на сервер nodejs.
Ключевые части кода контроллера устройства iOS
// Определяем, поддерживает ли браузер DeviceMotionEvent if (window.DeviceMotionEvent! = Undefined) {// ondevicemotion запускается, когда устройство iOS обнаруживает движение window.ondevicemotion = function (e) {// ax - движение по оси x. // Это движение используется для перемещения корабля в игре ax = event.accelerationInclusiveGravity.x * 5; ay = event.accelerationInc включаяGravity.y * 5; // Статус 0 - начало, 1 - слева, 2 - справа, 3 - остановка, если (status == 0) {// исходное состояние status = 3; // остаемся socket.emit ('spaceChange', {'ax': 3}); statusmsg = 'Ожидание движения'; } if (ax> 14 && status! = 2) {// двигаться вправо на устройстве status = 2; socket.emit ('spaceChange', {'ax': 2}); statusmsg = 'Движение корабля вправо'; } if (ax <-14 && status! = 1) {// переместить влево на устройстве status = 1; socket.emit ('spaceChange', {'ax': 1}); statusmsg = 'Движение корабля влево'; } if (ax> -14 && ax <14 && status! = 3) {// устройство удерживало устойчивое состояние = 3; socket.emit ('spaceChange', {'ax': 3}); statusmsg = 'Корабль держится стабильно'; }Код контроллера обнаруживает движение от акселерометра и передает данные на сервер nodejs только в случае изменения направления устройства. Это уменьшает объем данных, передаваемых с телефона на сервер, по сравнению с отправкой всех текущих значений акселерометра на сервер. Наконец, значение 14 в ax устанавливается как пороговое значение, чтобы определить, перемещает ли пользователь устройство влево или вправо.
Сервер Node.js с SocketIO (на стороне сервера)
Node.js - это серверная JavaScript-среда, основанная на движке Google V8 Javascript. Программы написаны на JavaScript с использованием событийно-зависимого асинхронного ввода-вывода, чтобы минимизировать издержки и максимизировать масштабируемость. Socket.IO расположен поверх Node.js и позволяет легко доставлять данные в реальном времени между почти каждым браузером и сервером узла. Код Socket.IO выполняется на стороне сервера и на стороне клиента. Это делает Node.js и Socket.IO идеальными кандидатами для мгновенной передачи значений акселерометра с мобильного сафари в браузер настольного компьютера.
Каждому посетителю целевой страницы игры назначается уникальный случайный идентификатор, который связывает браузер и экземпляр iOS-сафари. Пользователь загружает URL-адрес, предоставленный на его устройстве iOS, и затем safari обнаруживает движение акселерометра, который затем передается socket.io на стороне клиента на сервер узла. Случайно сгенерированный идентификатор используется в качестве комнаты для пользователя, так что отправка с пользовательского устройства отправляется только в определенный браузер.
Серверный код Socket.IO
// Запуск по соединению io.sockets.on ('connection', function (socket) {// Установить место для пользователя при установлении соединения socket.on ('setChannel', function (data) {socket.join (data.channelName) );}); // Когда устройство iOS перемещается, отправьте данные в браузер // Несколько браузеров могут прослушивать одно и то же устройство socket.on ('spaceChange', function (data) {socket.broadcast.to (data.channelName) .emit ("spaceChanges", data);});});Браузерная игра и клиентская часть Socket.IO
В браузерную игру можно играть с помощью стрелок на клавиатуре или движением устройства iOS. Сама игра «Космические захватчики» ведет себя как стандартная игра HTML5, использующая холст HTML. Спасибо Эропу Балышеву за разработку хорошо протестированной игры за пару дней. Html игровой код комментируется, и вы сможете легко понять основной код игры. Связь и движение сокетов, основанные на обратной связи от устройства iOS, были позже включены в код игры.
Код ниже показывает, как данные с сервера обрабатываются в браузере.
// Обнаружение iOS и соответствующее действие var lastkey = 37; var dataStart = 0; socket.on ('connect', function () {// если сокеты отключаются, то снова упомяните номер комнаты socket.emit ('setChannel', {'channelName': '<! -? php echo $ randRoom;? -> '});}); socket.on ('spaceChanges', function (data) {if (dataStart == 0) {// Получены первые данные о перемещении document.getElementById ('status'). innerHTML = 'Получение данных с вашего устройства iOS'; dataStart = 1 ;} ax = data.ax; var posob = new Object (); if (ax == 2) {// переместить вправо lastkey = 39; posob.keyCode = lastkey; posob.type = 'keydown'; document.getElementById ( 'status'). innerHTML = 'Устройство iOS наклонено вправо';} if (ax == 1) {// переместить влево lastkey = 37; posob.keyCode = lastkey; posob.type = 'keydown'; document.getElementById (' status '). innerHTML =' Устройство iOS наклонено влево ';} if (ax == 3) {// удерживать корабль на месте posob.keyCode = lastkey; posob.type =' keyup '; document.getElementById (' status ') .innerHTML = 'Устройство iOS стабильно удерживается';} // Отправить действие, полученное выше нажатия клавиши (posob);}); // Автоматический запуск при первом запуске данных window.setInterval (function () {if (dataStart == 1) {var posob = new Object (); posob.keyCode = 32; posob.type = 'keydown'; нажатие клавиши (posob) ; posob.keyCode = 32; posob.type = 'keyup'; keypressaction (posob);} // Таймер - это правильный выстрел каждые 200 мс. // Уменьшаем 200, чтобы понизить для еще более быстрого выстрела!}, 200);Выводы
- Мы очень впечатлены мгновенным обнаружением движения и контролем над игрой.
- Вы также можете запустить несколько браузеров на своем рабочем столе с одним и тем же параметром get get и управлять всем этим с помощью одного и того же контроллера iOS.
- В текущей космической игре захватчики используют только движение оси X на устройстве iOS. Однако все три значения измерения доступны в методе iOS safari ondevicemotion. Технически возможно сделать намного больше с устройством iOS. Вероятно, корабль может выстрелить, когда пользователь трясет устройство?
ОБНОВИТЬ: Посмотрите презентацию космической игры HTML5 Рошана Абрахама
Понравилось демо? Ждем ваших отзывов и идей.
Похожие
Управление удаленным рабочим столом с помощью общего экранаОстановить совместное использование экрана. При просмотре удаленного компьютера запустите или остановите управление удаленной клавиатурой и мышью. Как восстановить поврежденный файл личных папок Outlook (pst)
... вляет Scanpst, также известный как Inbox Repair Tool, для устранения большинства проблем с поврежденными PST-файлами личных папок"> Microsoft предоставляет Scanpst, также известный как Inbox Repair Tool, для устранения большинства проблем с поврежденными PST-файлами личных папок. Прежде чем вы сможете использовать scanpst, вам нужно найти его. Microsoft не добавляет ярлык для него в меню «Пуск», поэтому вам нужно его искать. Самый простой способ получить Протестируйте код JavaScript с помощью браузеров Karma, Mocha, Chai и безголовых
Веб-приложения используют все больше и больше JavaScript. Что касается внутреннего кода, вы должны проверить его. Однако тестирование внешнего кода не так просто, как тестирование внутреннего кода. Действительно, вы должны протестировать его на нескольких браузерах (Chrome, Edge, Firefox, Safari и т. Д.) И их разных версиях. Это означает, что вам нужно протестировать свой код как минимум в 10 браузерах, чтобы убедиться, что ваш код работает должным образом. В этой статье я покажу, как Центр управления сетью / Estrack / Операции / Наша деятельность / ESA
Центр управления сетью В ESOC, Европейском центре космических операций, Дармштадт, Германия, Центр сетевых операций наблюдает за глобальной сетью наземных станций ЕКА, используя сложную систему дистанционного управления и автоматизации для сокращения расходов на персонал и повышения эффективности. Команда операторов станций находится в смене 365 дней в году, обеспечивая получение важных данных с космических аппаратов, эксплуатируемых ЕКА и многочисленными агентствами-партнерами. Настройка режима эмуляции элемента управления Internet Explorer WebBrowser
... страивать HTML в мои приложения. Если это просто для отображения простого макета с основными взаимодействиями, я мог бы использовать такой компонент, как HtmlRenderer , В большинстве случаев, однако, мне нужен более сложный макет, JavaScript или я мог бы хотеть отображать реальные страницы из Интернета - в этом случае я теряюсь с элементом управления WebBrowser. Я знаю, что существуют другие встраиваемые браузеры, но идея доставки Что такое эквивалент Ctrl + Alt + Delete на Mac?
Если вы переключитесь на Mac после знакомства с Windows, вы быстро обнаружите, что стандартные сочетания клавиш Ctrl + Alt + Delete ничего не делают. Mac OS X имеет свою собственную версию Рендеринг HTML5 в старых браузерах с помощью Google Chrome Frame
... вление, июнь 2013 года: Google завершает работу над Chrome Frame и планирует прекратить поддержку и обновления в январе 2014 года. Ознакомьтесь с Сообщение в блоге Chromium для дополнительной информации. Для получения рекомендаций о том, что вам нужно знать как разработчик, пожалуйста, прочитайте FAQ разработчика по Chrome Frame , Лучшие Android VPN для 2019
Что такое VPN? Использование телефона или планшета Android в общедоступной сети Wi-Fi может быть опасным по нескольким причинам. Например, неправильно настроенная сеть может раскрыть ваши данные другим. Существует также вероятность того, что гнусные вечеринки настроили невинную внешнюю беспроводную сеть специально для того, чтобы обмануть вас в подключении. Мошеннические сети может быть очень трудно отличить от реальной вещи, поэтому вы должны использовать КАК: Войдите в режим быстрой загрузки на Moto X Style (2015)
... помощью Fastboot вы можете легко прошить определенные части или всю систему. Есть ключевые части для Android OS, модема, загрузчика и системы. Эти детали можно обновить или изменить вручную с помощью компьютера, который распознает телефон и имеет программное обеспечение Fastboot. Кроме установки прошивок, вы ничего не можете сделать сами. Кроме того, есть хитрый трюк, характерный только для устройств Motorola. Чтобы получить доступ к другим системным режимам, вам сначала нужно получить Скачать Counter Strike 1.6 для Android (Последняя версия)
... сплатную полную версию Android counter strike 1.6: Counter Strike - еще одна замечательная игра для устройств Android. Как все мы знаем, во всем мире есть много людей, которые используют Интернет и играют в игры вокруг. Если мы посмотрим на сегодняшний традиционный мир, то увидим, что многие игры онлайн. Где бы это ни было для ПК или Android. Народы любят играть в эту игру и то же самое с новой игрой Counter Strike. Есть много людей, которые играют в контратаку. Вы можете скачать Как выполнить «Ctrl-Alt-Delete» на вашем Mac
... браузере (Ctrl + «-« или «+») В веб-браузерах и некоторых других приложениях вы можете изменять масштаб, удерживая Command и нажимая клавишу «плюс» (+) для увеличения или клавишу «минус» (-) для уменьшения. Php echo $ randRoom;?
Вероятно, корабль может выстрелить, когда пользователь трясет устройство?