我试图使我的游戏更加逼真，但我不知道如何或在哪里使用setTimeout / setInterval方法，并且我不知道还要尝试什么。
constructor() {
super();
this.state = {
rockPaperScissorsComputer: ['Rock', 'Paper', 'Scissors'],
rockPaperScissorsUser: null,
random: null
};
this.handleClickRock = this.handleClickRock.bind(this);
this.handleClickPaper = this.handleClickPaper.bind(this);
this.handleClickScissors = this.handleClickScissors.bind(this);
}
handleClickRock() {
const min = 0;
const max = 3;
const random = min + (Math.random() * (max - min));
this.setState({ random })
this.setState({
rockPaperScissorsUser: 'Rock'
})
}
handleClickPaper() {
const min = 0;
const max = 3;
const random = min + (Math.random() * (max - min));
this.setState({ random })
this.setState({
rockPaperScissorsUser: 'Paper'
})
}
handleClickScissors() {
const min = 0;
const max = 3;
const random = min + (Math.random() * (max - min));
this.setState({ random })
this.setState({
rockPaperScissorsUser: 'Scissors'
})
function after() {
document.getElementsByClassName('x')
}
setInterval(after, 1500)
}
render() {
return (
<div>
<button value="Click me!" onClick=
{this.handleClickRock}>Rock</button>
<button value="Click me!" onClick={this.handleClickPaper}>Paper</button>
<button value="Click me!" onClick={this.handleClickScissors}>Scissors</button>
enter code here
<h2 className="x">You selected:
{this.state.rockPaperScissorsUser}</h2>
<h1 className='x'>The computer selected: {this.state.rockPaperScissorsComputer[Math.floor(this.state.random)]}</h1>
{
this.state.rockPaperScissorsComputer[Math.floor(this.state.random)]
===
this.state.rockPaperScissorsUser ? <h1> It was a tie
</h1> :
this.state.rockPaperScissorsUser ===
'Rock' && Math.floor(this.state.random) == 2
|| this.state.rockPaperScissorsUser === 'Paper' &&
Math.floor(this.state.random) === 0 ||
this.state.rockPaperScissorsUser == 'Scissors' &&
Math.floor(this.state.random) === 1
? <h1 className="ribbon">You Win</h1> : <h1>The computer wins</h1>
}
</div>
);
}
我认为它应该暂停，直到它显示出获胜者，但没有出现。我尝试放入setInterval按钮，但是它不起作用。我正在尝试将延迟时间设置为大约一秒钟，并在一秒钟结束后让游戏显示结果。
最佳答案
我认为将游戏的结果消息从render方法移到state可以最有效地理解计算时间。
constructor() {
super();
this.state = {
rockPaperScissorsComputer: ['Rock', 'Paper', 'Scissors'],
rockPaperScissorsUser: null,
random: null,
outcome: '' // new state for containing the outcome message
};
this.handleClick = this.handleClick.bind(this);
}
同样，将三个单击处理程序组合为一个，使得在处理程序中仅使用一次setTimeout可以使冗余度降低三倍。
此函数将结果设置为''，计算结果和结果消息，然后在1000毫秒后设置结果状态。
handleClick(type) {
this.setState({outcome: ''}, () => {
const min = 0;
const max = 3;
const random = Math.floor(min + (Math.random() * (max - min)));
this.setState({ random })
this.setState({
rockPaperScissorsUser: type
})
const tie = (this.state.rockPaperScissorsComputer[random] === type);
const win = (
((type === 'Rock') && (random === 2)) ||
((type === 'Paper') && (random === 0)) ||
((type === 'Scissors') && (random === 1))
);
setTimeout(() => {
// Important part here. This occurs after the 2 parameter to setTimeout (1000 milliseconds)
this.setState({outcome: (
<h1 className={win && 'ribbon'}>{
tie ? 'It was a tie' :
win ? 'You win' : 'The computer wins'
}</h1>
})
}, 1000)
})
}
现在您的渲染看起来像：
render() {
return (
<div>
<button value="Click me!" onClick={() => this.handleClick('Rock')}>Rock</button>
<button value="Click me!" onClick={() => this.handleClick('Paper')}>Paper</button>
<button value="Click me!" onClick={() => this.handleClick('Scissors')}>Scissors</button>
enter code here
<h2 className="x">You selected: {this.state.rockPaperScissorsUser}</h2>
<h1 className='x'>The computer selected: {this.state.rockPaperScissorsComputer[Math.floor(this.state.random)]}</h1>
{this.state.outcome}
</div>
);
}