0
ReactでTic Tac Toeゲームを作成しています。今私は、私のアプリコンポーネントでプレーヤーの勝利のロジックを理解しようとしています。私はすでに配列と同様に彼らが勝つことができる可能な動きを持っています。テスト目的のために、midWinのif文を試しますが、うまくいかないようです。なぜそれが機能していないのか教えていただけますか？私はいくつかの奇妙な理由でJSのフィドルに自分のコードを表示することができませんが、ここに私のコードです：Tic Tac Toe- Reactで勝者を見つける
let data = {
"box":[
[ "", "", "" ],
[ "", "", "" ],
[ "", "", "" ]
],
"players": ['X','O']
}
class DataStore {
constructor(data, players) {
//store that data in the object
this.data = data;
this.players = players;
//empty array for our watchers
//watchers are objects that want to be informed about when the data changes
this.registeredWatchers = [];
}
//add a new watcher to the list
register(watcher) {
this.registeredWatchers.push(watcher);
}
setCrop(newDataState, row, col) {
//update data
this.data[row][col] = newDataState;
//inform all watching objects..
this.registeredWatchers.map((watcher) => {
watcher.dataUpdated();
})
}
reset() {
// this.data = data;
}
}
class Dispatcher {
constructor() {
this.registeredHandlers = []; //D:
}
register(callback) {
this.registeredHandlers.push(callback);
}
dispatch(action) {
//call every method in our registered handlers array
//with this action as an input
this.registeredHandlers.map((handler) => {
//call that individual function in the array..
handler(action);
})
}
reset(val){
}
}
class BoxComponent extends React.Component {
render() {
return (
<div
className="box"
onClick={this.handleClick.bind(this)}>
<span>{this.props.type}</span>
</div>);
}
handleClick() {
//try a test dispatch
if(this.props.type.length > 0) {
return false;
} else {
boxDispatcher.dispatch({ type: "pick", row: this.props.rowNum, col: this.props.colNum});
}
}
}
class GridComponent extends React.Component {
render() {
return(
<div>
<p>Player {this.props.turn} is next.</p>
{
//loop through all the rows...
this.props.box.map((row, rowNum) => {
//and write them out to the page..
return (<div className="row">
{
row.map((cropEntry, colNum) => {
return <BoxComponent type={cropEntry} rowNum={rowNum} colNum={colNum} turn={rowNum}/>
})
}
</div>);
})
}
</div>
)
}
}
class App extends React.Component {
constructor(props) {
//make sure this stays a react component
super(props);
this.state = {
turn: boxDataStore.players[0],
box: boxDataStore.data
}
//ensure we're listening to the data store
boxDataStore.register(this);
}
dataUpdated() {
this.setState(prevState => ({
box: boxDataStore.data,
// turn: cropDataStore.players,
turn: prevState.turn === 'X'
? boxDataStore.players[1]
: boxDataStore.players[0]
}))
}
render() {
return (
// renders out the whole data on the board
<div>
<h1>Tic Tac Toe </h1>
<button onClick={this.resetBoard.bind(this)}>Reset Board</button>
<button onClick={this.checkWinner.bind(this)}>Check Winner</button>
<GridComponent box={this.state.box} turn={this.state.turn} />
</div>
);
}
// rests the data back to the orginal state which is from the let data
resetBoard() {
const newBoxData = [
[ "", "", "" ],
[ "", "", "" ],
[ "", "", "" ]
]
boxDataStore.data = newBoxData;
this.setState({
box: boxDataStore.data
})
}
// end data that tells the update
// events that help users find out who the winner or the losers
checkWinner() {
//vertical wins
const topWin = [
this.state.box["0"]["0"],
this.state.box["0"]["1"],
this.state.box["0"]["2"]
];
const midWin = [
this.state.box["1"]["0"],
this.state.box["1"]["1"],
this.state.box["1"]["2"]
];
const bottom = [
this.state.box["2"]["0"],
this.state.box["2"]["1"],
this.state.box["2"]["2"]
];
// vertical wins end.
//horizontal wins
const horizMid = [
this.state.box["0"]["1"],
this.state.box["1"]["1"],
this.state.box["2"]["1"]
];
const horizleft = [
this.state.box["0"]["2"],
this.state.box["1"]["2"],
this.state.box["2"]["2"]
];
const horizright = [
this.state.box["0"]["0"],
this.state.box["1"]["1"],
this.state.box["2"]["2"]
];
//horiztanl end
const diagonalright = [
this.state.box["0"]["0"],
this.state.box["1"]["1"],
this.state.box["2"]["2"]
];
function identical(array) {
for(let i = 2; i < array.length; i++) {
if(array[i] === array[i+1]) {
return true;
}
}
};
if(identical(midWin)) {
alert('midWin')
}
}
}
//start of app
var boxDispatcher = new Dispatcher();
var boxDataStore = new DataStore(data.box, data.players);
boxDispatcher.register((action) => {
if(boxDataStore.registeredWatchers["0"].state.turn == "X") {
//actually waint to handle it
boxDataStore.setCrop('X', action.row, action.col);
} else {
boxDataStore.setCrop('O', action.row, action.col);
}
})
ReactDOM.render(<App data={boxDataStore.data} />, document.querySelector("#app"));
export default App;