世界上最伟大的投资就是投资自己的教育
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
type ONGOING_GAME = -1;
const ONGOING_GAME = -1;
enum Player {
None = 0,
One = 1,
Two = 2
}
interface IState {
board: Player[];
nextPlayerTurn: Player,
gameIsWon: Player | ONGOING_GAME
}
class App extends Component<{}, IState> {
state = {
board: [Player.None,
Player.None,
Player.None,
Player.None,
Player.None,
Player.None,
Player.None,
Player.None,
Player.None],
nextPlayerTurn: Player.One,
gameIsWon: ONGOING_GAME
}
public checkIfGameIsOver = (board: Player[]) => {
if (board[0] === board[1] && board[1] === board[2] && board[2] !== Player.None) {
return board[0];
} else if (board[3] === board[4] && board[4] === board[5] && board[5] !== Player.None) {
return board[3];
} else if (board[6] === board[7] && board[7] === board[8] && board[8] !== Player.None) {
return board[8];
} else if (board[0] === board[3] && board[3] === board[6] && board[6] !== Player.None) {
return board[0];
} else if (board[1] === board[4] && board[4] === board[7] && board[7] !== Player.None) {
return board[1];
} else if (board[2] === board[5] && board[5] === board[8] && board[8] !== Player.None) {
return board[2];
} else if (board[0] === board[4] && board[4] === board[8] && board[8] !== Player.None) {
return board[0];
} else if (board[2] === board[4] && board[4] === board[6] && board[6] !== Player.None) {
return board[2];
}
return ONGOING_GAME;
}
public handleCellClick = (index: number) => {
const { board, nextPlayerTurn } = this.state;
if (board[index] !== Player.None) {
return
}
let newBoard = board.slice();
newBoard[index] = nextPlayerTurn
let gameIsWon = this.checkIfGameIsOver(board);
this.setState({
board: newBoard,
nextPlayerTurn: 3 - nextPlayerTurn
})
}
public renderCell = (index: number) => {
const { board } = this.state;
return (
<div className="cell" data-player={ board[index] } key={ index } onClick={ () => this.handleCellClick(index) }></div>
)
}
public renderBoard = () => {
const { board } = this.state;
return (
<div className="board-container">
{ board.map((value, key) => this.renderCell(key)) }
</div>
)
}
public renderStatus = () => {
return (
<div style={{ marginTop: "30px" }}>
{ "Player 1 is green" } <br />
{ "Player 2 is red" } <br />
{ "Game is ongoing" }
</div>
)
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
</header>
{ this.renderBoard() }
{ this.renderStatus() }
</div>
);
}
}
export default App;
01:331FreeTypeScript 结合 React 写三连棋游戏 免费视频教程 #1 课程介绍与准备
04:082FreeTypeScript 结合 React 写三连棋游戏 免费视频教程 #2 学习资源介绍与项目搭建
04:313FreeTypeScript 结合 React 写三连棋游戏 免费视频教程 #3 类组件传递参数
02:114FreeTypeScript 结合 React 写三连棋游戏 免费视频教程 #4 类组件传递 state
03:065FreeTypeScript 结合 React 写三连棋游戏 免费视频教程 #5 Function 组件使用 props 和 state(今天第三更)
03:366FreeTypeScript 结合 React 写三连棋游戏 免费视频教程 #6 高效使用 vscode 来辅助化开发 TypeScript
04:417FreeTypeScript 结合 React 写三连棋游戏 免费视频教程 #7 input 框事件
05:368FreeTypeScript 结合 React 写三连棋游戏 免费视频教程 #8 开始写游戏画出棋盘
06:249FreeTypeScript 结合 React 写三连棋游戏 免费视频教程 #9 如何思考
09:1610FreeTypeScript 结合 React 写三连棋游戏 免费视频教程 #10 添加两个玩家
04:4611FreeTypeScript 结合 React 写三连棋游戏 免费视频教程 #11 如何判断输赢
05:03FreeTypeScript 结合 React 写三连棋游戏 免费视频教程 #12 判断输赢
07:1213FreeTypeScript 结合 React 写三连棋游戏 免费视频教程 #13 完结(第三更,准备开始录 antd pro 企业级开发课程)
▬▬▬▬▬▬ 联系我 👋 ▬▬▬▬▬▬
知乎:https://www.zhihu.com/people/rails365
掘金:https://juejin.cn/user/1574156379888263
b 站:https://space.bilibili.com/31152817
Github:https://github.com/hfpp2012
Youtube:https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg
Discord:https://discord.gg/5rdjnEnU7F
Twitter:https://twitter.com/qiuzhi99pro
Facebook:https://twitter.com/qiuzhi99pro
Instagram:https://www.facebook.com/pro.qiuzhi/
▬▬▬▬▬▬ 微信相关 👋 ▬▬▬▬▬▬




© 汕尾市求知科技有限公司 | 专业版网站 | 在线学员:1137
粤公网安备 44152102000088号
| 粤ICP备19038915号