基于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])

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

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

相关文章

yolov8、RTDETR无法使用多个GPU训练

yolov8、RTDETR无法使用多个GPU训练 网上看了好多解决方法&#xff1a; 什么命令行 CUDA_VISIBLE_DEVICES0,1 python train.py 环境变量都不行 最后找到解决方案&#xff1a;在ultralytics/engine/trainer.py 中的第246行 将 self.model DDP(self.model, device_ids[RANK])…

固体物理学习笔记(持续更新

目录 固体物理学&#xff08;黄昆&#xff09;晶格周期性的函数 固体物理学&#xff08;黄昆&#xff09; 晶格周期性的函数 记晶格基矢 a 1 , a 2 , a 3 a_1, a_2, a_3 a1​,a2​,a3​和倒格矢 b 1 , b 2 , b 3 b_1,b_2,b_3 b1​,b2​,b3​。一个具有晶格周期性的函数可以定…

【LeetCode】面试题 16.21. 交换和

质量还不错的一道题&#xff0c;适合用于考察二分法。 1. 题目 2. 分析 求出两个数组的总和&#xff0c;我们令总和少的为less&#xff0c;总和多的为more&#xff1b;如果两个数组的总和是奇数&#xff0c;那么怎么都配不平&#xff0c;直接返回false&#xff1b;如果两个数…

生物环保技术在哪些场景中有优势呢

生物环保技术在多个场景中展现出显著的优势&#xff0c;这些优势主要源于其绿色环保、高效节能、可持续发展等特性。以下是生物环保技术在不同场景中的优势分析&#xff1a; 一、污水处理 高效降解有机物&#xff1a;生物环保技术利用微生物的代谢功能&#xff0c;能够高效地…

OWASP ZAP

OWASP ZAP简介 开放式Web应用程序安全项目&#xff08;OWASP&#xff0c;Open Web Application Security Project&#xff09;是一个组织&#xff0c;它提供有关计算机和互联网应用程序的公正、实际、有成本效益的信息。ZAP则是OWASP里的工具类项目&#xff0c;也是旗舰项目&a…

VBA 批量发送邮件

1. 布局 2. 代码 前期绑定的话&#xff0c;需要勾选 Microsoft Outlook 16.0 Object Library Option ExplicitConst SEND_Y As String "Yes" Const SEND_N As String "No" Const SEND_SELECT_ALL As String "Select All" Const SEND_CANCEL…

Vue从零到实战第一天

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小…

【PostgreSQL】Spring boot + Mybatis-plus + PostgreSQL 处理json类型情况

Spring boot Mybatis-plus PostgreSQL 处理json类型情况 一、前言二、技术栈三、背景分析四、方案分析4.1 在PostgreSQL 数据库中直接存储 json 对象4.2 在PostgreSQL 数据库中存储 json 字符串 五、自定义类型处理器5.1 定义类型处理器5.2 使用自定义类型处理器 一、前言 在…

SpringCloud--Eureka集群

Eureka注册中心集群 为什么要集群 如果只有一个注册中心服务器&#xff0c;会存在单点故障&#xff0c;不可以高并发处理所以要集群。 如何集群 准备三个EurekaServer 相互注册&#xff0c;也就是说每个EurekaServer都需要向所有的EureakServer注册&#xff0c;包括自己 &a…

遇到NotOfficeXmlFileException

org.apache.poi.openxml4j.exceptions.NotOfficeXmlFileException: No valid entries or contents found, this is not a valid OOXML (Office Open XML) file 这个异常通常发生在你尝试使用 Apache POI 库来读取或处理一个不是有效的 Office Open XML 文件&#xff08;如 .xls…

项目管理工作分解结构(WBS)指南

在项目管理领域&#xff0c;工作分解结构&#xff08;WBS&#xff09;是一种关键的技术&#xff0c;它涉及将项目的整体可交付成果分解为更小的、更易于管理的部分。 值得注意的是&#xff0c;WBS的焦点在于可交付成果的分解&#xff0c;而非工作任务的细分。这种方法在项目管…

漏洞扫描器之XRAY的安装及破解

XRAY简介 xray 是一款功能强大的安全评估工具&#xff0c;由多名经验丰富的一线安全从业者呕心打造而成&#xff0c;主要特性有&#xff1a; 检测速度快&#xff1a;发包速度快 ; 漏洞检测算法高效。 支持范围广&#xff1a;大至 OWASP Top 10 通用漏洞检测&#xff0c;小至…

无人直播/ai自动直播-APP源码开发

无人直播APP的源码开发通常涉及到几个关键技术和组件&#xff1a; 实时流媒体处理&#xff1a;使用WebRTC&#xff08;Web Real-Time Communication&#xff09;技术&#xff0c;它允许在浏览器或移动端实现实时音视频通信。开发者需要理解和集成相关的SDK&#xff0c;如Agora、…

从0到1搭建数据中台(3):flinkcdc实现数据从mysql到doris

参考&#xff1a; 大数据Doris&#xff08;一&#xff09;&#xff1a;Doris概述篇 大数据Doris&#xff08;二&#xff09;&#xff1a;Doris原理篇 Doris实战-结合Flink构建极速易用的实时数仓 基于 Flink Doris 体验实时数仓建设 Doris简介、部署、功能介绍以及架构设…

【c++刷题笔记-动态规划】day34:01背包问题 二维 、 01背包问题 一维 、416. 分割等和子集

46. 携带研究材料&#xff08;第六期模拟笔试&#xff09; (kamacoder.com) 思路&#xff1a;背包dp 重点&#xff1a;确定dp数组&#xff0c;背包容量最大值&#xff0c;获取的价值最大 二维 #include <bits/stdc.h> using namespace std;int n, bagweight;// bagwe…

接口测试框架基于模板自动生成测试用例!

引言 在接口自动化测试中&#xff0c;生成高质量、易维护的测试用例是一个重要挑战。基于模板自动生成测试用例&#xff0c;可以有效减少手工编写测试用例的工作量&#xff0c;提高测试的效率和准确性。 自动生成测试用例的原理 为了实现测试用例数据和测试用例代码的解耦&a…

[激光原理与应用-109]:南京科耐激光-激光焊接-焊中检测-智能制程监测系统IPM介绍 - 12 - 焊接工艺之影响焊接效果的因素

目录 一、影响激光焊接效果的因素 1.1、光束特征 1.2、焊接特征 1.3、保护气体 二、材料对焊接的影响 2.1 材料特征 2.2 不同材料对激光的吸收率 &#xff08;一&#xff09;、不同金属材料对不同激光的吸收率 1. 金属材料对激光的普遍反应 2. 不同波长激光的吸收率差…

React Hooks学习笔记

一、usestate的使用方法-初始化state函数 import React, { useState } from "react"; function App() {const [count, setCount] useState(0);return (<div><p>点击{count}次</p><button onClick{() > setCount(count 1)}>点击</bu…

搭建discuz论坛(lvs+nginx+http+mysql+nfs)8台服务器

搭建discuz论坛&#xff08;lvsnginxhttpmysqlnfs&#xff09; 一、IP规划 服务名IP地址服务LVS1192.168.100.110keepalivedipvsadmLVS2192.168.100.111keepalivedipvsadmnginx1192.168.100.113nginxnginx2192.168.100.114nginxnfs192.168.100.116nfs-utilweb1192.168.100.11…

为何现在大屏的UI设计和前端开发项目已经多到咱们快忙不过来了?

**为何现在大屏的UI设计和前端开发项目已经多到咱们快忙不过来了&#xff1f;** **一、引言** 随着科技的进步和消费者需求的不断升级&#xff0c;大屏设备&#xff08;如智能电视、车载屏幕、拼接屏等&#xff09;在各行各业中的应用越来越广泛。这导致了大屏UI设计和前端开…