«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript

Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


В современном мире большая часть Интернет-аудитории использует мобильные устройства. И начинающим разработчикам не лишним будет знать и понимать, что в мобильных браузерах нет таких событий как клик мыши или наведение указателя мыши.

В мобильных браузерах есть «ТАБы» - это прикосновение к сенсору пальцем. Что касается поддержки браузерами событий, происходящих при использовании мобильных устройств, то осветим этот вопрос на примере события TouchEvent: для этого зайдем на сайт caniuse.com.

И мы увидим, что TouchEvent поддерживается не только мобильными браузерами Android Browser, Opera Mobile, Chrome for Android и другими, но и "десктопными" Firefox, Chrome, Opera (здесь не все версии и в этот список не входит IE и Safari, но это не страшно).

TouchEvent - Способ регистрации того, когда, где и как осуществляется касание интерфейса, для устройств с сенсорным экраном. Эти события DOM похожи на mousedown, mousemove и т.д.

mousedown/mouseup - кнопка мыши нажата/отпущена над элементом. mousemove - каждое движение мыши над элементом генерирует это событие.



Шесть событий на мобильном браузере

Итак, какие события существуют в мобильном браузере? Их шесть и все они начинаются со слова «touch».

- touchstart - Событие срабатывает при возникновении касания к элементу (палец коснулся элемента).

- touchmove - Событие возникает после того как пользователь прикоснулся к элементу, и перемещает палец в другую точку.

- touchend - Событие возникает после разрыва прикосновения к элементу (палец оторвался от элемента).

- touchenter - Событие возникает при условии, что касание происходит в пределах элемента (например, мы ведем палец по экрану и попадаем в область элемента, для которого назначено событие).

- touchleave - Событие возникает, когда точка соприкосновения выходит за рамки элемента (палец вышел за пределы элемента).

- touchcancel - Событие возникает тогда, когда точка соприкосновения больше не регистрируется на поверхности (перемещение за пределы браузера).

События touchstart, touchmove и touchend - Пример

HTML-код

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>mobile_events</title>
	<style>
		body {
			height: 1000px;
		}
		.box {
			width: 150px;
			height: 100px;
			background-color: red;
		}
	</style>
</head>
<body>
	
	<div class="box">
		Touch me!
	</div>

	<script src="script.js"></script>
</body>
</html>	

Напомним, что здесь выполнение скрипта происходит после загрузки DOM-дерева, то есть после того, как произошло событие DOMContentLoaded.

JavaScript-код

'use strict';

// Запуск скрипта после загрузки DOM-дерева - событие DOMContentLoaded 

window.addEventListener('DOMContentLoaded', () => {
	const box = document.querySelector('.box');

	// Событие touchstart - Вывод информации в консоль при возникновении касания элемента страницы
	box.addEventListener('touchstart', (e) => {
		e.preventDefault(); // отмена стандартного поведения браузера

		console.log('Start');
	});
    
   // Событие touchmove - Перемещение в пределах элемента
	box.addEventListener('touchmove', (e) => {
		e.preventDefault(); 

		console.log('Move');
	});

	// Событие touchend - Отрываем палец от элемента
	box.addEventListener('touchend', (e) => {
		e.preventDefault(); 

		console.log('End');
	});

});

Результат в Браузере

Результат в консоли

Start
40 Move
End

Для тестирования следует перейти в "Инструменты разработчиков" и активировать эмулятор мобильных устройств, кликнув по иконке "Toggle device toolbar". При этом обычный курсор мыши превращается в круговой «сенсорный» курсор. Таким образом...

  • Событие touchstart - для эмуляции касания пальцем на сенсорном экране - нужно сделать клик мыши по элементу.

  • Событие touchmove - для эмуляции прикосновения и перемещения пальца - нужно сделать клик мыши по элементу и, не отпуская кнопку мыши, переместить круговой «сенсорный» курсор.

  • Событие touchend - для эмуляции разрыва прикосновения с элементом - нужно сделать клик по элементу и отпустить/отжать кнопку мыши.

