Игра "кошка мышки"
Появился такой вопрос: как реализовать игру "кошки мышки" используя JavaScript и Canvas? Суть игры: на экране (на холсте канвас) спавнятся и бегают мышки, игрок кликает по ним,кликнутая мышка исчезает и игроку начисляются баллы (score). Мой алгоритм: `function GameStart(){
var canv = document.querySelector("canvas"); //получаем элемент канвас
canv.style.backgroundImage = "url(img/Cheese-bg.jpg)";
canv.width = SW;
canv.height = SH;
var cx = canv.getContext("2d"); //стиль рисования 2д
var img = document.createElement("img");
img.src = "img/mouse-spr.png";
setInterval(function(){ //устанавливаем таймер спавна на 3 секунды
let mouse_size = 50 * Math.floor(Math.random() * 3 + 1); //рандомизируем размер мышек
let mouseX = Math.floor(Math.random() * SW); //коорды мышки
let mouseY = Math.floor(Math.random() * SH);
cx.drawImage(img, mouseX, mouseY, mouse_size, mouse_size);
mouses.push([mouseX, mouseY, mouse_size]); //записываем координаты и размер мыши в массив
canv.addEventListener("click", function(event){//добавляем ивентлистенер на клик по канвасу
for (let i = 0; i < mouses.length; i++){//проверяем координаты клика на соответствие с координатами мышей из массива
if((event.pageX > mouses[i,0] && event.pageX < mouses[i,0] + mouses[i,2]) &&
(event.pageY > mouses[i,1] && event.pageY < mouses[i,1] + mouses[i,2])){
isClicked = true;//флажок для проверки клика
Score +=50;
clearRect(mouses[i,0],mouses[i,1],mouses[i,2],mouses[i,2]);//очищаем холст по координатам мыши
}
}
});
MouseCounter++;
}, 3000);}`
У меня этот код работает ровно на половину - мыши спавнятся, но клик по ним ничего не дает. Не могу понять почему. Что я делаю не так?