• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Papier, kamień, nożyce - problem z usuwaniem klasy ze spana.

0 głosów
153 wizyt
pytanie zadane 14 marca 2020 w JavaScript przez niezalogowany

Napisałem prostą grę "Papier, Kamień, Nożyce", w której gracz gra przeciwko komputerowi. Wszystko działa tak jak bym tego chciał z jednym wyjątkiem, mianowicie w HTMLu umieściłem spana, który zawiera informację o remisie, gdy dojdzie do remisu dodawana jest do niego klasa z animacją, a następnie zabierana po kolejnym wywołaniu metody Game.startGame(). Problem, polega na tym, że wszystko działa w porządku, klasa jest usuwana i dodawana po każdym wywołaniu metody, do momentu aż nie mamy kilku remisów pod rząd, wtedy klasa zostaje i jest odejmowana dopiero wtedy gdy gracz i komputer wybiorą różne opcje.

 

Kod do całości: https://codepen.io/CvtS/pen/oNXqJoZ

 

Tutaj umieszczam klasę z problemem.

class Game {
  constructor() {
    this.optionsImg = document.querySelectorAll('.img');
    this.optionsBtns = document.querySelectorAll('button');
    this.optionsBtns.forEach(option => option.addEventListener('click', this.startGame.bind(this)))

    this.youWins = document.querySelector('.results > .you-win');
    this.draw = document.querySelector('.results > .draw');
    this.PcWins = document.querySelector('.results > .pc-win');

    this.stats = new Stats(0, 0, 0);

    this.render.call(this, this.stats.getStats());
  }

  startGame(e) {
    this.optionsImg.forEach(choice => choice.className = 'img');
    //Tutaj
    if (this.draw.classList.contains('draw-animation')) {
      this.draw.classList.toggle('draw-animation');
    }


    this.choice = new Choice(e.target.dataset.option);

    const yourChoice = this.choice.getYourChoice(),
      PcChoice = this.choice.getPcChoice();

    if (yourChoice === PcChoice) {
      [...this.optionsImg].find(choice => choice.dataset.option === PcChoice && choice.dataset.option === PcChoice).classList.add('draw-color');
      //Tutaj
      this.draw.classList.toggle('draw-animation');
    } else {
      [...this.optionsImg].find(choice => choice.dataset.option === yourChoice).classList.add('player-choice');
      [...this.optionsImg].find(choice => choice.dataset.option === PcChoice).classList.add('pc-choice');
    }

    this.stats.refreshStats(Result.whoWin(yourChoice, PcChoice));

    this.render.call(this, this.stats.getStats());
  }

  render(stats) {
    this.youWins.textContent = `You: ${stats.wins}`;
    this.PcWins.textContent = `PC: ${stats.loses}`;
  }
}

 

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
0 odpowiedzi 938 wizyt
+2 głosów
2 odpowiedzi 1,783 wizyt
pytanie zadane 24 listopada 2017 w JavaScript przez Rafal2 Nowicjusz (140 p.)
0 głosów
1 odpowiedź 3,317 wizyt
pytanie zadane 5 lutego 2017 w JavaScript przez zawad Początkujący (270 p.)

93,599 zapytań

142,524 odpowiedzi

322,993 komentarzy

63,084 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Kursy INF.02 i INF.03
...