内存游戏Javascript中瓷砖的悬停状态

Question

我有一个可汗学院的记忆游戏的JavaScript代码，我不知道如何使一个瓷砖改变颜色时，鼠标在它上面。作为一个测试，我尝试在mouseClicked函数中的"if (tilesi.isUnderMouse(mouseX，mouseY))“中将鼠标移到磁贴上时在磁贴上绘制一颗星，但当然，这只在鼠标单击时才起作用，因为磁贴在绘图函数中，所以在下一次单击后，星将被放在新的磁贴集后面。我真的不知道从哪里开始做这个。有谁可以帮我？

//Card face down image variable
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;
};

Tile.prototype.drawFaceUp = function() {
    fill(214, 247, 202);
    strokeWeight(2);
    rect(this.x, this.y, this.width, this.width, 10);
    image(this.face, this.x, this.y, this.width, this.width);
    this.isFaceUp = true;
};

Tile.prototype.isUnderMouse = function(x, y) {
    if ( x >= this.x && x <= this.x + this.width  &&
        y >= this.y && y <= this.y + this.width ) {


        }
    return x >= this.x && x <= this.x + this.width  &&
        y >= this.y && y <= this.y + this.width;



};

// Global config
var NUM_COLS = 5;
var NUM_ROWS = 4;

// Declare an array of all possible faces
var faces = [
    //saplings
    getImage("avatars/leafers-seed"),
    getImage("avatars/leafers-seedling"),
    getImage("avatars/leafers-sapling"),
    getImage("avatars/leafers-tree"),
    getImage("avatars/leafers-ultimate"),
    getImage("avatars/piceratops-seed"),
    getImage("avatars/piceratops-seedling"),
    getImage("avatars/piceratops-sapling"),
    getImage("avatars/piceratops-tree"),
    getImage("avatars/piceratops-ultimate"),
    getImage("avatars/aqualine-seed"),
    getImage("avatars/aqualine-seedling"),
    getImage("avatars/aqualine-sapling"),
    getImage("avatars/aqualine-tree"),
    getImage("avatars/aqualine-ultimate"),
    //figures
    getImage("avatars/marcimus"),
    getImage("avatars/mr-pants"),
    getImage("avatars/mr-pink"),
    getImage("avatars/old-spice-man"),
    getImage("avatars/orange-juice-squid"),
    getImage("avatars/purple-pi"),
    getImage("avatars/spunky-sam"),
    //robots
    getImage("avatars/robot_female_1"),
    getImage("avatars/robot_female_2"),
    getImage("avatars/robot_female_3"),
    getImage("avatars/robot_male_1"),
    getImage("avatars/robot_male_2"),
    getImage("avatars/robot_male_3"),
    //important figures
    getImage("creatures/Hopper-Happy"),
    getImage("creatures/Hopper-Cool"),
    getImage("creatures/Hopper-Jumping"),
    getImage("creatures/OhNoes"),
    getImage("creatures/BabyWinston"),
    getImage("creatures/Winston"),
    //rpg material
    getImage("space/beetleship"),
    getImage("space/healthheart"),
    getImage("space/octopus"),
    getImage("space/planet"),
    getImage("space/rocketship"),
    getImage("space/star"),
];

// Make an array which has 2 of each, then randomize it
var possibleFaces = faces.slice(0);
var selected = [];
for (var i = 0; i < (NUM_COLS * NUM_ROWS) / 2; i++) {
    // Randomly pick one from the array of remaining faces
    var randomInd = floor(random(possibleFaces.length));
    var face = possibleFaces[randomInd];
    // Push twice onto array
    selected.push(face);
    selected.push(face);
    // Remove from array
    possibleFaces.splice(randomInd, 1);
}

// Now we need to randomize the array
selected.sort(function() {
    return 0.5 - Math.random();
});

// Create the tiles
var tiles = [];
for (var i = 0; i < NUM_COLS; i++) {
    for (var j = 0; j < NUM_ROWS; j++) {
        tiles.push(new Tile(i * 78 + 10, j * 78 + 40, selected.pop()));
    }
}

background(255, 255, 255);

// Now draw them face up
for (var i = 0; i < tiles.length; i++) {
    tiles[i].drawFaceDown();
}

var flippedTiles = [];
var delayStartFC = null;
var numTries = 0;

mouseClicked = function() {
    for (var i = 0; i < tiles.length; i++) {
        //
        if (tiles[i].isUnderMouse(mouseX, mouseY)) {

        // 
            if (flippedTiles.length < 2 && !tiles[i].isFaceUp) {
                tiles[i].drawFaceUp();
                flippedTiles.push(tiles[i]);
                if (flippedTiles.length === 2) {
                    numTries++;
                    if (flippedTiles[0].face === flippedTiles[1].face) {
                        flippedTiles[0].isMatch = true;
                        flippedTiles[1].isMatch = true;
                    }
                    delayStartFC = frameCount;
                    loop();
                }
            } 
        }
    }
    var foundAllMatches = true;
    for (var i = 0; i < tiles.length; i++) {
        foundAllMatches = foundAllMatches && tiles[i].isMatch;
    }
    if (foundAllMatches) {
        fill(0, 0, 0);
        textSize(20);
        text("You found them all in " + numTries + " tries!", 20, 375);
    }
};

draw = function() {
    if (delayStartFC && (frameCount - delayStartFC) > 30) {
        for (var i = 0; i < tiles.length; i++) {
            if (!tiles[i].isMatch) {
                tiles[i].drawFaceDown();
            }
        }
        flippedTiles = [];
        delayStartFC = null;
        noLoop();
    }
};

Answer 1

为了将悬停状态添加到此可汗学院挑战中的切片，您必须首先将新方法添加到切片对象

​

Tile.prototype.hoverState = function() {
    fill(150, 247, 202);
    strokeWeight(2);
    rect(this.x, this.y, this.width, this.width, 10);
    image(getImage("avatars/leaf-green"), this.x, this.y, this.width, this.width);
    this.isFaceUp = false;
};

​

之后，您将需要像这样使用mouseMoved：

​

mouseMoved = function() {
    for (var i = 0; i < tiles.length; i++) {
        if (tiles[i].isUnderMouse(mouseX, mouseY) && !tiles[i].isFaceUp) {
            tiles[i].hoverState();
        } else if (tiles[i].isFaceUp) {
            tiles[i].drawFaceUp();
        } else {
            tiles[i].drawFaceDown();
        }
    }
};

​