React - 连连看小游戏

简介

        小时候经常玩连连看小游戏。在游戏中,当找到2个相同的元素就可以消除元素。

        本文会借助react实现连连看小游戏。

实现效果

实现难点

 1.item 生成

   1. 每一个图片都是一个item,items数组的大小为size*size。

       item对象包括grid布局的位置,key。

       key是标识符,可以标识图片, 相等判断等。

  2. items 可以先顺序生成,最后再调用shuffle算法随机排序。

    const size = 8; // 大小为 8 * 8const itemImgSize = 20; // 圖片素材大小const [items, setItems] = useState([]);useEffect(() => { // 初始化元素const initItems = [];let idx = 0;while (initItems.length < size * size) {// 一次插入2個initItems.push({key: (idx % itemImgSize) + 1,x: parseInt(idx / size),y: parseInt(idx % size)});initItems.push({key: (( idx)% itemImgSize) + 1,x: parseInt(( idx + 1) / size),y: parseInt((idx + 1)% size)});idx = idx + 1;}const nArr = [...shuffleArray(initItems)];setItems(nArr);}, [])function shuffleArray(arr) {for (let i = arr.length - 1; i >= arr.length / 2; i--) {const j = Math.floor(Math.random() * (size - 1));[arr[i], arr[j]] = [arr[j], arr[i]];if (arr[i] instanceof Array) {shuffleArray(arr[i]);shuffleArray(arr[j])} else {// 交换keylet key = arr[i].key;arr[i].key = arr[j].key;arr[j].key = key;}}return arr;}

1. 判断选择的2个item可以消除

      基于dfs算法实现,以其中一方为原点,另一方为终点。找到一条成功的路径。

