React 实现井字棋的示例代码
更新时间：2024年07月09日 08:34:37 作者：卡卡舅舅
本文主要介绍了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 井字棋内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
解决React报错The tag is unrecognized in this browser
这篇文章主要为大家介绍了解决React报错The tag is unrecognized in this browser示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
本文主要介绍了React 实现表单组件的示例代码,支持包括输入状态管理,表单验证,错误信息展示,表单提交,动态表单元素等功能,具有一定的参考价值,感兴趣的可以了解一下2024-07-07
在React中,组件之间的通信是一个常见的需求,有时,我们需要从父组件调用子组件的方法,这可以通过几种不同的方式实现,需要的朋友可以参考下2024-04-04
这篇文章主要为大家介绍了useEffect 返回函数执行过程源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了React从命令式编程到声明式编程,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
这篇文章主要介绍了在react中对less实现scoped配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要为大家介绍了字节封装React组件手机号自动校验格式FormItem，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了React Hooks之useRef获取元素示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
Workbox是Google Chrome团队推出的一套 PWA 的解决方案,这套解决方案当中包含了核心库和构建工具,因此我们可以利用Workbox实现Service Worker的快速开发,本文小编给大家介绍了React中使用Workbox进行预缓存的实现,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了如何使用React Hooks请求数据并渲染，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
最新评论