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

ReactNative 井字游戏 实战

效果展示

在这里插入图片描述
在这里插入图片描述

需要的插件准备

此实战项目需要用到两个插件。

  • react-native-snackbar

    底部信息提示组件。

  • react-native-vector-icons

    图标组件。

安装组件:

npm i react-native-snackbar
npm i react-native-vector-icons
npm i @types/react-native-vector-icons // 使用 TS 时需要安装

使用react-native-vector-icons插件时,需要在 IOS 和安卓的配置文件中加入对应的参数配置,而这里我是使用安卓,所以只是展示安卓的配置,IOS 的配置方法可以查看这里。

// 路径是在 android/app/build.gradle 文件中添加如下配置
apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

游戏逻辑

我们棋盘采用数组的方式来维护棋盘下子情况。具体的棋盘布局图如下:

在这里插入图片描述

在井字游戏规则中,主要在横着连续三个、竖着连续三个、斜着连续三个棋子都算是获胜,所以通过棋盘布局图,我们可以知道有如下几种情况就可以获取:

  1. 数组下标[0,1,2]、[3,4,5]和[6,7,8]中的所有值相同的时候我们就可以判断为获胜
  2. 数组下标[0,3,6]、[1,4,7]和[2,5,8]中的所有值相同的时候我们就可以判断为获胜
  3. 数组下标[0,4,8]和[2,4,6]中的所有值相同的时候我们就可以判断为获胜

通过上述梳理的规则,我们就可以编写对应判断输赢的逻辑函数。这里就不做代码展示,可以下载完整代码查看。

注意: 数组下标的值必须非初始化的值(本实战中初始值是 empty),所以编写游戏逻辑时需要加上此判断。

实现核心步骤

  1. 编写棋子组件
// 这里的Icon组件是react-native-vector-icons组件里面的
type IconParsms = PropsWithChildren<{ name: string }>;
const Icons = (props: IconParsms) => {switch (props.name) {case "circle":return <Icon name="circle-thin" size={38} color="#F7CD2E" />;break;case "cross":return <Icon name="times" size={38} color="#38CC77" />;break;default:return <Icon name="pencil" size={38} color="#0D0D0D" />;break;}
};
  1. 编写下棋动作事件

下棋动作主要是监听棋盘中每个

// 点击事件,修改对应的图标
const onChangeItem = (itemNumber: number) => {// 已经有一方赢得比赛时,在点击棋盘时就会使用Snackbar组件给用户信息提示if (gameWinner) {return Snackbar.show({text: gameWinner,backgroundColor: "#000000",textColor: "#FFFFFF",});}// 判断棋盘每个位置上的棋子情况if (gameState[itemNumber] === "empty") {gameState[itemNumber] = isCross ? "cross" : "circle";setIsCross(!isCross); // 通过修改 isCross 的值判断是 ○ 还是 × 下棋} else {// 非empty的值都是已经下过子,所以就不能在下return Snackbar.show({text: "这里已有棋子",backgroundColor: "red",textColor: "#FFF",});}checkIsWinner(); // 调用判断输赢的逻辑函数
};
  1. 编写页面结构(样式代码在完整代码中)
<SafeAreaView><StatusBar />{/* 操作/比赛提示 */}{gameWinner ? (<View style={[styles.playerInfo, styles.winnerInfo]}><Text style={styles.winnerTxt}>{gameWinner}</Text></View>) : (<Viewstyle={[styles.playerInfo, isCross ? styles.playerX : styles.playerO]}><Text style={styles.gameTurnTxt}>轮到 {isCross ? "X" : "O"}</Text></View>)}{/* 棋盘 */}<FlatListnumColumns={3}data={gameState}style={styles.grid}renderItem={({ item, index }) => (<Pressablekey={index}style={styles.card}onPress={() => onChangeItem(index)}><Icons name={item} /></Pressable>)}/>{/* 游戏操作 */}<Pressable style={styles.gameBtn} onPress={reloadGame}><Text style={styles.gameBtnText}>{gameWinner ? "开始新游戏" : "重置游戏"}</Text></Pressable>
</SafeAreaView>

