基于React 实现井字棋

一、简介

这篇文章会基于React 实现井字棋小游戏功能。

二、效果演示

三、技术实现

javascript 复制代码
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内容,更新次数。

javascript 复制代码
     const newSquares = [...squares];
     if (newSquares[rowIdx][colIdx] !== '') {
         return;
     }
     newSquares[rowIdx][colIdx] = times % 2 === 0 ? 'X' : 'O';
     setSquares(newSquares);
     setTimes(times + 1);

3.判断游戏是否结束

判断每行,每列,斜线是否相等。

javascript 复制代码
 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])
相关推荐
10年前端老司机3 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程8 小时前
2025前端面试题
前端·面试
前端小趴菜059 小时前
React - createPortal
前端·vue.js·react.js
晓13139 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo10 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴10 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78911 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼11 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原12 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf12 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js