Главная RSS Онлайн игры WarCraft Приколы Карта сайта О блоге Поиск Добавить пост Ваши посты

“Одну заварку чая можно использовать семь раз, на седьмой раз чаинки всплывут, чтобы посмотреть на этого жлоба.” - анекдот дня



+ Подписаться

Последние комментарии
Статья: Разгадывать кроссворды онлайн бесплатно
Автор:Dima
Дата: 2019-02-13 00:24:02

AlexMaster, физрук

Статья: Разгадывать сканворды онлайн бесплатно
Автор:Lisa
Дата: 2019-02-13 00:23:07

AlexMaster, ну это легко “эскимо”

Статья: Человек Паук против Бэтмена 2099 год
Автор:FanatMarvel
Дата: 2019-02-12 19:36:19

Крутая битва я с самого начала знал, что Человек Паук победит.

Статья: Онлайн шарики игры бесплатно без регистрации
Автор:AlexMaster
Дата: 2019-02-12 18:59:31

Если кому интересны игры похожие на зуму лягушку, то рекомендую поиграть в “Повелитель сфер”. Более подробное описание этой игры находится по ссылке “Меткий стрелок”, в этом разделе.

Статья: Меткий стрелок шарики онлайн играть бесплатно без регистрации
Автор:Artem
Дата: 2019-02-12 02:26:27

Magician, я давно играл в эту игру, но по моему там 5 здоровья прибавляется, тогда когда каждый раз используешь заклинание исцеление.

Статья: Разгадывать кроссворды онлайн бесплатно
Автор:AlexMaster
Дата: 2019-02-12 00:03:06

Первый вопрос на кроссворд “Препод” в спортзале?

Статья: Разгадывать сканворды онлайн бесплатно
Автор:AlexMaster
Дата: 2019-02-11 23:57:29

Первый вопрос как называется мороженное посаженное на “кол”?

Статья: Разгадывать сканворды онлайн бесплатно
Автор:AlexMaster
Дата: 2019-02-11 23:43:38

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

Статья: Разгадывать сканворды онлайн бесплатно
Автор:Misha
Дата: 2019-02-11 23:38:47

Правильный ответ “Ранет”.

Статья: Разгадывать кроссворды онлайн бесплатно
Автор:AlexMaster
Дата: 2019-02-11 23:31:01

Если здесь есть такие кто зарегистрирован на разных форумах, то вы должно быть видели, что на некоторых форумах есть такая тема “форумные игры”. Тут будут сообщения-игра. Суть игры заключается я буду брать любой вопрос любого кроссворда который у меня есть и размещать его здесь, а ваша задача на него правильно ответить. Посмотрим насколько вы эрудированные?

Поиск предметов

Летний легкий жакетик

Шарф



HTML5-> Статьи->Разгадывать кроссворды онлайн бесплатно

События мыши event

0

Добавил: AlexMaster

Дата: 15.09.2016


События мыши event - в html 5 события мыши могут взаимодействовать с объектами.

