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>

完整代码下载

完整代码

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

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

相关文章

mysql:[Some non-transactional changed tables couldn‘t be rolled back]不支持事务

1. mysql创建表时默认引擎MyIsam&#xff0c;因此不支持事务的操作&#xff1b; 2. 修改mysql的默认引擎&#xff0c;可以使用show engine命令查看支持的引擎&#xff1a; 【my.conf详情说明】my.cnf配置文件注释详解_xiaolin01999的博客-CSDN博客 3. 原来使用MyIsam创建的表…

使用MDK5的一些偏僻使用方法和谋个功能的作用

程序下载后无法运行 需要勾选如下库&#xff0c;是优化后的库&#xff1b; MicroLib和标准C库之间的主要区别是: 1、MicroLib是专为深度嵌入式应用程序而设计的。 2、MicroLib经过优化&#xff0c;比使用ARM标准库使用更少的代码和数据内存。 3、MicroLib被设计成在没有操作…

stm32之28.ADC

须看原理图&#xff08;引脚、电压值、ADC几号通道&#xff09;配置 。 若对比值0~4096 模拟电压/参考电压4096/x 假设模拟电压2.1V&#xff0c;参考电压3.3v&#xff0c;4096/x3.3/2.1 ->3.3x2.1x4096 ->x2,606.5 也可反推出模拟电压 ADC转换时间 ADC时钟来源于…

【LeetCode每日一题合集】2023.8.14-2023.8.20(⭐切披萨3n块披萨)

文章目录 617. 合并二叉树833. 字符串中的查找与替换&#xff08;模拟&#xff09;2682. 找出转圈游戏输家&#xff08;模拟&#xff09;1444. 切披萨的方案数&#xff08;⭐⭐⭐⭐⭐&#xff09;解法——从递归到递推到优化&#xff08;二维前缀和记忆化搜索&#xff09; 1388…

【ag-grid-vue】列定义(Updating Column Definitions)

列定义一节解释了如何配置列。可以在初始设置列之后更改列的配置。本节介绍如何更新列定义。 添加和删除列 可以通过更新提供给网格的列定义列表来添加和删除列。当设置新列时&#xff0c;网格将与当前列进行比较&#xff0c;并计算出哪些列是旧的(要删除)、哪些列是新的(创建…

Linux简介

为什么选择Linux&#xff1f; Linux是一个优秀的操作系统 硬件方面&#xff1a;适合嵌入式&#xff0c;服务器&#xff0c;移动设备&#xff0c;桌面&#xff0c;计算机集群和超级计算机应用方面&#xff1a;人工智能&#xff0c;分布式计算&#xff0c;云计算&#xff0c;大数…

Win7系统电脑开机总出现硬盘自检的简单解决方法

你是不是经常会遇到电脑开机进行硬盘自检&#xff0c;而且每次开机都检查很久不能跳过&#xff1b;怎么才能跳过这一步骤呢&#xff1f;下面教大家如何让Win7系统电脑在开机的时候跳过硬盘自检这一步骤&#xff0c;加快开机时间。 解决步骤&#xff1a; 1、按下“Win R”快捷键…

【前端demo】倒计时器 可选择时间 原生实现

文章目录 效果过程日历与获取时间居中背景与字计时器清空计时器 代码HTMLCSSJS 其他demo 效果 效果预览&#xff1a;倒计时器 可选择时间 (codepen.io) 参考&#xff1a; Simple Clock/Countdown timer (codepen.io) 前端页面实现倒计时效果的几种方法_前端倒计时__Boboy的…

如何使用Puppeteer进行金融数据抓取和预测

导语 Puppeteer是一个基于Node.js的库&#xff0c;可以用来控制Chrome或Chromium浏览器&#xff0c;实现网页操作、截图、PDF生成等功能。本文将介绍如何使用Puppeteer进行金融数据抓取和预测&#xff0c;以及如何使用亿牛云爬虫代理提高爬虫效果。 概述 金融数据抓取是指从…

【Linux】简单的小程序:进度条

