Блог

Я пытаюсь добавить счет в игру «Камень, ножницы, бумага», используя React. Я очень новичок в react, поэтому не совсем уверен, правильно ли я его реализую.

 class App extends Component {
state = {
    playerOne: weapons[0],
    computer: weapons[0],
    winner: "",
    playerWins: 0,
    computerWins: 0,
    draws :0

};

startGame = () => {
    let counter = 0;
    let gameInterval = setInterval(() => {
        counter   ;
        this.setState({
            computer: weapons[Math.floor(Math.random() * weapons.length)],
            winner: "",
            playerWins: 0,
            computerWins: 0,
            draws :0
        });
        if (counter > 5) {
            clearInterval(gameInterval);
            this.setState({
                winner: this.Winner()
            });
        }
    }, 250);
};

Winner = () => {
    const { playerOne, computer } = this.state;

    if (playerOne === computer){
        draws  ;
        return "It's a Draw!!";

    } else if (
        (playerOne === "rock" amp;amp; computer === "scissors") ||
        (playerOne === "scissors" amp;amp; computer === "paper") ||
        (playerOne === "paper" amp;amp; computer === "rock")
    ) {
        playerWins  ;
        return "Player One Wins!"
        
    } else {
        computerWins  
        return "The computer Wins!"
    }
};

selectWeapon = weapon => {
    this.setState({
        playerOne: weapon,
        winner: "",
        score: 0
    });
};

render() {
    const { playerOne, computer, winner, score } = this.state;
    return (
      <>
        <h1 style={{ textAlign: "center" }}>Rock Paper Scissors</h1>

        <div>
          <Player weapon={playerOne} />
          <Player weapon={computer} />
        </div>
        <div>
          <button
            className="weaponBtn"
            onClick={() => this.selectWeapon("rock")}
          >
            rock
          </button>
          <button
            className="weaponBtn"
            onClick={() => this.selectWeapon("paper")}
          >
            paper
          </button>
          <button
            className="weaponBtn"
            onClick={() => this.selectWeapon("scissors")}
          >
            scissor
          </button>
        </div>
        <div className="winner">{winner ? this.Winner() : null}</div>
        <div className="winner">Player One: {score ? null: playerWins}</div>
        <div className="winner">Computer: {score ? null: computerWins}</div>
        <div className="winner">Draws: {score ? null: draws}</div>
        <button type="button" onClick={this.startGame}>
          Start!
        </button>
      </>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);**strong text**
 

У меня возникла проблема, когда счет увеличивается на два, если это ничья, победа компьютера или победа игрока. Я не уверен, почему он увеличивается на 2 каждый раз, когда игра заканчивается. Я еще не совсем понимаю свойство «реквизит», поэтому, думая, что это может быть как-то связано с этим, я был бы очень признателен за любую помощь.

Спасибо.

вместо ничьих , выигрышей игрока , выигрышей компьютера вы должны устанавливать их в состояние.

Вот как установить состояние.

 this.setState( prev => ({ ...prev, draws: prev.draws 1}))

this.setState( prev => ({ ...prev, playerWins: prev.playerWins 1}))

this.setState( prev => ({ ...prev, computerWins: prev.computerWins 1 }))
 

Кроме того, вы не объявили «счет» в своем состоянии. Как вы получили оценку?

Вы должны хранить все в состоянии.