В результате в консоли мы увидим Start, (40) Move, End - то есть мы коснулись элемента (Start - Событие touchstart), не отпуская пальца перемещаемся по элементу (Move - Событие touchmove) и отрываем палец от элемента (End -Событие touchend).

Свойство touches объекта события - Объект TouchList

У объекта события есть свойства, которые можно как-то использовать при работе с сенсорными устройствами. Рассмотрим одно из них - это свойство touches.

Свойство touches - выдает количество пальцев, которые взаимодействуют с экраном.

JavaScript-код

'use strict';

window.addEventListener('DOMContentLoaded', () => {
	const box = document.querySelector('.box');

	// Событие touchstart - Вывод информации в консоль при касании элемента страницы
	box.addEventListener('touchstart', (e) => {
		e.preventDefault(); 

        console.log(e.touches); // Свойства touches объекта события
	});

});

Результат в Браузере

Результат в консоли

TouchList {0: Touch, length: 1}
0: Touch
clientX: 86.66667175292969
clientY: 81.33333587646484
force: 1
identifier: 0
pageX: 86.66667175292969
pageY: 81.33333587646484
radiusX: 15.333333015441895
radiusY: 15.333333015441895
rotationAngle: 0
screenX: 814
screenY: 229
target: div.box
[[Prototype]]: Touch
length: 1
[[Prototype]]: TouchList
item: ? item()
length: (...)
constructor: ? TouchList()
Symbol(Symbol.iterator): ? values()
Symbol(Symbol.toStringTag): "TouchList"
get length: ? length()
[[Prototype]]: Object

Свойство touches вызывает объект TouchList. Сначала в объекте TouchList мы видим количество пальцев, которые взаимодействуют с экраном, но в данном случае с конкретным элементом. С каким - это можно увидеть далее: строка №14 target: div.box. И в данном случае мы видим, что с элементом взаимодействовал один палец length: 1, так как работа ведется на эмуляторе мобильных устройств в обычном "десктопном" браузере.

Здесь же мы можем увидеть координаты, где произошло касание и другие вещи.

Свойства targetTouches и changedTouches

Свойство targetTouches - выдает количество пальцев, которые взаимодействуют с элементом сенсорного экрана.

Так как работа ведется на эмуляторе мобильных устройств - в обычном "десктопном" браузере, то нам не удастся продемонстрировать разницу между свойствами touches и targetTouches.

Поэтому если в примере выше вместо свойства touches обратиться к свойству targetTouches console.log(e.targetTouches); - то ничего не измениться: в консоли будет все тот же результат.

Но на мобильных устройствах все будет иначе.

Но рассмотрим пример: как мы можем отслеживать событие touchmove (перемещение пальца) при помощи свойства targetTouches.

JavaScript-код

'use strict';

window.addEventListener('DOMContentLoaded', () => {
	const box = document.querySelector('.box');

	//Событие touchmove - Перемещение в пределах элемента
	box.addEventListener('touchmove', (e) => {
		e.preventDefault(); 

		// Вывод координаты pageX при перемещении первого пальца
		console.log(e.targetTouches[0].pageX);
	});

});

Результат в Браузере

Результат в консоли

130.6666717529297
2 128
126.66667175292969
2 125.33333587646484
124
122.66667175292969
121.33333587646484

Здесь мы отслеживаем событие touchmove - получаем координату pageX при перемещении 1-го пальца в пределах элемента: targetTouches[0] - обращение к первому пальцу.

Свойство changedTouches - выдает список пальцев, которые участвуют в текущем событии. Например, если речь идет о событии touchend, то список будет содержать тот палец, который был убран.

Как работает свойство changedTouches - здесь продемонстрировать не удастся.

Так как работа ведется на эмуляторе мобильных устройств - в обычном "десктопном" браузере.



Читайте также...

Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 4
Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432
Популярные заметки
Последние заметки