完整代码下载

完整代码

相关文章:

ReactNative 井字游戏 实战

效果展示 需要的插件准备 此实战项目需要用到两个插件。 react-native-snackbar 底部信息提示组件。 react-native-vector-icons 图标组件。 安装组件&#xff1a; npm i react-native-snackbar npm i react-native-vector-icons npm i types/react-native-vector-icons /…...

五-垃圾收集器G1ZGC详解

回顾CMS垃圾收集器 G1垃圾收集器 G1是一款面向服务器的垃圾收集器&#xff0c;主要针对配备多颗处理器及大容量处理的机器。以及高概率满足GC停顿时间要求的同时&#xff0c;还具备高吞吐量性能特征 物理上没有明显的物理概念&#xff0c;但是逻辑上还是有分代概念 物理上分…...

opencv入门-Opencv原理以及Opencv-Python安装

图像的表示 1&#xff0c;位数 计算机采用0/1编码的系统&#xff0c;数字图像也是0/1来记录信息&#xff0c;图像都是8位数图像&#xff0c;包含0~255灰度&#xff0c; 其中0代表最黑&#xff0c;1代表最白 3&#xff0c; 4&#xff0c;OpenCV部署方法 安装OpenCV之前…...

k8s etcd 简介

Etcd是CoreOS基于Raft协议开发的分布式key-value存储&#xff0c;可用于服务发现、共享配置以及一致性保障&#xff08;如数据库选主、分布式锁等&#xff09;。 如&#xff0c;Etcd也可以作为微服务的注册中心&#xff0c;比如SpringCloud也基于ETCD实现了注册中心功能&#…...

分页功能实现

大家好 , 我是苏麟 , 今天聊一聊分页功能 . Page分页构造器是mybatisplus包中的一个分页类 . Page分页 引入依赖 <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.1</ver…...

普通制造型企业,如何成就“链主品牌

“链主品牌”通常掌握产业链主导地位&#xff0c;对于普通制造型企业看起来是遥不可及的事情&#xff0c;事实上并非如此。从洞察穿越周期的“链主品牌”规律来看&#xff0c;做螺丝起家的伍尔特、做宠物牵引绳的福莱希等小企业也可以成为“链主品牌”。另外&#xff0c;由于新…...

04_22 vma(进程下的每个虚拟内存区域查看)对象实战

前言 vma不太懂的可以往前翻 03_008内存映射原理_虚拟内存区域vm_area_struct详解,和mmap系统钓调用及物理内存结构体完全分析 vam 虚拟内存区域 每个进程下有多个vma 这次是查看每个vma的起始地址 结束地址和大小使用 1.进程在用户空间调用mmap也就是上面那个函数。 2.在当前…...

QWidget的ui界面绘制成图片

文章目录 源文件源码解释效果修复图片清晰度 源文件 #include "widget.h" #include "ui_widget.h"#include <QPixmap> #include <QDir>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);// 构造…...

【ICer的脚本练习】脚本使用的思维培养 —— 用例回归

系列的目录说明请见:ICer的脚本练习专栏介绍与全流程目录_尼德兰的喵的博客-CSDN博客 前言 脚本思维本质上是对重复人力操作的汇总与提炼,也就是说如果一件事情可以通过人不需要大量思考的按部就班操作能够完成,那么理论上脚本就可以进行替代。那么什么时候需要写脚本呢?这…...

【axios网络请求库】认识Axios库;axios发送请求、创建实例、创建拦截器、封装请求

目录 1_认识Axios库2_axios发送请求3_axios创建实例4_axios的拦截器5_axios请求封装 1_认识Axios库 功能特点: 在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http请求支持 Promise API拦截请求和响应转换请求和响应数据 2_axios发送请求 支持多种请求方式: axios…...

Android——基本控件(下)(二十一)

1. 数据存储 1.1 知识点 &#xff08;1&#xff09;掌握Android数据存储的分类&#xff1b; &#xff08;2&#xff09;可以使用SharedPreferences存储数据。 1.2 具体内容 对于我们数据的存储而言&#xff0c;Android一共提供了5个数据存储的方式&#xff1a;SharedPrefe…...

