TA貢獻1859條經驗 獲得超6個贊
您需要添加一個不渲染任何內容的狀態。例如，只需將 cpu 選擇設置為 4 并更新渲染函數。然后你可以像這里一樣添加睡眠功能。我做了一些我認為你想要的工作示例
我對你的代碼所做的主要更改是
this.sleep(1500).then(() => {
? ? ? const index = getRandomInt(3);
? ? ? this.setState({
? ? ? ? houseChoice: index
? ? ? });
? ? ? const results = this.getResults(choiceName, index).toUpperCase();
? ? ? this.setState({
? ? ? ? results: results
? ? ? });
? ? ? /*****************calling setScore()********************/
? ? ? if (results === "WIN") {
? ? ? ? this.props.setScore(1);
? ? ? } else if (results === "LOSE") {
? ? ? ? this.props.setScore(-1);
? ? ? } else {
? ? ? ? this.props.setScore(0);
? ? ? }
? ? });
其中handleClick執行超時。
在結果頁面中我添加了
this.state.houseChoice === 2 ? (
? ? ? ? ? ? ?/*3*/
? ? ? ? ? ? ? <div
? ? ? ? ? ? ? ? className="elem-container result-container"
? ? ? ? ? ? ? ? style={{
? ? ? ? ? ? ? ? ? borderColor: "hsl(349, 71%, 52%)",
? ? ? ? ? ? ? ? ? color: "hsl(349, 70%, 56%)"
? ? ? ? ? ? ? ? }}
? ? ? ? ? ? ? >
? ? ? ? ? ? ? ? <img src={rock} className="choice-image" alt="img" />
? ? ? ? ? ? ? </div>
? ? ? ? ? ? ) : null
TA貢獻1786條經驗 獲得超13個贊
人類玩家選擇一步棋后，不要立即讓 CPU 選擇一步棋。實現componentDidUpdate生命周期函數并將CPU的選擇邏輯移到那里。這也需要移動對獲勝邏輯的檢查。
/*function that handles the user choice*/
handleClick = (
choiceName,
choiceImage,
choiceBorderColor,
choiceExtraBorderColor
) => () => {
this.setState({
onScreen: false,
choiceName,
choiceImage,
choiceBorderColor,
choiceExtraBorderColor
});
};
一旦人類玩家選擇了一個動作，就獲得房子的隨機動作，但不要立即將狀態更新排入隊列，而是稍后使用進入setTimeout更新狀態。
僅當兩個玩家都選擇了移動但結果尚未計算并存儲在狀態中時才檢查勝利。
componentDidUpdate(prevProps, prevState) {
if (
prevState.choiceName !== this.state.choiceName &&
this.state.choiceName
) {
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
const index = getRandomInt(3);
setTimeout(() => {
this.setState({
houseChoice: index
});
}, 2000);
}
if (
this.state.choiceName &&
[0, 1, 2].includes(this.state.houseChoice) && // We want 0 to be truthy :)
!this.state.results
) {
const results = this.getResults(
this.state.choiceName,
this.state.houseChoice
).toUpperCase();
this.setState({
results: results
});
/*****************calling setScore()********************/
if (results === "WIN") {
this.props.setScore(1);
} else if (results === "LOSE") {
this.props.setScore(-1);
} else {
this.props.setScore(0);
}
}
}
有條件地渲染“等待 CPU”UI
<h4 className="result-title">
{this.state.houseChoice === ""
? "THE HOUSE CHOOSING"
: "THE HOUSE PICKED"}
</h4>
{this.state.houseChoice === "" ? (
<div>...</div>
) : this.state.houseChoice === 0 ? (
/*1*/
<div
className="elem-container result-container"
style={{
borderColor: "hsl(230, 89%, 62%)",
color: "hsl(230, 89%, 65%)"
}}
>
<img src={paper} className="choice-image" alt="img" />
</div>
) : this.state.houseChoice === 1 ? (
/*2*/
<div
className="elem-container result-container"
style={{
borderColor: "hsl(39, 89%, 49%)",
color: "hsl(40, 84%, 53%)"
}}
>
<img src={scissors} className="choice-image" alt="img" />
</div>
) : (
/*3*/
<div
className="elem-container result-container"
style={{
borderColor: "hsl(349, 71%, 52%)",
color: "hsl(349, 70%, 56%)"
}}
>
<img src={rock} className="choice-image" alt="img" />
</div>
)}
有條件地渲染結果并重試按鈕。
<div className="final-result-container">
{this.state.results && (
<>
<h1 className="bold">YOU {this.state.results}</h1>
<TryAgain onClick={this.handleTryAgainClick} />
</>
)}
</div>
再次玩時不要忘記重置所有狀態
handleTryAgainClick() {
this.setState({
onScreen: true,
choiceName: "",
choiceImage: "",
choiceBorderColor: "",
choiceExtraBorderColor: "",
houseChoice: "",
results: ""
});
}
TA貢獻1784條經驗 獲得超7個贊
我不確定我的問題是否正確，但這里是，如果要在渲染上設置延遲，那么在做出選擇之前不要渲染。如果應用程序必須在玩家輸入后執行某些操作，請使用 async wait 異步執行以下操作。
TA貢獻1806條經驗 獲得超5個贊
如果我猜對了，也許 lodash 的 Debounce 會為你提供答案。我在我的井字游戲應用程序中使用它來延遲計算機移動。只需從 NPM 添加即可
npm install lodash —save-dev
然后導入到你的文件中
import {debounce} from 'lodash';不斷創建將去抖的內容，您從 lodash 中調用了它。500 是時間，您想要移動延遲多少時間。在這種情況下，它將是 0.5 秒。
const debounceComputerMove = debounce(()=>{
computerMove();
},500);然后當你想調用computerMove函數時，調用debounceComputerMove而不是computerMove()
舉報