Если вы являетесь разработчиком веб-игр HTML5 и больше ориентируетесь на мобильных игроков, чем на настольных, вы, вероятно, захотите обогатить свою игру HTML5, добавив функции вибрации.
Среди API HTML5 есть API под названием Vibration API. «Vibration API» позволяет вам управлять устройством с помощью JavaScript, чтобы оно вибрировало по шаблону в течение заданной продолжительности. Допустим, мы играем в игру, в которой мы можем нажать, чтобы ударить существо током, поэтому в этом случае мы хотим, чтобы устройство вибрировало каждый раз, когда существо подвергается удару током.
Просмотреть демонстрациюили отсканируйте следующий код с помощью мобильного устройства и просмотрите его с помощью Google Chrome для Android:
В этой статье я покажу вам простое использование Vibration API в вашей веб-игре.
Детали учебника
- Сложность: Новичок
- Технология: HTML5 Vibration API
- Поддерживаемый браузер: Google Chrome для Android
Шаг 1: HTML и CSS
Ниже приведена структура HTML и CSS нашего примера игры:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo: Game Development Adding Vibration API | onlyWebPro</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
.wrapper {
position: relative;
margin: 0 auto;
width: 320px;
}
#action_tap {
background: none;
position: absolute;
top: 0;
z-index: 2;
height: 375px;
width: 320px;
}
#game_graphic {
background: url(vibrate_00.gif);
height: 375px;
width: 320px;
}
#game_graphic.animate {
background: url(vibrate_01.gif);
}
</style>
<div class="wrapper">
<div id="game_graphic"></div>
<div id="action_tap"></div>
</div>
</body>
</html>
Мы загружаем основную библиотеку jQuery из Google CDN, и у нас есть 2 важных элемента в приведенном выше HTML: #game_graphic и #action_tap. #action_tap — это фиктивный элемент, принимающий ввод (касание) от игрока.
Когда игрок нажимает на элемент #action_tap, мы будем использовать JavaScript, чтобы изменить изображение электрического шока на элементе #game_graphic и один раз завибрировать устройство.
Шаг 2: Обнаружение поддержки Vibration API
Всегда полезно проверить наличие поддержки API перед его использованием; Ниже показано, как вы можете обнаружить присутствие Vibration API:
if (window.navigator && window.navigator.vibrate) {
// write our vibrate code here
} else {
alert('not supported vibrate');
}
Шаг 3. Измените элемент #game_graphic
Ниже приведены изображения, которые мы собираемся использовать для нашей игры: бездействие (vibrate_00.gif) и электрошок (vibrate_01.gif).
Элемент #game_graphic содержит фоновое изображение (vibrate_00.gif), определенное в CSS.
Когда игрок нажмет на элемент #action_tap, мы добавим новый класс '.animate' и создадим таймер JavaScript для удаления '.animate ' через 500 миллисекунд.
*Обратите внимание, что класс ‘.animate’ содержит фоновое изображение CSS: (vibrate_01.gif) анимированный рисунок в формате gif, поражающий электрическим током.
Вот как выглядит наш JavaScript:
$(document).ready(function(){
if (window.navigator && window.navigator.vibrate) {
var timer;
$('#action_tap').click(function(){
$('#game_graphic').addClass('animate');
timer = setTimeout(function() {
$('#game_graphic').removeClass('animate');
}, 500);
});
} else {
alert('not supported vibrate');
}
});
Шаг 4: Использование Vibration API
Функция navigator.vibrate принимает либо одно число, либо массив чисел для серии вибраций. Допустим, мы хотим вибрировать один раз в течение 200 миллисекунд, когда игрок нажимает на существо в игре, поэтому мы напишем наш код, как показано ниже:
$(document).ready(function(){
if (window.navigator && window.navigator.vibrate) {
var timer;
$('#action_tap').click(function(){
window.navigator.vibrate(200);
$('#game_graphic').addClass('animate');
timer = setTimeout(function() {
$('#game_graphic').removeClass('animate');
}, 500);
});
} else {
alert('not supported vibrate');
}
});
Теперь сохраните документ и загрузите HTML-файл в мобильный Google Chrome. Затем нажмите, чтобы шокировать существ в игре!
Вывод
Вы только что узнали о HTML5 Vibration API и о том, как творчески использовать его для создания веселой и захватывающей мобильной веб-игры.
Вы уже внедрили HTML5 VIbration в свой проект? Если вы еще этого не сделали, попробуйте внедрить HTML5 Vibration API в свой следующий проект!
Последний, но тем не менее важный
Большое спасибо за то, что прочитали эту статью. Я искренне надеюсь, что вам понравится, и я хотел бы услышать ваши отзывы.
Не стесняйтесь обращаться ко мне через Facebook или Google Plus.
Если вы хотите узнать больше руководств по веб-разработке, мобильной веб-разработке или разработке игр, ознакомьтесь с ними по адресу:
