Memory game, JavaScript ,

Question

Siema,

Zacząlem tworzyć memory game. Po klkniciue w diva, ktory znajduje sie na planszy, chce by dodawalo do niego dziecko 'img' z tablicy i jest ok, dodaje tak jak chcialem. Teraz chcialbym w if napisac warunek ze jezeli np ten div ma juz zdjecie, czyli ma juz klase 'has-img' nie mozesz do niego dodac dziecka. Jest możliwe cos takiego ??? . Poprostu chce, aby img juz bylo i nie mogelo sie dodac kolejny raz . Szukam dłuższą chwile, ale nie moge tego znalesc. Bede wdzieczny za pomoc i jesli ktoś mógłby luknąc na kod i powiedziec mi czy idzie to w dobrym kierunku :)  Pozdrawiam :)

  <div data-aos-delay="800" data-aos="fade-right" class="moves-scores">
     <!--  liczba punktów -->
     <p>score</p>
    <div class="score"></div>
    <!--  liczba ruchów -->
    <p>moves</p>
    <div class="moves"></div>
    </div>
    <div data-aos-delay="500" data-aos="fade-down" class="parent">
    <h1>Memory game</h1>
    <div class="board">
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
    </div>
</div>

<div data-aos-delay="800" data-aos="fade-left" class="timer-buttons">
<button class="start">start</button>
<button class="pause">pause</button>
<button class="restart">restart</button>
<div class="timer"><p>00 : 00</p></div>
</div>
    

const board = document.querySelector('.board')

const images = [...document.querySelectorAll('.board > div')];

// Tablica z której bede pobierać zdjęcia.
let imagesArray = [
    'images/chesse.png', 
    'images/cola.png', 
    'images/cupcake.png', 
    'images/fries.png', 
    'images/hamburger.png', 
    'images/icecream.png',
    'images/pancake.png',  
    'images/pizza.png', 
    'images/chesse.png', 
    'images/cola.png', 
    'images/cupcake.png', 
    'images/fries.png', 
    'images/hamburger.png', 
    'images/icecream.png',
    'images/pancake.png',  
    'images/pizza.png'];

function drawImages() {
    images.forEach(image => {
        image.addEventListener('click', () => {

        let randomImg = imagesArray.splice(Math.floor(Math.random() * imagesArray.length),1)[0];
        const img = document.createElement('img');
        img.src = randomImg;
        image.appendChild(img);
        image.classList.add('has-img');
        })
    })
    
}
drawImages();

 

Answer 1

Musisz po prostu sprawdzić po kliknięciu czy dany div zawiera klasę .has-img za pomocą metody .classList.contains() np.:

function drawImages() {
    images.forEach(image => {
        image.addEventListener('click', () => {
          if (!this.classList.contains('has-img') {
          let randomImg = imagesArray.splice(Math.floor(Math.random() * imagesArray.length),1)[0];
          const img = document.createElement('img');
          img.src = randomImg;
          image.appendChild(img);
          image.classList.add('has-img');
        })
        }
    })
}

1. https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/contains

2. https://developer.mozilla.org/pl/docs/Web/API/Element/classList

Comments

Przepraszam, bo chyba zle sformuowałem pytanie, bardziej chodziło mi o to. Co mam wpisac nie w warunku, a w if, żeby takiego dziecka nie dodało drugi raz, dawałem taki warunke jaki mi podałeś na początku, ale nie o warunek chodzi a to, że jesli dany div.classlist.contains('has-img") to kiedy w niego klikne nie moge juz do niego dodac dziecka.  

 if (image.classList.contains('has-img')) {

             ...nie mozesz dodac dziecka...

          }

---

Hmmm... Przecież dlatego w if-ie wstawiłem na początku znak negacji (!). Czy z nim też nie działa?

---

kurcze teraz działa, zamiast this musialem dac poprostu image. Dziękuje pięknie za pomoc i pozdrawiam. 

---

Pozdrawiam wzajemnie 

PS. Faktycznie nie zauważyłem, że tam jest pętla forEach i this nie zadziała...

---

this wewnątrz event listenera powinno zadziałać (tj. wskazać element, do którego jest podpięty listener) jeśli funkcja nie będzie strzałkowa.

Answer 2

Możesz także załadować obrazki po kliknięciu button-a start,  a w imge.click dodać tylko "obracanie" (pojawienie się obrazka) karty itp.

 

przyklad

<div data-aos-delay="800" data-aos="fade-right" class="moves-scores">
  <!--  liczba punktów -->
  <p>score</p>
  <div class="score"></div>
  <!--  liczba ruchów -->
  <p>moves</p>
  <div class="moves"></div>
</div>
<div data-aos-delay="500" data-aos="fade-down" class="parent">
  <h1>Memory game</h1>
  <div class="board">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

<div data-aos-delay="800" data-aos="fade-left" class="timer-buttons">
  <button class="start">start</button>
  <button class="pause">pause</button>
  <button class="restart">restart</button>
  <div class="timer"><p>00 : 00</p></div>
</div>

* {
  box-sizing: border-box;
}
.board {
  max-width: 620px;
}
.board div {
  display: inline-block;
  width: 150px;
  height: 200px;
  border: 2px solid rgba(0,0,0,0.2);
  transition: border-color .65s ease-in-out;
  overflow: hidden;
}
.board div:hover {
  border-color: rgba(0,0,0,1);
}
.board div img {
  opacity: 0;
  transition: opacity 0.5s;
}

const board = document.querySelector('.board'),
      cards = board.querySelectorAll('div'),
      start_button = document.querySelector('.start');

// Tablica z której bede pobierać zdjęcia.
const imagesArray = [
  'https://picsum.photos/150/200/?random=1', 
  'https://picsum.photos/150/200/?random=2', 
  'https://picsum.photos/150/200/?random=3',
  'https://picsum.photos/150/200/?random=4',
];

start_button.addEventListener('click', start);

function start() {
  start_button.disabled = true;
  initializeBoard();
}

function initializeBoard() {
  for (let card of cards) {
    const img = document.createElement('IMG');
    img.src = imagesArray[randomIndex()];
    card.appendChild(img);
    img.addEventListener('click', checkCard);
    img.addEventListener('dragstart', (e) => { e.preventDefault(); });
  }
}

function checkCard(e) {
  const card = e.target;
  if (card.style.opacity == 0) {
    card.style.opacity = 1;
    setTimeout(() => {
      card.style.opacity = 0;
    }, 2000); 
  }
}

function randomIndex() {
  return Math.floor(Math.random() * imagesArray.length);
}