tips: dfs 可以改成bfs, dfs  当item 消除大半后,会变慢。

    /*** 判断 (i,j) 与(x,y)是否可达*/function dfs(i, j, visited, x, y) {if (res.current === true) {return;}if (i < 0 || i >= size + 2 || j < 0 || j >= size + 2) { // 边界return;}if (i === x && j === y) {res.current = true;return;}if (visited[i][j] === 1) {return;}if (board.current[i][j] === 1) { // 只能走空白return;}visited[i][j] = 1;dfs(i - 1, j, visited, x, y);dfs(i + 1, j, visited, x, y);dfs(i, j + 1, visited, x, y);dfs(i, j - 1, visited, x, y);visited[i][j] = 0;}

  boards标记数组是根据items数组生成,若item存在,则boards对应标记为1,反之为null。

  item 对应位置为(item.x+1,item.y+1)

 boards 的大小为(size + 2) * (size + 2) ,  + 2是为了解决边界上的2点相连处理。

    // 二维int数组,标记是否存在元素 (size + 2) * (size + 2), +1是为了边界可以连接const board = useRef([]);useEffect(() => {const nBoard = new Array(size + 2);// initfor (let i = 0; i < size + 2; i++) {nBoard[i] = new Array(size + 2);for (let j = 0; j< size + 2;j++){nBoard[i][j] = 0;}}//根据items设置boardsitems.map((item) => {nBoard[item.x + 1][item.y + 1] = 1;})board.current = (nBoard)}, [items]);
整体代码
import bgImg from './imgs/bg.png'
import {useEffect, useRef, useState} from "react";export const LinkGame = () => {const size = 8; // 大小为 8 * 8const itemImgSize = 20; // 圖片素材大小const [items, setItems] = useState([]);useEffect(() => { // 初始化元素const initItems = [];let idx = 0;while (initItems.length < size * size) {// 一次插入2個initItems.push({key: (idx % itemImgSize) + 1,x: parseInt(idx / size),y: parseInt(idx % size)});initItems.push({key: (idx % itemImgSize) + 1,x: parseInt((idx + 1)/ size),y: parseInt((idx + 1) % size)});idx = idx + 2;}const nArr = [...shuffleArray(initItems)];setItems(nArr);}, [])function shuffleArray(arr) {for (let i = arr.length - 1; i >= arr.length / 2; i--) {const j = Math.floor(Math.random() * (size - 1));[arr[i], arr[j]] = [arr[j], arr[i]];if (arr[i] instanceof Array) {shuffleArray(arr[i]);shuffleArray(arr[j])} else {// 交换keylet key = arr[i].key;arr[i].key = arr[j].key;arr[j].key = key;}}return arr;}// 二维int数组,标记是否存在元素 (size + 2) * (size + 2), +1是为了边界可以连接const board = useRef([]);useEffect(() => {const nBoard = new Array(size + 2);// initfor (let i = 0; i < size + 2; i++) {nBoard[i] = new Array(size + 2);for (let j = 0; j< size + 2;j++){nBoard[i][j] = 0;}}//根据items设置boardsitems.map((item) => {nBoard[item.x + 1][item.y + 1] = 1;})board.current = (nBoard)}, [items]);// 当选择2个时候,判断是否能消除,如果能消除,则消除,不能则复原。const res = useRef(false);useEffect(() => {const checkedList = [];items.map(item => {if (item.checked) {checkedList.push(item);}if (checkedList.length === 2) {const a = checkedList[0];const b = checkedList[1];if (a.key !== b.key) {a.checked = false;b.checked = false;setItems([...items])} else {// 判断 a 和 b 直接是否能连接const visited = new Array(size + 2);for (let i = 0; i < size + 2; i++) {visited[i] = new Array(size + 2);}const i = a.x + 1;const j = a.y + 1;const x = b.x + 1;const y = b.y + 1;dfs(i + 1, j, visited, x, y)dfs(i - 1, j, visited, x, y)dfs(i, j + 1, visited, x, y)dfs(i, j - 1, visited, x, y)if (res.current === true) { // 存在线路相连// 移除 a 和 bconst nItems = [];items.map((item) => {if (item !== a && item !== b) {nItems.push(item);}})setItems(nItems)res.current = false; //init} else {a.checked = false;b.checked = false;setItems([...items])}}}})}, [items]);/*** 判断 (i,j) 与(x,y)是否可达*/function dfs(i, j, visited, x, y) {if (res.current === true) {return;}if (i < 0 || i >= size + 2 || j < 0 || j >= size + 2) { // 边界return;}if (i === x && j === y) {res.current = true;return;}if (visited[i][j] === 1) {return;}if (board.current[i][j] === 1) { // 只能走空白return;}visited[i][j] = 1;dfs(i - 1, j, visited, x, y);dfs(i + 1, j, visited, x, y);dfs(i, j + 1, visited, x, y);dfs(i, j - 1, visited, x, y);visited[i][j] = 0;}function onItemClick(item) {item.checked = !item.checked;setItems([...items]);}const gameBoardStyle = { // 游戏区域样式display: 'grid',gridTemplateColumns: `repeat(${size}, 1fr)`,gridTemplateRows: `repeat(${size}, 1fr)`,width: '60vw',height: '80vh',backgroundImage: 'url(' + bgImg + ')',backgroundSize: 'cover'};const gameBoardItemStyle = (item) => {if (item.checked) {return ({gridRowStart: item.x + 1,gridColumnStart: item.y + 1,opacity: 0.4})}return ({gridRowStart: item.x + 1,gridColumnStart: item.y + 1,});}return <><div id={'link-game'}><div style={gameBoardStyle}>{items.map((item, idx) => (<div style={gameBoardItemStyle(item)}onClick={() => onItemClick(item)} key={'item-' + idx}><img src={require(`./imgs/${item.key}.png`)}/></div>))}</div></div></>
}

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

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

相关文章

【爬虫开发】爬虫从0到1全知识md笔记第4篇:Selenium课程概要,selenium的介绍【附代码文档】

爬虫开发从0到1全知识教程完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;爬虫课程概要&#xff0c;爬虫基础爬虫概述,,http协议复习。requests模块&#xff0c;requests模块1. requests模块介绍,2. response响应对象,3. requests模块发送请求,4. request…

入门用Hive构建数据仓库

在当今数据爆炸的时代&#xff0c;构建高效的数据仓库是企业实现数据驱动决策的关键。Apache Hive 是一个基于 Hadoop 的数据仓库工具&#xff0c;可以轻松地进行数据存储、查询和分析。本文将介绍什么是 Hive、为什么选择 Hive 构建数据仓库、如何搭建 Hive 环境以及如何在 Hi…

分解因数

描述 给出一个正整数 a&#xff0c;要求分解成若干个正整数的乘积&#xff0c;即 aa1a2a3…an&#xff0c;并且 1<a1≤a2≤a3≤…≤an&#xff0c;问这样的分解的方案种数有多少。注意到aa 也是一种分解。 输入描述 第 1 行是测试数据的组数 n(1≤n≤10)&#xff0c;后面…

AcWing 4199. 公约数(数学-约数)

给定两个正整数 a a a 和 b b b。 你需要回答 q q q 个询问。 每个询问给定两个整数 l , r l,r l,r&#xff0c;你需要找到最大的整数 x x x&#xff0c;满足&#xff1a; x x x 是 a a a 和 b b b 的公约数。 l ≤ x ≤ r l≤x≤r l≤x≤r。 输入格式 第一行包含两个…

【PaletX】ui组件使用

表单 当表单不是以component和template形式时&#xff0c;不需要patchValue重新赋值 srcObj用于赋值表单初始值 表单校验 优先级&#xff1a;输入过程中的校验 > 焦点离开后的校验 > 点击确定按钮后的校验 适用场景&#xff1a; 输入过程中的校验&#xff1a;焦点进入…

类与对象(一)

目录 一、类的引入和定义 二、类的访问限定符及封装 1&#xff09;访问限定符 2&#xff09;封装 三、类的作用域和实例化 1&#xff09;类的作用域 2&#xff09;实例化 四、类的大小 1&#xff09;类的大小计算方式 2&#xff09;特殊的类的大小 五、this指针 1&…

C++设计模式:观察者模式(三)

1、定义与动机 观察者模式定义&#xff1a;定义对象间的一种1对多&#xff08;变化&#xff09;的依赖关系&#xff0c;以便当一个对象&#xff08;Subject&#xff09;的状态发生比改变时&#xff0c;所有依赖于它的对象都得到通知并且自动更新 再软件构建过程中&#xff0c…

回溯算法|332.重新安排行程 51. N皇后 37. 解数独

332.重新安排行程 力扣题目链接 class Solution { private: // unordered_map<出发机场, map<到达机场, 航班次数>> targets unordered_map<string, map<string, int>> targets; bool backtracking(int ticketNum, vector<string>& result…

蓝桥杯刷题-06-砍树-图遍历DFS⭐⭐⭐⭐

给定一棵由 n 个结点组成的树以及 m 个不重复的无序数对 (a1, b1), (a2, b2), . . . , (am, bm)&#xff0c;其中 ai 互不相同&#xff0c;bi 互不相同&#xff0c;ai ≠ bj(1 ≤ i, j ≤ m)。 小明想知道是否能够选择一条树上的边砍断&#xff0c;使得对于每个 (ai , bi) 满足…

小程序如何设置余额充值和消费功能

小程序中设置余额充值和消费功能非常重要的&#xff0c;通过让客户在小程序中进行余额充值&#xff0c;不仅可以提高用户粘性&#xff0c;还可以促进消费&#xff0c;增加用户忠诚度。以下是如何在小程序中设置余额充值和消费功能的步骤&#xff1a; 1. **设计充值入口**&…

代码随想录-14day:二叉树3

一、二叉树最大深度 最大深度&#xff1a;根节点到最远叶子节点的最长路径上的节点数。 可以使用迭代法和递归法&#xff0c;以递归法为例&#xff1a;还是以递归三要素为基准&#xff0c;进行解决。 int maxDepth(struct TreeNode* root) {// struct TreeNode** NodeList …

【力扣】242. 有效的字母异位词

242. 有效的字母异位词 题目描述 给定两个字符串 s 和 t &#xff0c;编写一个函数来判断 t 是否是 s 的字母异位词。 注意&#xff1a;若 s 和 t 中每个字符出现的次数都相同&#xff0c;则称 s 和 t 互为字母异位词。 示例 1: 输入: s “anagram”, t “nagaram” 输出…

使用js的正则表达式匹配字符串里的url,并对url进行修改后替换原来的url

如果要匹配URL并且对其进行一定的修改后替换原来的URL&#xff0c;你需要一个函数&#xff0c;这个函数可以匹配URL&#xff0c;然后对匹配到的URL进行所需要的修改。下面是一个例子&#xff0c;展示了如何实现这样的功能&#xff1a; function replaceAndModifyUrls(text, mo…

2024.3.22力扣每日一题——网格图中最少访问的格子数

2024.3.22 题目来源我的题解方法一 传统的深度优先遍历 超时方法二 优先队列 题目来源 力扣每日一题&#xff1b;题序&#xff1a;2617 我的题解 方法一 传统的深度优先遍历 超时 直接从(0,0)开始深度优先遍历&#xff0c;直到遍历到(m-1,n-1)截止。 优化成记忆化搜索仍然无…

PyTorch搭建Autoformer实现长序列时间序列预测

目录 I. 前言II. AutoformerIII. 代码3.1 Encoder输入3.1.1 Token Embedding3.1.2 Temporal Embedding 3.2 Decoder输入3.3 Encoder与Decoder3.3.1 初始化3.3.2 Encoder3.3.3 Decoder IV. 实验 I. 前言 前面已经写了很多关于时间序列预测的文章&#xff1a; 深入理解PyTorch中…

关于Idea无法正常启动

编辑这个文件 最后一行 加上 pause 双击文件 会显示报错信息

npm install node-sass报错

前言 在使用 node-sass 时&#xff0c;你可能会遇到安装 node-sass 时出现各种错误的情况。在本文中&#xff0c;我们将探讨一些常见的 node-sass 安装错误&#xff0c;以及如何解决它们。 无论你是初学者还是有经验的开发者&#xff0c;本文都将为你提供有用的信息和技巧&…

Vue学习笔记-S1

1 什么是Vue Vue是一款用于构建用户界面的渐进式JavaScripte框架&#xff0c;可基于数据渲染用户页面. 1.1 Vue的知识架构 Vue核心包&#xff1a;声明式渲染、组件系统Vue构建&#xff1a;客户端路由、状态管理、构建工具局部使用Vue&#xff1a;快速入门、常用指令、生命周…

解读TF存储卡

一、TF简史 TF卡的故事&#xff0c;要从20年前谈起…… 2000年1月&#xff0c;松下闪迪东芝成立SD协会&#xff08;SD Association&#xff0c;简称SDA&#xff09;&#xff0c;专注于制定并推广SD存储卡的产业标准。二十年后的今天&#xff0c;SDA企业会员已发展至800多家&a…

车载电子电器架构 —— 软件下载

车载电子电器架构 —— 软件下载 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无…