用 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 即可运行。如图所示:
在这里插入图片描述
希望这些内容对你有所帮助!如果有任何问题,欢迎随时提问。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/475957.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端—Cursor编辑器

在当今快速发展的软件开发领域&#xff0c;效率和质量是衡量一个工具是否优秀的两个关键指标。今天&#xff0c;我要向大家推荐一款革命性的代码编辑器——Cursor&#xff0c;它集成了强大的AI功能&#xff0c;旨在提高开发者的编程效率。以下是Cursor编辑器的详细介绍和推荐理…

uniapp页面样式和布局和nvue教程详解

uniapp页面样式和布局和nvue教程 尺寸单位 uni-app 支持的通用 css 单位包括 px、rpx px 即屏幕像素。rpx 即响应式px&#xff0c;一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准&#xff0c;750rpx恰好为屏幕宽度。屏幕变宽&#xff0c;rpx 实际显示效果会等比放大…

Kubernetes 安装配置ingress controller

> 对于Kubernetes的Service&#xff0c;无论是Cluster-Ip和NodePort均是四层的负载&#xff0c;集群内的服务如何实现七层的负载均衡&#xff0c;这就需要借助于Ingress&#xff0c;Ingress控制器的实现方式有很多&#xff0c;比如nginx, Contour, Haproxy, trafik, Istio。…

js批量输入地址获取经纬度

使用js调用高德地图的接口批量输入地址获取经纬度。 以下的请求接口的key请换成你的key。 创建key&#xff1a;我的应用 | 高德控制台 &#xff0c;服务平台选择《Web服务》。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-…

天润融通携手挚达科技:AI技术重塑客户服务体验

业务爆发式增长&#xff0c;但座席服务却跟不上&#xff0c;怎么办&#xff1f; 智能充电领导者的挚达科技就面临过 这样的问题&#xff0c;让我们来看看如何解决。 2010年以来&#xff0c;国内新能源汽车市场进入高速发展期&#xff0c;作为新能源汽车的重要配件&#xff0c…

51c自动驾驶~合集31

我自己的原文哦~ https://blog.51cto.com/whaosoft/12121357 #大语言模型会成为自动驾驶的灵丹妙药吗 人工智能&#xff08;AI&#xff09;在自动驾驶&#xff08;AD&#xff09;研究中起着至关重要的作用&#xff0c;推动其向智能化和高效化发展。目前AD技术的发展主要遵循…

【代码随想录】贪心

455. 分发饼干 题目 随想录 本质&#xff1a; 对于每个孩子&#xff0c;使用可以满足该孩子的最小的饼干。所以对孩子胃口和饼干进行sort排序&#xff0c;依次将大的饼干满足给孩子。 贪心策略&#xff1a; 想一下局部最优&#xff0c;想一下全局最优&#xff0c;如果局部最优…

QWen2.5学习

配置环境 pip install transformers 记得更新一下&#xff1a;typing_extensions pip install --upgrade typing_extensions 安装modelscope modelscope/modelscope: ModelScope: bring the notion of Model-as-a-Service to life. 下载这个仓库的代码上传到服务器解压 推…

存算分离的过去、现在和未来

存算分离架构&#xff0c;作为数据处理领域的一个重要概念&#xff0c;从其最初的雏形到如今广泛应用&#xff0c;经历了多次迭代和变革。雁飞老师在分享中从过去的存算架构&#xff0c;逐步讲述存算分离的演进&#xff0c;现今的存算分离架构的优势及其在 Databend 中的体现&a…

web——upload-labs——第九关——特殊字符::$DATA绕过

特殊字符::$DATA绕过 典型绕过场景 在一些系统中&#xff0c;::$DATA 被用于绕过文件路径的限制。比如&#xff1a; 路径过滤绕过&#xff1a;如果系统有某种机制来检查和限制文件路径&#xff08;例如&#xff0c;禁止访问某些系统目录或敏感文件&#xff09;&#xff0c;通…

图的存储、遍历以及Dijkstra/Floyd/Kruskal/Prim/拓扑排序/关键路径(实验8--作业)

图–数据结构操作与算法全解析 一、引言 图作为一种重要的数据结构&#xff0c;在计算机科学与众多领域中都有着广泛的应用。它能够有效地描述和解决各种复杂的关系问题&#xff0c;如网络拓扑、路径规划、资源分配等。本文将详细介绍图的相关操作和知识点&#xff0c;包括图…

利用Vue的相关特性,制作相册

目录 一、整体结构 1、设置一个div盒子 2、设置图片展示 3、页码按钮 4、翻页按钮 二、CSS样式 1、 .clear_ele::after 2、设置图片、按钮等属性的样式 三、JavaScript部分&#xff08;Vue&#xff09; 1、导入模块 2、创建Vue应用 ①定义响应式数据 ②定义事件处…

优化表单交互:在 el-select 组件中嵌入表格显示选项

介绍了一种通过 el-select 插槽实现表格样式数据展示的方案&#xff0c;可更直观地辅助用户选择。支持列配置、行数据绑定及自定义搜索&#xff0c;简洁高效&#xff0c;适用于复杂选择场景。完整代码见GitHub 仓库。 背景 在进行业务开发选择订单时&#xff0c;如果单纯的根…

(C语言)文件操作

目录 文件 程序文件 数据文件 文件名 ​编辑数据文件的分类 文件的打开和关闭 流 标准流 1&#xff09;stdin 2&#xff09;stdout 3&#xff09;stderr 文件指针 文件的打开和关闭 对文件内容操作的函数 1&#xff09;fgetc&#xff0c;fputc 2&#xff09;fp…

AI修改验证账号名正则表达式的案例

我有如下的一行老代码&#xff0c;今天复用的时候发现当时注释写错了&#xff0c;改好以后请AI再检查一遍。 因为这次AI的分析的思路很典范&#xff0c;所以拿出来分享一下。 提问&#xff1a; 请看一下这个正则和后面的注释是否匹配&#xff0c;现在的验证规则是否保证账号至…

SQL进阶技巧:如何进行数字范围统计?| 货场剩余货位的统计查询方法

目录 0 场景描述 1 剩余空位区间和剩余空位编号统计分析 2 查找已用货位区间 3 小结 0 场景描述 这是在做一个大型货场租赁系统时遇到的问题&#xff0c;在计算货场剩余存储空间时&#xff0c;不仅仅需要知道哪些货位是空闲的&#xff0c;还要能够判断出哪些货位之间是连…

彻底理解如何保证Redis和数据库数据一致性问题

一.背景 系统中缓存最常用的策略是&#xff1a;服务端需要同时维护 DB 和 Cache 并且是以 DB 的结果为准&#xff0c;那么就可能出现 DB 和 Cache 数据不一致的问题。 二.读数据 逻辑如下&#xff1a; 当客户端发起查询数据的请求&#xff0c;首先回去Redis中查看没有没该数据&…

后仿真中的SDF语法之关键字 IOPATH 用法详解

在后仿真中&#xff0c;SDF&#xff08;Standard Delay Format&#xff09;文件用于描述设计的时序信息&#xff0c;而IOPATH是SDF中的一个关键结构&#xff0c;用于定义单元间的路径延迟。以下是IOPATH关键字的用法及其相关内容的详细介绍&#xff1a; IOPATH结构旨在将延迟数…

Springboot 整合 Java DL4J 搭建智能问答系统

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…

基于SpringBoot的“网上书城管理系统”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“网上书城管理系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统功能结构图 系统首页界面图 用户注册界面…