matchinggame.js

javascript:(function() {  const fruitsAndVeggies = [    "🍎", "🍉", "🍓", "🍇",    "🍊", "🍋", "🥕", "🌽"  ];  function shuffle(array) {    for (let i = array.length - 1; i > 0; i--) {      const j = Math.floor(Math.random() * (i + 1));      [array[i], array[j]] = [array[j], array[i]];    }    return array;  }  function createGrid() {    const grid = document.createElement("div");    grid.style.display = "grid";    grid.style.gridTemplateColumns = "repeat(4, 1fr)";    grid.style.gridGap = "5px";    grid.style.position = "fixed";    grid.style.top = "0";    grid.style.left = "0";    grid.style.padding = "10px";    grid.style.backgroundColor = "#ffffff";    grid.style.border = "2px solid #000000";    grid.style.zIndex = "999999";    const shuffledCards = shuffle(fruitsAndVeggies.concat(fruitsAndVeggies));    let firstCard = null;    let secondCard = null;    shuffledCards.forEach((card) => {      const cardElement = document.createElement("div");      cardElement.style.width = "50px";      cardElement.style.height = "50px";      cardElement.style.backgroundColor = "#000000";      cardElement.style.color = "#ffffff";      cardElement.style.fontSize = "30px";      cardElement.style.textAlign = "center";      cardElement.style.lineHeight = "50px";      cardElement.style.cursor = "pointer";      cardElement.textContent = "";      cardElement.isFlipped = false;      cardElement.addEventListener("click", function() {        if (!this.isFlipped) {          if (!firstCard) {            firstCard = this;            this.isFlipped = true;            this.textContent = card;            this.style.backgroundColor = "#ffffff";            this.style.color = "#000000";          } else if (!secondCard) {            secondCard = this;            this.isFlipped = true;            this.textContent = card;            this.style.backgroundColor = "#ffffff";            this.style.color = "#000000";            if (firstCard.textContent === secondCard.textContent) {              firstCard = null;              secondCard = null;              const allCards = document.querySelectorAll(".card");              let isDone = true;              allCards.forEach((card) => {                if (!card.isFlipped) {                  isDone = false;                }              });              if (isDone) {                alert("You win!");              }            } else {              setTimeout(() => {                firstCard.textContent = "";                secondCard.textContent = "";                firstCard.style.backgroundColor = "#000000";                secondCard.style.backgroundColor = "#000000";                firstCard.style.color = "#ffffff";                secondCard.style.color = "#ffffff";                firstCard.isFlipped = false;                secondCard.isFlipped = false;                firstCard = null;                secondCard = null;              }, 1000);            }          }        }      });      cardElement.classList.add("card");      grid.appendChild(cardElement);    });    document.body.appendChild(grid);  }  createGrid();})();