Управление мышью

Это 9й шаг из 10 в Gamedev Canvas tutorial. Вы можете найти исходный код к этому уроку в Gamedev-Canvas-workshop/lesson9.html.

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

Прослушивание движения мыши

Прослушивание движения мыши еще проще, чем прослушивание нажатий клавиш: все, что нам нужно, это прослушиватель события mousemove. Добавьте следующую строку в том же месте, что и другие прослушиватели событий, чуть ниже keyup event:

document.addEventListener("mousemove", mouseMoveHandler, false);

Привязка движения биты к движению мыши

Мы можем обновить положение биты на основе координат указателя - следующая функция обработчика сделает именно это. Добавьте в код следующую функцию под предыдущей добавленной строкой:

function mouseMoveHandler(e) {
    var relativeX = e.clientX - canvas.offsetLeft;
    if(relativeX > 0 && relativeX < canvas.width) {
        paddleX = relativeX - paddleWidth/2;
    }
}

 

В этой функции мы сначала разрабатываем значение relativeX, которое равно горизонтальному положению мыши в окне браузера (e.clientX) минус расстояние между левым краем канвы и левым краем окна браузера (canvas.offsetLeft) - фактически это равно расстоянию между левым краем канвы и указателем мыши. Если относительный указатель позиции х больше нуля и меньше, чем Ширина полотна, указатель находится в пределах границы канвы, и paddleX установки (крепится на левый край биты) - устанавливается на relativeX стоимость минус половину ширины биты, так что движение будет по отношению к середине биты.

Бита теперь будет следовать за положением курсора мыши, но так как мы ограничиваем движение размером канвы, он не исчезнет полностью с обеих сторон.

 

Сравните свой код

Это последнее состояние кода для сравнения:

Упражнение: отрегулируйте границы движения биты, так что вся бита будет видна на обоих краях канвы, а не только на половину.

Следующий шаг

Теперь у нас есть полная игра, мы закончим нашу серию уроков с еще несколькими небольшими хитростями — Finishing up.

Метки документа и участники

Внесли вклад в эту страницу: netmag
Обновлялась последний раз: netmag,