События, связанные с мышкой
Мы переходим к программированию событий. До этого весь код, что мы писали, выполнялся по порядку, построчно до окончания программы.Мы добавим обработчики событий, которые зависят от действий пользователя – клики и движения мышки, нажатия клавиш клавиатуры и т.п.
В этом блоке мы будем обрабатывать такие события, связанные с мышкой:
- нажатие ЛКМ;
- отпускание ЛКМ;
- движение курсора мышки;
- нажатие ПКМ
Try it out
1. События в действии
1.1. Создайте базовую структуру сайта:index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Mouse events</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>
style.css
html,body {
margin:0;
width:100%;
}
#canvas {
border:2px solid black;
}
script.js
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
let width = 800;
let height = 600;
canvas.width = width;
canvas.height = height;
1.2. Добавим функции-обработчики событий, связанных с мышкой. Мы используем объект document, так как это и есть наша страница сайта.
canvas.height = height;
document.onmousedown = function() {
console.log("Мышка нажата");
}
document.onmouseup = function() {
console.log("Мышка отпущена");
}
document.onmousemove = function() {
console.log("Беги, Форест, беги!");
}
2. А куда же кликнули?
2.1. Мы можем узнавать координаты того места, где был осуществлён клик. Немного изменим предыдущий код:document.onmousedown = function(event) {
console.log(event);
}
Обратите внимание, что мы передаём в параметры функции объект event – этот объект описывает всё про это событие. Запустите этот код и посмотрите, сколько разных свойств хранит этот объект, например: на какой элемент кликнули, какие отступы, какие были нажаты при этом клавиши и т.п. Нас из всех этих свойств интересует, насколько далеко от начала координат мы кликнули.
2.2. Добудем эти координаты:
document.onmousedown = function(event) {
console.log(event.clientX);
console.log(event.clientY);
}
Запустите и покликайте по документу.
2.3. А что, если мы хотим обработать клики только по холсту, а не по всему документу? Нужно просто изменить объект, на который мы цепляем событие:
canvas.onmousedown = function(event) {
console.log(event.clientX);
console.log(event.clientY);
}
3. Зачем всё это нужно?
В первую очередь, для работы с холстом и фигурами на нём.3.1. Очистите все предыдущие обработчики событий в script.js и добавьте код для отрисовки двух кнопок.
context.fillStyle = "#2d2d2d";
context.font = "30px Arial";
context.fillText("Не нажимай на красную кнопку!",50,50);
context.fillStyle = "red";
context.fillRect(50, 100, 100, 100);
context.fillStyle = "green";
context.fillRect(200, 100, 100, 100);
3.2. Теперь добавим обработчик события нажатия кнопки на мышке и добудем координаты клика.
canvas.onmousedown = function(event) {
let mouseX = event.clientX;
let mouseY = event.clientY;
}
3.3. Теперь проверим, чтобы клик был именно по красному прямоугольнику.
canvas.onmousedown = function(event) {
let mouseX = event.clientX;
let mouseY = event.clientY;
if(mouseX >= 50 && mouseX <= 50+100){
if(mouseY>=100 && mouseY <= 100+100) {
alert("Всё, теперь Вайбер могут заблокировать. Все надежды на пользователей с чудо-гифками...");
}
}
}
3.4. Проверьте программу. Понятно ли условие внутри обработчика клика?
В конспект
Нажатие на кнопку мышки
document.onmousedown = function(event) {}Отпускание кнопки мышки
document.onmouseup = function(event) {}Движение мышки
document.onmousemove = function(event) {}Добыть координаты курсора
let mouseX = event.clientX;let mouseY = event.clientY;
Задачи
Задача 10.1**. Добавьте в задачу 3 из Try It Out обработку клика по зелёной кнопке, чтобы выскакивало сообщение, сколько раз кликали по красной кнопке.Задача 10.2**. Создайте переменную с очками и выведите их на холст в левый верхний угол. За каждый клик по чистому холсту увеличивайте эти очки на 1.
Задача 10.3*. Дополните предыдущую задачу тем, что теперь очки будут даваться только за клик в правой половине холста.
Задача 10.4**. Нарисуйте такое поле, используя прямоугольники. Сделайте так, чтобы при клике в белую область (её ширина 100рх) к очкам прибавлялось + 1. А при клике в оранжевую область (её ширина 600рх) от очков отнималось -3.
Задача 10.5**. Добавьте в предыдущую задачу проверку условия: если количество очков меньше нуля, то должен вылезти alert с текстом "Ваша песенка спета".
Задача 10.6**. Перерисуйте поле(высота белого "мостика" = 100рх) и обновите проверку условия попадания на участки белого цвета
Комментарии
Отправить комментарий