用 React18 构建Tic-Tac-Toe(井字棋)游戏

下面是一个完整的 Tic-Tac-Toe(井字棋)游戏的实现,用 React 构建。包括核心逻辑和组件分离,支持两人对战。

1. 初始化 React 项目:

bash 复制代码
npx create-react-app tic-tac-toe
cd tic-tac-toe

2.文件结构

scss 复制代码
src/
├── App.js
├── Board.js
├── Square.js
└── index.js

Step 1: Square.js - 单个方块组件

jsx 复制代码
import React from 'react';

const Square = ({ value, onClick }) => {
  return (
    <button 
      className="square" 
      onClick={onClick} 
      style={{
        width: '60px',
        height: '60px',
        fontSize: '24px',
        cursor: 'pointer'
      }}
    >
      {value}
    </button>
  );
};

export default Square;

Step 2: Board.js - 棋盘组件

jsx 复制代码
import React from 'react';
import Square from './Square';

const Board = ({ squares, onClick }) => {
  const renderSquare = (i) => {
    return <Square value={squares[i]} onClick={() => onClick(i)} />;
  };

  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
    }}>
      <div style={{ display: 'flex' }}>
        {renderSquare(0)}{renderSquare(1)}{renderSquare(2)}
      </div>
      <div style={{ display: 'flex' }}>
        {renderSquare(3)}{renderSquare(4)}{renderSquare(5)}
      </div>
      <div style={{ display: 'flex' }}>
        {renderSquare(6)}{renderSquare(7)}{renderSquare(8)}
      </div>
    </div>
  );
};

export default Board;

Step 3: App.js - 游戏逻辑和主组件

jsx 复制代码
import React, { useState } from 'react';
import Board from './Board';


const App = () => {
  const [squares, setSquares] = useState(Array(9).fill(null));
  const [isXNext, setIsXNext] = useState(true);

  const calculateWinner = (squares) => {
    const lines = [
      [0, 1, 2], [3, 4, 5], [6, 7, 8], // Rows
      [0, 3, 6], [1, 4, 7], [2, 5, 8], // Columns
      [0, 4, 8], [2, 4, 6]            // Diagonals
    ];
    for (let [a, b, c] of lines) {
      if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
        return squares[a];
      }
    }
    return null;
  };

  const winner = calculateWinner(squares);
  const handleClick = (i) => {
    if (squares[i] || winner) return; // Ignore if square is already filled or game is won
    const nextSquares = squares.slice();
    nextSquares[i] = isXNext ? 'X' : 'O';
    setSquares(nextSquares);
    setIsXNext(!isXNext);
  };

  const restartGame = () => {
    setSquares(Array(9).fill(null));
    setIsXNext(true);
  };

  const status = winner ? `Winner: ${winner}` : `Next Player: ${isXNext ? 'X' : 'O'}`;

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Tic-Tac-Toe</h1>
      <Board squares={squares} onClick={handleClick} />
      <h3>{status}</h3>
      <button onClick={restartGame} style={{ padding: '10px 20px', marginTop: '20px' }}>
        Restart
      </button>
    </div>
  );
};

export default App;

Step 4: index.js - 渲染应用

jsx 复制代码
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

3. 启动应用:

bash 复制代码
npm start

打开浏览器,访问 http://localhost:3000 即可运行。如图所示:

希望这些内容对你有所帮助!如果有任何问题,欢迎随时提问。

相关推荐
yzhSWJ3 分钟前
Spring Boot中自定义404异常处理问题学习笔记
java·javascript
zyk_5202 小时前
前端渲染pdf文件解决方案-pdf.js
前端·javascript·pdf
沉迷...2 小时前
手动实现legend 与 echarts图交互 通过js事件实现图标某项的高亮 显示与隐藏
前端·javascript·echarts
二狗哈2 小时前
制作一款打飞机游戏20:敌人被击中时的视觉效果
游戏
二狗哈3 小时前
制作一款打飞机游戏19:碰撞检测
数码相机·游戏
皮实的芒果3 小时前
前端实时通信方案对比:WebSocket vs SSE vs setInterval 轮询
前端·javascript·性能优化
il3 小时前
Deepdive into Tanstack Query - 2.0 Query Core 概览
前端·javascript
Shawn5903 小时前
前端时间管理实践:从时间标准化到工程化封装
前端·javascript
H5开发新纪元3 小时前
借助 GitHub Copilot 打造一个完美的 React 消息引用系统:从设计到实现的深度剖析
前端·react.js
哟哟耶耶3 小时前
react-09React生命周期
前端·javascript·react.js