在学习进度条之前&#xff0c;需要学一点预备知识。 1. 预备知识 回车换行 现在的换行符&#xff08;\n&#xff09;其实就是回车式换行符&#xff0c;另起一行&#xff0c;光标指向最新一行的开头。回车符&#xff08;\r&#xff09;是光标指向这一行的开头。 缓冲区 &a…

腾讯云免费SSL证书申请流程_每年免费50个HTTPS证书

2023腾讯云免费SSL证书申请流程&#xff0c;一个腾讯云账号可以申请50张免费SSL证书&#xff0c;免费SSL证书为DV证书&#xff0c;仅支持单一域名&#xff0c;申请腾讯云免费SSL证书3分钟即可申请成功&#xff0c;免费SSL证书品牌为TrustAsia亚洲诚信&#xff0c;腾讯云百科分享…

使用gradio库的File模块实现文件上传和生成可下载文件

使用gradio库的File模块实现文件上传和生成可下载文件 文章目录 使用gradio库的File模块实现文件上传和生成可下载文件一、背景二、介绍1、gradio简介2、File模块简介3、tempfile 模块 三、文件上传demo实战1、具体代码2、运行样例 一、背景 在用Gradio设计改写效果审核AI的de…

华为云软件精英实战营——感受软件改变世界,享受Coding乐趣

机器人已经在诸多领域显现出巨大的商业价值&#xff0c;华为云计算致力于以云助端的方式为机器人产业带来全新机会 如果您是开发爱好者&#xff0c;想了解华为云&#xff0c;想和其他自由开发者交流经验&#xff1b; 如果您是学生&#xff0c;想和正在从事软件开发行业的大佬…

使用 Python 和 dash 创建仪表板

推荐&#xff1a;使用 NSDT场景编辑器快速搭建3D应用场景 介绍 在数据科学和分析领域&#xff0c;数据的力量不仅通过提取见解来释放&#xff0c;而且还通过有效地传达这些见解来释放;这就是数据可视化发挥作用的地方。 数据可视化是信息和数据的图形表示。它使用图表、图形和…

PostgreSQL 查询语句大全

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

Multimedia-播放器-架构2

目录 引言 问题1&#xff1a; 数据缓冲区 多线程模型 缓冲区的特点&#xff1a; 点播和直播场景中的缓冲区&#xff1a; 问题2&#xff1a; 同步方式 同步实现过程 引言 上一篇梳理了播放器的基本工作与处理流程&#xff0c;本片内容主要梳理一下其中会遇到的问题&am…

《Web安全基础》04. 文件上传漏洞

web 1&#xff1a;文件上传漏洞2&#xff1a;WAF 绕过2.1&#xff1a;数据溢出2.2&#xff1a;符号变异2.3&#xff1a;数据截断2.4&#xff1a;重复数据 本系列侧重方法论&#xff0c;各工具只是实现目标的载体。 命令与工具只做简单介绍&#xff0c;其使用另见《安全工具录》…

数据艺术:精通数据可视化的关键步骤

数据可视化是将复杂数据转化为易于理解的图表和图形的过程&#xff0c;帮助我们发现趋势、关联和模式。同时数据可视化也是数字孪生的基础&#xff0c;本文小编带大家用最简单的话语为大家讲解怎么制作一个数据可视化大屏&#xff0c;接下来跟随小编的思路走起来~ 1.数据收集和…

Apifox-比postman更优秀的接口自动化测试平台

一、Apifox介绍 Apifox 是 API 文档、API 调试、API Mock、API 自动化测试一体化协作平台&#xff0c;定位 Postman Swagger Mock JMeter。通过一套系统、一份数据&#xff0c;解决多个系统之间的数据同步问题。只要定义好 API 文档&#xff0c;API 调试、API 数据 Mock、AP…

UE5打完包后,启动程序不能全屏

最近看到ue5的打包程序后不能默认自动全屏&#xff0c;效果如下&#xff0c;发现并不是全屏的&#xff0c;而且就算点击放大也不是全屏 解决办法&#xff1a;设置如下之后在打包就可以了 但是会一直打印错误的日志&#xff0c;不过这个不影响使用 如果本文对你有帮助&#xff0…