Toupeira Game

var holePositions = [
    {x: 13, y: 51},
    {x: 223, y: 90},
    {x: 432, y: 20},
    {x: 62, y: 200},
    {x: 432, y: 200},
    {x: 22, y: 320},
    {x: 316, y: 308}
];

var holeSize = {
    width: 186,
    height: 67
};

var molePosition = [];

for (let i = 0, l = holePositions.length; i < l; i++) {
    molePosition[i] = {
        x: holePositions[i].x + 49,
        y: holePositions[i].y - 43
    };
};

var imgs = {};

var canvas = document.querySelector("canvas"),
    ctx = canvas.getContext("2d");

var loadImage = (key, src, callback) => {
    imgs[key] = new Image();
    imgs[key].src = src;
    imgs[key].addEventListener("load", () => callback(null, key));
};

var render = () => {
    ctx.drawImage(imgs.background, 0, 0);
    for (let i = 0, l = molePosition.length; i < l; i++)
        ctx.drawImage(imgs.mole, molePosition[i].x, molePosition[i].y);
};

var clickInteract = (event) => {

    var click = {
        x: event.clientX,
        y: event.clientY
    };

    // console.log("click", click);


    for (let i = 0, l = holePositions.length; i < l; i ++) {
        if (click.x >= holePositions[i].x && click.x <= holePositions[i].x + holeSize.width &&
           click.y >= holePositions[i].y && click.y <= holePositions[i].y + holeSize.height) {
            console.log("Clicou!", {i})
        }
    };

    // console.log(imgs.mole.width);
};

canvas.addEventListener("click", clickInteract);

async.parallel({
    background: (next) => loadImage("background", "ground.png", next),
    mole: (next) => loadImage("mole", "mole.png", next)
},
    () => render()
);