Making a hint button for a card memory game-CodePudding

I have a 'hint' button on my card memory game which should turn all unmatched cards face up for 1 second. I have the code for that working. However, instead of showing all the card faces (e.g., 'sun', 'Earth', 'Mars') it's only showing one card face image in all the cards (e.g., 'mars', 'mars', 'mars'). The card it shows varies every time I refresh it could be all 'Earth' or all 'Mars' etc. but the issue still remains, only one card image shows.

I have my card face images in a randomised array. Now I'm not sure how to get the hint button to show all of the card faces. I hope this makes sense? I'll add a photo for an example: https://imgur.com/a/pqXJL0M

It also turns the cards that have already been matched... but that's a problem I can work out later maybe.

Here's the HTML for my cards:

<div >
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
</div>

Here's the JS/jQuery for randomising them:

let cards = [
  "Elements/images/EarthCard.jpg",
  "Elements/images/EarthCard.jpg",
  "Elements/images/JupiterCard.jpg",
  "Elements/images/JupiterCard.jpg",
  "Elements/images/MarsCard.jpg",
  "Elements/images/MarsCard.jpg",
  "Elements/images/MercuryCard.jpg",
  "Elements/images/MercuryCard.jpg",
];
shuffle();
//Function to shuffle array order
function shuffle() {
  let random = 0;
  let temp = 0;
  for (i = 1; i < cards.length; i  ) {
    random = Math.round(Math.random() * i);
    temp = cards[i];
    cards[i] = cards[random];
    cards[random] = temp;
  }
  assignCards();
} //End of shuffle func
//function to assign shuffled array to cards
function assignCards() {
  $(".card").each(function(index) {
    $(this).attr("data-card-value", cards[index]);
  });
  clickHandlers();
} //End of assignCards func
//Function to add 'selected' tag to clicked on cards
function clickHandlers() {
  $(".card").on("click", function() {
    $(this)
      .html("<img src='"   $(this).data("cardValue")   "'/>")
      .addClass("selected");
    checkMatch();
  });
} // End of clickHandlers function

Here's the hint function I have:

//Function to turn cards when hint button clicked
function showHint() {
  {
    //show card hint side
    $(".card")
      .html("<img src='"   $(".card").data("cardValue")   "'/>")
      .show();
  }
  setTimeout(function() {
    //show card back side
    $(".card").html("<img src= 'Elements/images/CardBack.jpg' />").show();
  }, 1000);
  score = score - hintclick;
  $(".scorecounter").html("Score: "   score);
}

If you need the code for the game play, I can edit to add that too, I don't want to overload the post with too much code.

I assume the issue is in my hint function and I need to add something to that, but I'm not sure exactly what to add to it and when I read solutions to other peoples similar problems, I'm just not sure how to implement that into my code.

CodePudding user response：

You are going to need to loop through each of the cards instead of applying the image to all of them at once.

$(".card").each(function(){
  $(this).html("<img src='"   $(this).data("cardValue")   "'/>").show();
});