websocket基础

下面就以代码来进行说明 1&#xff0c;先导入websocket依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency> 2.编写websocket相关bean管理配置 Config…...

游戏思考30(补充版):关于逆水寒铁牢关副本、白石副本和技能的一些注释(2023/0902)

前期介绍 我是一名逆水寒的玩家&#xff0c;做一些游戏的笔记当作攻略记录下来&#xff0c;荣光不朽-帝霸来源视频连接 传送门 一、旧版铁牢关&#xff08;非逆水寒老兵服&#xff09; &#xff08;1&#xff09;老一&#xff1a;巨鹰 1&#xff09;机制一&#xff1a;三阵风…...

【数据蒸馏】静态数据蒸馏方法汇总

基于几何的方法 基于几何的方法假设在特征空间中彼此接近的数据点往往具有相似的属性。因此&#xff0c;基于几何的方法试图移除那些提供冗余信息的数据点&#xff0c;剩下的数据点形成一个核心集合S&#xff0c;其中jSj ≤ jTj。 Herding&#xff08;聚集&#xff09; 是一…...

Cortex-A7 架构

参考《 Cortex-A7 Technical ReferenceManua.pdf 》和《 ARM Cortex-A(armV7) 编程手 册 V4.0.pdf 》 【 正点原子】I.MX6U嵌入式Linux驱动开发指南V1.6学习 1.Cortex-A7 MPCore 简介 I.MX6UL 使用的是 Cortex-A7 架构&#xff0c;Cortex-A7 MPcore 处理器支持 1~4 核&#…...

2023年“羊城杯”网络安全大赛 Web方向题解wp 全

团队名称&#xff1a;ZhangSan 序号&#xff1a;11 不得不说今年本科组打的是真激烈&#xff0c;初出茅庐的小后生没见过这场面QAQ~ D0n’t pl4y g4m3!!! 简单记录一下&#xff0c;实际做题踩坑很多&#xff0c;尝试很多。 先扫了个目录&#xff0c;扫出start.sh 内容如下…...

Matlab——二维绘图(最为详细,附上相关实例)

为了帮助各位同学备战数学建模和学习Matlab的使用&#xff0c;今天我们来聊一聊 Matlab 中的绘图技巧吧&#xff01;对于 Matlab 这样的科学计算软件来说&#xff0c;绘图是非常重要的一项功能。在数据处理和分析时&#xff0c;良好的绘图技巧能够更直观地呈现数据&#xff0c;…...

JVM学习(四)--内存问题分析思路

linux获取jvm当前dump文件 命令行为&#xff1a;jmap -dump:file[文件名] [pid] 然后等待生成dump文件&#xff0c;生成的dump文件就在当前目录下。如下图&#xff1a; 然后就可以下载到本地&#xff0c;用本地jdk里自带的jvisualvm来解析文件。 在用本地的jvisualvm解析之前…...

【MySQL】七种SQL优化方式 你知道几条

1.插入数据 1.1insert 如果我们需要一次性往数据库表中插入多条记录&#xff0c;可以从以下三个方面进行优化。 insert into tb_test values(1,tom); insert into tb_test values(2,cat); insert into tb_test values(3,jerry); 1). 优化方案一 批量插入数据 Insert into t…...

MySQL8.xx 解决1251 client does not support ..解决方案

MySQL8.0.30一主两从复制与配置(一)_蜗牛杨哥的博客-CSDN博客 MySQL8.xx一主两从复制安装与配置 MySQL8.XX随未生成随机密码解决方案 一、客户端连接mysql&#xff0c;问题&#xff1a;1251 client does not support ... 二、解决 1.查看用户信息 备注&#xff1a;host为 % …...

智能检索新范式,让AIAgent自主决策,提升RAG效率100%!

市面上的 RAG 系统&#xff0c;不管叫什么名字&#xff0c;本质上只有两种做法&#xff1a; 第一种&#xff0c;一次性检索。把用户的 query 向量化&#xff0c;从语料库里捞出 Top-K 个文档片段&#xff0c;拼成一个大 prompt 塞给模型。GraphRAG、HippoRAG、LightRAG 都属于…...

