Looking for some assistance with JavaScript code I've written for a memory game on Khan Academy. I'm struggling to figure out how to change the color of a tile when the mouse hovers over it. I attempted to draw a star on a tile within the "if (tiles[i].isUnderMouse(mouseX, mouseY))" section in the mouseClicked function as a test. However, this approach only worked when the mouse was clicked and didn't persist once new tiles were drawn. I'm unsure where to start to address this issue. Any guidance would be appreciated.
// Define variables
var fdImage = image(getImage("avatars/questionmark"), this.x, this.y, this.width, this.width);
var Tile = function(x, y, face) {
this.x = x;
this.y = y;
this.face = face;
this.width = 70;
};
Tile.prototype.drawFaceDown = function() {
fill(214, 247, 202);
strokeWeight(2);
rect(this.x, this.y, this.width, this.width, 10);
image(getImage("avatars/questionmark"), this.x, this.y, this.width, this.width);
this.isFaceUp = false;
};
// More code here...