React 实现井字棋的示例代码
作者：卡卡舅舅
本文主要介绍了React 实现井字棋,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
一、简介
这篇文章会基于React 实现井字棋小游戏功能。
二、效果演示
三、技术实现
import {useEffect, useState} from "react";
export default (props) => {
return <Board/>
}
const Board = () => {
let initialState = [['', '', ''], ['', '', ''], ['', '', '']];
const [squares, setSquares] = useState(initialState);
const [times, setTimes] = useState(0);
useEffect(()=>{
// 判断每行是否相同
for (let i = 0; i < 3; i++) {
if (squares[i][0] === squares[i][1] && squares[i][1] === squares[i][2] && squares[i][0] !== '') {
alert(squares[i][0] + ' win');
setTimes(0)
setSquares(initialState)
return;
}
}
// 判断每列是否相同
for (let i = 0; i < 3; i++) {
if (squares[0][i] === squares[1][i] && squares[1][i] === squares[2][i] && squares[0][i] !== '') {
alert(squares[0][i] + ' win')
setTimes(0)
setSquares(initialState)
return;
}
}
// 判断对角线是否相同
if (squares[0][0] === squares[1][1] && squares[1][1] === squares[2][2] && squares[0][0] !== '') {
alert(squares[0][0] + ' win');
setTimes(0)
setSquares(initialState)
return;
}
if (squares[0][2] === squares[1][1] && squares[1][1] === squares[2][0] && squares[0][2] !== ''){
alert(squares[0][2] + ' win');
setTimes(0)
setSquares(initialState)
return;
}
},[times])
return <div style={{width:'130px', margin: '0 auto'}}>
<table style={{borderCollapse: 'collapse'}}>
{squares.map((row, rowIdx) => {
return <tr key={rowIdx}>
{
row.map((col, colIdx) => {
return <td key={rowIdx + '-' + colIdx} style={{border: '1px solid #000', width: '40px', height: '40px'}}>
<div style={{width: '40px', height: '40px', textAlign: 'center', lineHeight:'40px'}} onClick={
() => {
const newSquares = [...squares];
if (newSquares[rowIdx][colIdx] !== '') {
return;
}
newSquares[rowIdx][colIdx] = times % 2 === 0 ? 'X' : 'O';
setSquares(newSquares);
setTimes(times + 1);
}
}>{col}</div>
</td>
}
)
}
</tr>
})}
</table>
</div>
}1.布局
基于table实现，3行，3列。
2.表格元素点击
更新cell内容，更新次数。
const newSquares = [...squares];
if (newSquares[rowIdx][colIdx] !== '') {
return;
}
newSquares[rowIdx][colIdx] = times % 2 === 0 ? 'X' : 'O';
setSquares(newSquares);
setTimes(times + 1);3.判断游戏是否结束
判断每行，每列，斜线是否相等。
useEffect(()=>{
// 判断每行是否相同
for (let i = 0; i < 3; i++) {
if (squares[i][0] === squares[i][1] && squares[i][1] === squares[i][2] && squares[i][0] !== '') {
alert(squares[i][0] + ' win');
setTimes(0)
setSquares(initialState)
return;
}
}
// 判断每列是否相同
for (let i = 0; i < 3; i++) {
if (squares[0][i] === squares[1][i] && squares[1][i] === squares[2][i] && squares[0][i] !== '') {
alert(squares[0][i] + ' win')
setTimes(0)
setSquares(initialState)
return;
}
}
// 判断对角线是否相同
if (squares[0][0] === squares[1][1] && squares[1][1] === squares[2][2] && squares[0][0] !== '') {
alert(squares[0][0] + ' win');
setTimes(0)
setSquares(initialState)
return;
}
if (squares[0][2] === squares[1][1] && squares[1][1] === squares[2][0] && squares[0][2] !== ''){
alert(squares[0][2] + ' win');
setTimes(0)
setSquares(initialState)
return;
}
},[times])到此这篇关于React 实现井字棋的文章就介绍到这了,更多相关React 井字棋内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！