Чтобы вызвать событие мыши нужно использовать метод addEventListener. Этот метод принимает три аргумента: тип события, исполняемую функцию и булево значение (значение логического типа).
Ниже представлен список событий мыши.
click – событие работает, когда пользователь произвел щелчок мышкой.
mousedown – вызывается, когда пользователь нажал левую кнопку мыши.
dblclick – вызывается, когда пользователь дважды щелкнул мышкой.
mouseup - срабатывает, когда пользователь отпускает левую кнопку мыши.
mousemove - вызывается, когда пользователь перемещает курсор мыши над объектом.
mouseout - вызывается, когда курсор покидает область объекта.
mouseover - вызывается, когда курсор попадает на область объекта. Если, например, mousemove срабатывает постоянно до тех пор, пока мышь перемещается внутри объекта, то mouseover срабатывает только один раз, когда курсор попадает на объект.
mousewheel - работает, когда пользователь воспользовался прокруткой мыши (колесиком мыши).
contextmenu - срабатывает, когда пользователь вызывает контекстное меню, обычно это происходит правой кнопкой мыши.
В следующем примере создается canvas, а так же метод addEventListener, который при щелчке мыши вызывает функцию mouseClick. Функция mouseClick увеличивает переменную на 1 и выводит её в текстовое поле. Вы можете заменить событие “click” на любое другое событие из списка перечисленных выше. Потом загрузить html - документ в браузер и посмотреть, на результат.
Листинг 1.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Mouse event</title>
</head>
<body>
<script>
var canvas, ctx, num = 0;
function main()
{
canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
canvas.width = 300;
canvas.height = 300;
canvas.style.background = "#444444";
document.body.appendChild(canvas);
ctx.font = '24px Verdana';
ctx.fillStyle = '#fff';
ctx.fillText("Счетчик "+num, 80, 70);
canvas.addEventListener("click", mouseClick);
}
function mouseClick()
{
ctx.clearRect(0,0,canvas.width,canvas.height);
num++;
ctx.fillText("Счетчик "+num, 80, 70);
}
main();
</script>
</body>
</html>

Для взаимодействия мышки с объектами на canvas используются координаты мыши. Так же идет проверка условия, где проверяется, попадает ли мышь в область координат по x и y указанных в условии.
Рассмотрим пример “меню” Листинг 2. В главной функции main создается canvas. И используется событие мыши mousedown на canvas. Потом вызывается функция menu, где создаются кнопки из квадратов и надписи на них.
Функция mouseDown отвечает за нажатие кнопки мыши.
Следующие три строчки определяют координаты мыши по x и y начиная от верхнего левого угла.

var el = evt.target;
var px = evt.clientX - el.offsetLeft;
var py = evt.clientY - el.offsetTop;

Дальше следует условие щелчка по px и py. Если, например, пользователь щелкнул мышкой по области, которая указана в условии, то браузер выдаст сообщение с помощью функции alert(“ Нажата кнопка 1”).
Пример листинг 2.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menu</title>
</head>
<body>
<script>
var canvas, ctx;

function main()
{
canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
canvas.width = 300;
canvas.height = 340;
canvas.style.background = "#444444";
document.body.appendChild(canvas);
canvas.addEventListener("mousedown", mouseDown);
menu();
}
function menu()
{
ctx.fillStyle = "rgb(150,190,255)";
ctx.fillRect(70, 50, 170, 30);
ctx.fillRect(70, 100, 170, 30);
ctx.fillRect(70, 150, 170, 30);
ctx.fillRect(70, 200, 170, 30);
ctx.font = '24px Verdana';
ctx.fillStyle = '#fff';
ctx.fillText("Кнопка 1", 100, 70);
ctx.fillText("Кнопка 2", 100, 122);
ctx.fillText("Кнопка 3", 100, 170);
ctx.fillText("Кнопка 4", 100, 220);
}
function mouseDown(evt)
{
var el = evt.target;
var px = evt.clientX - el.offsetLeft;
var py = evt.clientY - el.offsetTop;

if(px >= 70 && px <=240 && py >=50 && py <=80)
{
alert("Нажата кнопка 1");
}
if(px >= 70 && px <=240 && py >=100 && py <=130)
{
alert("Нажата кнопка 2");
}
if(px >= 70 && px <=240 && py >=150 && py <=180)
{
alert("Нажата кнопка 3");
}
if(px >= 70 && px <=240 && py >=200 && py <=230)
{
alert("Нажата кнопка 4");
}
}

main();
</script>
</body>
</html>

Скачайте файл с исходниками.

HTML5-> Статьи->Разгадывать кроссворды онлайн бесплатно


Перейти на главнуюВагон игр Назад

Просмотров: 395

Комментарий к этой заметки:

Добавить ваш камментарий:

Введите капчу

 

Яндекс.Метрика