当前位置: 首页 > news >正文

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

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

1. 初始化 React 项目:

npx create-react-app tic-tac-toe
cd tic-tac-toe

2.文件结构

src/
├── App.js
├── Board.js
├── Square.js
└── index.js

在这里插入图片描述

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

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 - 棋盘组件

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 - 游戏逻辑和主组件


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 wonconst 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 - 渲染应用

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';ReactDOM.render(<App />, document.getElementById('root'));

3. 启动应用:

npm start

打开浏览器,访问 http://localhost:3000 即可运行。如图所示:
在这里插入图片描述
希望这些内容对你有所帮助!如果有任何问题,欢迎随时提问。

相关文章:

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

下面是一个完整的 Tic-Tac-Toe&#xff08;井字棋&#xff09;游戏的实现&#xff0c;用 React 构建。包括核心逻辑和组件分离&#xff0c;支持两人对战。 1. 初始化 React 项目&#xff1a; npx create-react-app tic-tac-toe cd tic-tac-toe2.文件结构 src/ ├── App.js…...

数据结构及算法--排序篇

在 C 语言中&#xff0c;可以通过嵌套循环和比较运算符来实现常见的排序算法&#xff0c;比如冒泡排序、选择排序或插入排序 目录 基础算法&#xff1a; 1.冒泡排序&#xff08;Bubble Sort&#xff09; 2.选择排序&#xff08;Selection Sort&#xff09; 3.插入排序&…...

泷羽sec学习打卡-网络七层杀伤链1

声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 关于蓝队基础的那些事儿-Base1 基本的企业网络架构是怎样的呢&#xff1f;高层管理IT管理影子IT中央技术…...

【QT】绘图

个人主页~ 绘图 一、绘图1、基础内容2、绘制形状&#xff08;1&#xff09;线段&#xff08;2&#xff09;矩形&#xff08;3&#xff09;圆形&#xff08;4&#xff09;文本&#xff08;5&#xff09;画笔&#xff08;6&#xff09;画刷 3、绘制图片&#xff08;1&#xff09;…...

vue3+elementui-plus el-dialog全局配置点击空白处不关闭弹窗

在与main.ts同级下的plugins文件夹&#xff08;如果没有&#xff0c;新建一个&#xff09;下建一个element.js文件&#xff08;名字随便取&#xff09; element.js文件内容如下&#xff1a; import ElementPlus from element-plus export default (app) > {console.log(app…...

Markdown语法说明

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…...

推荐一款专业电脑护眼工具:CareUEyes Pro

CareUEyes Pro是一款非常好用的专业电脑护眼工具&#xff0c;软件小巧&#xff0c;界面简单&#xff0c;它可以自动过滤电脑屏幕的蓝光&#xff0c;让屏幕显示更加的不伤眼&#xff0c;更加舒适&#xff0c;有效保护你的眼睛&#xff0c;可以自定义调节屏幕的色调&#xff0c;从…...

对subprocess启动的子进程使用VSCode python debugger

文章目录 1 情况概要&#xff08;和文件结构&#xff09;2 具体设置和启动步骤2.1 具体配置Step 1 针对attach debugger到子进程Step 2 针对子进程的暂停(可选) Step 3 判断哪个进程id是需要的子进程 2.2 启动步骤和过程 3 其他问题解决3.13.2 ptrace: Operation not permitted…...

Django启用国际化支持(2)—实现界面内切换语言:activate()

文章目录 ⭐注意⭐1. 配置项目全局设置&#xff1a;启用国际化2. 编写视图函数3. 配置路由4. 界面演示5、扩展自动识别并切换到当前语言设置语言并保存到Session设置语言并保存到 Cookie ⭐注意⭐ 以下操作依赖于 Django 项目的国际化支持。如果你不清楚如何启用国际化功能&am…...

基于单片机的多功能跑步机控制系统

本设计基于单片机的一种多功能跑步机控制系统。该系统以STM32单片机为主控制器&#xff0c;由七个电路模块组成&#xff0c;分别是&#xff1a;单片机模块、电机控制模块、心率检测模块、音乐播放模块、液晶显示模块、语音控制模块、电源模块。其中&#xff0c;单片机模块是整个…...

