Игра "кошка мышки"

Появился такой вопрос: как реализовать игру "кошки мышки" используя 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);}`

У меня этот код работает ровно на половину - мыши спавнятся, но клик по ним ничего не дает. Не могу понять почему. Что я делаю не так?


Ответы (0 шт):