Я пытался создать игру исключительно на HTML5 и JavaScript, и столкнулся с проблемой, которую, похоже, не могу решить. Чтобы попытаться избежать использования сторонних классов / библиотек, я создаю свой собственный класс для обработки пользовательских кнопок в элементе HTML5 canvas. Я почти заставил их работать, а затем мне пришлось переписывать большую часть сценария, осознав, что мои слушатели событий добавляли друг на друга каждый раз, когда перерисовывался холст (раньше я использовал анонимную функцию в слушателе событий mouseDown, но с тех пор перешел на другой метод).
Прежде всего, мои слушатели событий теперь используют функцию, которая содержит ссылку на любую кнопку, которую я пытаюсь использовать. Затем вызывается mouseDownFunc моего прототипа, он проверяет границу размеров экземпляра кнопки, а затем, наконец, вызывает ссылочный onPress() (который на самом деле является переопределенным методом, который использует каждая кнопка, поэтому каждая кнопка при нажатии имеет собственный набор инструкций) .
Итак, если вы все еще продолжаете (я знаю, это немного сбивает с толку, не видя полного сценария), проблема в том, что, поскольку мои прослушиватели событий используют ту же функцию, они перезаписывают предыдущий прослушиватель событий, так что только кнопка last добавила функции правильно. Подводя итог, как я могу добавить несколько слушателей событий к элементу canvas, которые все используют одну и ту же функцию, не стирая предыдущих слушателей событий. Обратите внимание, что я пытаюсь сделать это без использования jQuery или других сторонних расширений.
Если для моего кода требуется дополнительная информация, чтобы его было легче понять, дайте мне знать. Заранее благодарим за любые отзывы.
Редактировать: Возможно, это могло бы помочь. Обратите внимание, что это не полный код, но содержит основные пункты:
Добавление кнопки:
this.test_button = new CreateButton(this, 'test_button');
this.test_button.onPress = function() {
alert('Blue button works!');
};
this.test_button.create(200, 50, 30, 200, 'text');
При использовании create() на кнопке проверяются и сохраняются переменные, а также массив, содержащий все текущие кнопки (поэтому на них можно ссылаться в любой точке). Затем запустите: this.that.custom_canvas.addEventListener('mousedown', this.create.prototype.mouseDownFunc, false);
Когда вызывается mouseDownFunc, это происходит:
CreateButton.prototype.create.prototype.mouseDownFunc = function(e) {
var mouse_x = e.clientX-this.offsetLeft;
var mouse_y = e.clientY-this.offsetTop;
// Check if the mini-button button was actually clicked
if(mouse_x >= test2.x && mouse_y >= test2.y && mouse_x <= (test2.x + test2.width) && mouse_y <= (test2.y + test2.height)){
alert('clicked and working!');
test2.onPress(); // A reference to the saved function
}
};
В настоящее время мой test2 является ссылкой на любой данный объект - это глобальная переменная, но после того, как я исправлю эти другие проблемы, я буду иметь дело с избавлением от глобальной переменной (я знаю, я знаю - это было просто временное быстрое исправление).