VSCode 如何选中包含某个字母的所有行

文章目录 写在前面一、需求描述二、解决方法参考链接 写在前面 自己的测试环境&#xff1a;VSCode 一、需求描述 由于需要处理文件&#xff0c;需求是删除文件中包含某个字母的所有行。 二、解决方法 在 Visual Studio Code (VSCode) 中&#xff0c;如果你想选中所有包含某…...

CSRF保护--laravel进阶篇

laravel对csrf非常重视&#xff0c;专门针对csrf作出了很多的保护。如果您是刚刚接触laravel的路由不久&#xff0c;那么您可能对于web.php路由文件的post请求很疑惑&#xff0c;因为get请求很顺利&#xff0c;而post请求则可能会遭遇失败。其中一个失败的原因是由于laravel的c…...

计算机网络-理论部分(二):应用层

网络应用体系结构 Client-Server客户-服务器体系结构&#xff1a;如Web&#xff0c;FTP&#xff0c;Telnet等Peer-Peer&#xff1a;点对点P2P结构&#xff0c;如BitTorrent 应用层协议定义了&#xff1a; 交换的报文类型&#xff0c;请求or响应报文类型的语法字段的含义如何…...

k8s1.31版本最新版本集群使用容器镜像仓库Harbor

虚拟机 rocky9.4 linux master node01 node02 已部署k8s集群版本 1.31 方法 一 使用容器部署harbor (1) wget https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo -O /etc/yum.repos.d/docker-ce.repo yum -y install docker-ce systemctl enable docker…...

QT中使用json格式存取矩阵数据

在 Qt 中,可以通过 QJsonDocument 和 QJsonArray 方便地存取 JSON 格式的矩阵数据。以下是存储和读取矩阵数据的完整实现示例。 1. 矩阵存储为 JSON 将矩阵(QVector<QVector<double>> 或其他二维数组)存储为 JSON 文件。 实现代码 #include <QJsonArray&g…...

k8s 集群安装

安装rockylinux https://www.jianshu.com/p/a5fe20318b8e https://www.cnblogs.com/haoee/p/18290506 配置VirtualBox双网卡 https://www.cnblogs.com/ShineLeBlog/p/17580311.html https://zhuanlan.zhihu.com/p/341328334 https://blog.csdn.net/qq_36544785/article/deta…...

Elasticsearch面试内容整理-核心概念与数据模型

在 Elasticsearch 中,理解核心概念与数据模型是非常重要的,因为它们定义了数据如何被组织、存储和搜索。以下是 Elasticsearch 的核心概念和数据模型的详细介绍。 核心概念 集群(Cluster) ● 集群是由一个或多个节点组成的,用于共同存储和搜索数据的集合。...

Spring Boot实现License生成和校验

Spring Boot实现License生成和校验 证书准备 # 1. 生成私钥库 # validity&#xff1a;私钥的有效期&#xff08;天&#xff09; # alias&#xff1a;私钥别称 # keystore&#xff1a;私钥库文件名称&#xff08;生成在当前目录&#xff09; # storepass&#xff1a;私钥库密码…...

es写入磁盘的过程以及相关优化

数据写入到内存buffer同时写入到数据到translog buffer,这是为了防止数据不会丢失每隔1s数据从buffer中refresh到FileSystemCache中,生成segment文件,这是因为写入磁盘的过程相对耗时,借助FileSystemCache,一旦生成segment文件,就能通过索引查询到了refresh完,memory bu…...

十大网络安全事件

一、私有云平台遭攻击&#xff0c;美国数千家公司工资难以发放 1月&#xff0c;专门提供劳动力与人力资本管理解决方案的美国克罗诺斯&#xff08;Kronos&#xff09;公司私有云平台遭勒索软件攻击&#xff0c;事件造成的混乱在数百万人中蔓延。 克罗诺斯母公司UKG集团&#xf…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...