Как добавить обработку клика мыши в HTML/JavaScript игре

Мы с товарищем делаем 2D игру на HTML и JavaScript в стиле бегалок типа Temple Run. У нас персонаж бежит, собирает монеты, а препятствия падают сверху вниз.

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

if (event.keyCode == 82) {
    openSkinMenu();
}

Хотим сделать по-другому. Когда игрок проигрывает, должна появляться кнопка “Сменить скин”. По клику левой кнопкой мыши на эту кнопку должно открываться меню.

Подскажите, как правильно обработать клик мыши вместо нажатия клавиши? Спасибо за помощь!

Можешь использовать не только onclick, но и addEventListener. Если ты создаешь кнопку после проигрыша, следи, чтобы назначить обработчик клика в момент создания. Вот пример: const button = document.createElement('button'); button.id = 'skinButton'; button.textContent = 'Сменить скин'; button.addEventListener('click', openSkinMenu);. Главное, чтобы все это происходило после проигрыша, тогда кнопка будет уместна.

у меня было такое же когда делал простой платформер. проще всего - заранее создать кнопку в html, но спрятать через css (display: none). потом при проигрыше показываешь и вешаешь onclick. типа так: document.getElementById('skinBtn').style.display = 'block'; document.getElementById('skinBtn').onclick = openSkinMenu; работает четко и не надо каждый раз мучиться с createElement.

Попробуйте использовать addEventListener с событием ‘click’. Создайте кнопку в HTML с id, а в JS сделайте что-то вроде document.getElementById(‘skinButton’).addEventListener(‘click’, openSkinMenu). Не забудьте показывать кнопку только после проигрыша. Какой движок используете или это чистый JS?