从理论推导到代码实现:手把手教你用Python/Numpy写出守恒形式的NS方程求解器

从理论推导到代码实现&#xff1a;手把手教你用Python/Numpy写出守恒形式的NS方程求解器计算流体力学&#xff08;CFD&#xff09;的魅力在于它将抽象的数学方程转化为可执行的代码&#xff0c;让流体运动的奥秘在计算机中重现。对于已经掌握流体力学理论的中高级学习者来说&am…...

Linux服务器被挖矿木马劫持的五步应急处置指南

1. 这不是“中病毒”&#xff0c;是服务器被劫持成了矿机——先别慌&#xff0c;但必须立刻断网“服务器被黑客攻击&#xff0c;用来挖矿&#xff01;”——这句话在运维圈里一出&#xff0c;比收到OOM告警还让人头皮发紧。它不像网页被挂马、数据库被拖库那样有明显业务影响&a…...

告别SVN恐惧症:美术策划也能轻松上手的Unity PlasticSCM极简入门(附团队项目拉取实战)

告别SVN恐惧症&#xff1a;美术策划也能轻松上手的Unity PlasticSCM极简入门&#xff08;附团队项目拉取实战&#xff09; 在游戏开发团队中&#xff0c;版本控制系统是协作的基石&#xff0c;但传统工具如SVN往往让非技术成员望而生畏。当美术资源频繁更新、策划案不断迭代时&…...

用Azure Kinect DK和Body Tracking SDK,5分钟实现一个实时人体骨骼点检测Demo(C++版)

5分钟实战&#xff1a;用Azure Kinect DK实现实时人体骨骼点追踪&#xff08;C版&#xff09; 当你第一次拿到Azure Kinect DK时&#xff0c;最令人兴奋的莫过于它强大的人体追踪能力。这款深度相机不仅能捕捉高清彩色图像&#xff0c;更能通过AI算法实时重建人体骨骼关节点。本…...

3分钟快速安装BetterNCM插件管理器,让你的网易云音乐功能翻倍

3分钟快速安装BetterNCM插件管理器&#xff0c;让你的网易云音乐功能翻倍 【免费下载链接】BetterNCM-Installer 一键安装 Better 系软件 项目地址: https://gitcode.com/gh_mirrors/be/BetterNCM-Installer 还在为网易云音乐功能单一而烦恼吗&#xff1f;想要解锁更多个…...

DeepSeek代码风格检查避坑指南(内部审计报告首次披露:37个被忽略的合规红线)

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;DeepSeek代码风格检查的合规性本质与审计背景 DeepSeek代码风格检查并非单纯的技术偏好约束&#xff0c;而是嵌入研发治理链条中的合规性控制节点。其本质是将编程实践与组织级安全策略、行业监管要求&…...

操作符从浅入深的讲解

1. 操作符的分类 2. ⼆进制和进制转换 3. 原码、反码、补码 4. 移位操作符 5. 位操作符&#xff1a;&、|、^、~ 6. 单⽬操作符 7. 逗号表达式 8. 下标访问[]、函数调⽤() 9. 结构成员访问操作符 10. 操作符的属性&#xff1a;优先级、结合性 11. 表达式求值1.操作符的分类以…...

基于PIC32单片机实现Android USB音频转SPDIF输出的DIY方案

1. 项目概述&#xff1a;为Android设备打造一个高保真SPDIF音频接口作为一名长期折腾嵌入式音频和家庭影院的玩家&#xff0c;我经常遇到一个痛点&#xff1a;手头那些性能不错的Android手机或平板&#xff0c;其内置的3.5mm耳机孔或者USB-C口的音频输出质量&#xff0c;在连接…...

Claude服务治理架构升级(生产环境零停机迁移实录)

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;Claude服务治理架构升级&#xff08;生产环境零停机迁移实录&#xff09; 为应对日益增长的推理请求量与多租户策略精细化需求&#xff0c;我们对Claude服务治理层实施了从单体API网关向云原生服务网格的平滑…...