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函数组件类组件区别示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
React视频播放控制组件Video Controls的实现
本文主要介绍了React视频播放控制组件Video Controls的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-02-02
这篇文章主要为大家介绍了React中如何处理承诺demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
中间件就是一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能，要理解中间件，关键点是要知道，这个中间件是连接哪些部分的软件，它在中间做了什么事，提供了什么服务2023-01-01
react-three/postprocessing库的参数中文含义使用解析
这篇文章主要介绍了react-three/postprocessing库的参数中文含义使用总结,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
在本篇博客中,我们将介绍如何在 React 应用中搜索 GitHub 用户并显示他们的信息,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了Vite+React搭建开发构建环境实践,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
从零搭建Webpack5-react脚手架的实现步骤(附源码)
本文主要介绍了从零搭建Webpack5-react脚手架的实现步骤，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章我们将详细讲解如何建立一个这样简单的列表,文章通过代码示例介绍的非常详细,对我们的学习或工作有一定的帮助,需要的朋友可以参考下2023-08-08
本篇文章主要介绍了React 子组件向父组件传值的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
最新评论