Recommended
Recommended
More Related Content
Featured
Featured (20)
Angry ducks
- 1. Космические утки-нацисты шпионы, и где они обитают 1 Докладчики: Любовь Ложкина, Евгений Ворожцов, Алексей Трусов
- 2. Основная идея 2 Играть без регистрации и СМС!!!
- 3. Составляющие проекта • Клиент • Сервер • Телевизор 3
- 4. Клиент Решаемые задачи: • Гироскоп и акселерометр • Адаптивное приложение 4
- 5. Гироскоп и акселерометр Гироскоп — устройство, способное реагировать на изменение углов ориентации тела. 5 Акселерометр — это прибор, который позволяет фиксировать даже незначительные изменения ускорения в зависимости от его положения в пространстве.
- 6. Как получить данные? window.addEventListener("deviceorientation", handleOrientation); function handleOrientation(event) { var alpha = event.alpha; var beta = event.beta; var gamma = event.gamma; } 6
- 7. Поворот системы координат Этот - или этот - ? 7 Поворот на угол gamma Этот точно нам нужен!
- 8. Из углов в координаты 8 Сцена 90 160
- 9. Угол gamma или y-координаты Траблы с данными: • сдвинутая область значений, • использовать всю область неудобно. 9 event.gamma; // In degree in the range [-90,90] -50 0 -90 90 0 -10
- 10. Угол gamma или y-координаты 10 -50 0 -90 90 0 -10 0 45 -45 Если value принадлежит [0, 90] или [-90, -50], то передаем 45 value – (-50, -10), то рассчитываем по формуле value - [-10, 0], то передаем -45
- 11. Формула расчета y-координаты gamma = gamma + 30; y = -height * gamma / (maxDeg.y * 2); maxDeg.y – 20 height – 90 11 Примеры: Пусть gamma = -50, тогда gamma = -50 + 30= -20 y = -90 * -20 / (20 * 2) = 45 Пусть gamma = -30, тогда gamma = -30 + 30= 0 y = -90 * 0 / (20 * 2) = 0 Пусть gamma = -10, тогда gamma = -10 + 30= 20 y = -90 * 20 / (20 * 2) = -45
- 12. Почему я ненавижу угол alpha Вроде бы все также… 12 20-20 По формуле Доводим до 20 Доводим до -20 alpha = event.alpha; // In degree in the range [0, 360)
- 14. 14 0 350 По формуле 190 Доводим до 350 30 Доводим до 30 360 0 20По формуле 220 Доводим до 20 60 Доводим до 60 360 Доводим до 20 Море слез P. S. А еще оказалось, что alpha зависит от знака угла gamma. И появилась функция с названием deleteAlphaDependence … 0 220По формуле 30 Доводим до 220 240 Доводим до 240 360 Доводим до 240
- 20. 20 А теперь немножко магии
- 22. 22 Redux-Saga • проста и декларативна • есть много полезных effect’ов
- 23. 23 Redux-Saga export function* someAction() { while(true){ const action = yield take(‘GET_DATA’); const result = yield call(api.getData, action.payload); if (!result.error) { yield put({ type: ‘GET_DATA_SUCCESS’, result }); } else { yield put({ ‘GET_DATA_FAILED’, result }); } } }
- 24. 24 Redux-Saga Effects • take, takeEvery, takeLatest • call • put • select • race • fork • delay*
- 26. 26 Socket.io + React Мое костыльное решение* /* some imports */ import store from ‘../configureStore’; const socket = io(URL, {autoconnect: false}); export function initSocket(id) { const { dispatch } = store; socket.connect(); socket.emit(‘Start Game’, { id }); socket.on(‘Start Game’, data => dispatch({ type: ‘SOCKET_ON_START_GAME’, data }); /* some code */ }
- 27. 27 А что еще? Немного об HTML 5 API Fullscreen API (el.requestFullScreen()) Vibrate API (Navigator.vibrate) // use vibrate navigator.vibrate([100, 300, 500]);
- 28. 28 Резюмируем
- 29. Сервер • API для общего функционала • Socket.io для игры • База данных Задача: максимально снизить нагрузку на сервер. 29
- 30. Сервер. API • Стандартизированные ответы • Минимизация обращений к базе { "result":"ok", "data":{ "nick":"цереус_62“ } } 30
- 31. Сервер. Socket.io • Подсчет оставшегося времени • Передача прицела на ТВ • Передача результата выстрела обратно клиенту 31
- 32. Сервер. База данных 32 • Список пользователей • Список записавшихся на интервью • Результаты
- 33. Телевизор 33 Общий вид приложения на ТВ
- 34. Телевизор • Обрабатывает движение уток • Обрабатывает отображение прицелов • Определяет попадания при выстреле • Возвращает результат стрельбы • Отрисовывает анимацию 34
- 36. Спасибо за внимание! 36 Ваши вопросы!