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.rhkb.cn/news/300664.html

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

相关文章

代码+视频,手动绘制logistic回归预测模型校准曲线(Calibration curve)(2)

校准曲线图表示的是预测值和实际值的差距&#xff0c;作为预测模型的重要部分&#xff0c;目前很多函数能绘制校准曲线。 一般分为两种&#xff0c;一种是通过Hosmer-Lemeshow检验&#xff0c;把P值分为10等分&#xff0c;求出每等分的预测值和实际值的差距 另外一种是calibrat…

【深度学习】StableDiffusion的组件解析,运行一些基础组件效果

文章目录 前言vaeclipUNetunet训练帮助、问询 前言 看了篇文&#xff1a; https://zhuanlan.zhihu.com/p/617134893 运行一些组件试试效果。 vae 代码&#xff1a; import torch from diffusers import AutoencoderKL import numpy as np from PIL import Image# 加载模型…

前端入门(认识HTML,CSS,JavaScript三件套)

目录 前言 HTML&#xff08;构建&#xff09; CSS&#xff08;设计&#xff09; JavaScript&#xff08;互动&#xff09; 总结 相关书籍推荐 前言 前端&#xff08;Frontend&#xff09;指的是与用户直接交互的部分&#xff0c;也称为客户端。在网站或者应用程序中&…

FIN和RST的区别,几种TCP连接出现RST的情况

一、RST跟FIN的区别&#xff1a; 正常关闭连接的时候发的包是FIN&#xff0c;但是如果是异常关闭连接&#xff0c;则发送RST包 两者的区别在于&#xff1a; 1.RST不必等缓冲区的包都发出去&#xff0c;直接就丢弃缓存区的包发送RST包。而FIN需要先处理完缓存区的包才能发送F…

实战webSocket压测(三)Jmeter真实接口联调

背景&#xff1a; 接口地址为&#xff1a;ws://sunlei.demo 接口说明&#xff1a;websocket接口&#xff0c;首次连接&#xff0c;通过Text请求设置开启标志&#xff0c;然后通过wav文件流传输&#xff0c;达到后端服务可以根据传输信息进行解析满足指定标准后&#xff0c;web…

这就是AI眼中的物理世界:OpenAI Sora音乐短片《Worldweight》和超现实影片《气球人》

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;所以创建了“AI信息Gap”这个公众号&#xff0c;专注于分享AI全维度知识…

自定义gitlog格式

git log命令非常强大而好用&#xff0c;在复杂系统的版本管理中扮演着重要的角色&#xff0c;但默认的git log命令显示出的东西实在太丑&#xff0c;不好好打扮一下根本没法见人&#xff0c;打扮好了用alias命令拍个照片&#xff0c;就正式出道了&#xff01; 在使用git查看lo…

何为网络协议?一图知晓网络过程。

网络协议就是计算机之间沟通的语言 为了有效地交流&#xff0c;计算机之间需要一种共同的规则或协议&#xff0c; 就像我们和老外沟通之前&#xff0c;要先商量好用哪种语言&#xff0c; 要么大家都说中文&#xff0c;要么大家都说英语&#xff0c;这才能有效地沟通。 网络协…

JVM 全景图

今天我重新复习了一下 jvm 的一些知识点。我以前觉得 jvm 的知识点很多很碎&#xff0c;而且记起来很困难&#xff0c;但是今天我重新复习了一下&#xff0c;对这些知识点进行了简单的梳理之后&#xff0c;产生了不一样的看法。虽然 jvm 的知识点很碎&#xff0c;但是如果你真的…

如何自定义项目启动时的图案

说明&#xff1a;有的项目启动时&#xff0c;会在控制台输出下面的图案。本文介绍Spring Boot项目如何自定义项目启动时的图案&#xff1b; 生成字符图案 首先&#xff0c;找到一张需要设置的图片&#xff0c;使用下面的代码&#xff0c;将图片转为字符文件&#xff1b; impo…

动态规划刷题(算法竞赛、蓝桥杯)--线段(线性DP)

1、题目链接&#xff1a;P3842 [TJOI2007] 线段 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) #include <bits/stdc.h> using namespace std; const int N20010; int a[N][2],f[N][2]; //a[i][0]表示l[i],a[i][1]表示r[i] int dis(int a,int b){return abs(a-b); } int…

基于Swin Transformers的乳腺癌组织病理学图像多分类

乳腺癌的非侵入性诊断程序涉及体检和成像技术&#xff0c;如乳房X光检查、超声检查和磁共振成像。成像程序对于更全面地评估癌症区域和识别癌症亚型的敏感性较低。 CNN表现出固有的归纳偏差&#xff0c;并且对于图像中感兴趣对象的平移、旋转和位置有所不同。因此&#xff0c;…

flutter升级3.10.6Xcode构建报错

flutter sdk 升级Xcode报错收集&#xff0c;错误信息如下&#xff1a; Error (Xcode): Cycle inside Runner; building could produce unreliable results.没问题版本信息&#xff1a; Xcode&#xff1a;15.3 flutter sdk &#xff1a;3.7.12 dart sdk&#xff1a;2.19.6 …

考研||考公||就业||其他?-------愿不再犹豫

大三下了&#xff0c;现在已经开学一个多月了&#xff0c;在上个学期的时候陆陆续续吧周围有的行动早的人已经开始准备考研了&#xff0c;当然这只是下小部分人吧&#xff0c;也有一部分人是寒假可能就开始了&#xff0c;更多的则是开学的时候&#xff0c;我的直观感受是图书馆…

AI大模型下的策略模式与模板方法模式对比解析

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》《MYSQL应用》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 &#x1f680; 转载自热榜文章&#xff1a;设计模式深度解析&#xff1a;AI大模型下…

[挖坟]如何安装Shizuku和LSPatch并安装模块(不需要Root,非Magisk)

2023年12月13日&#xff0c;LSPatch 停止维护 2024年1月8日&#xff0c;LSPosed 停止维护 2024年1月8日&#xff0c;ZygiskNext 停止维护 2024年1月9日&#xff0c;KernelSU 停止维护 这里使用 ColorOS 14 演示&#xff0c;其他品牌手机类似 安装 Shizuku 官网: https://shiz…

报修小程序怎么建立?维修服务行业的智能化升级

在这个数字化飞速发展的时代&#xff0c;维修服务行业也在经历着前所未有的变革。消费者对于服务的期待不再局限于传统的电话预约或线下等待&#xff0c;而是希望能够通过更加智能、便捷的途径解决日常生活中的维修问题。在这样的背景下&#xff0c;报修小程序应运而生&#xf…

性能分析-CPU知识

目录 CPU知识 cpu组成 查看cpu信息&#xff1a; top命令中 cpu相关&#xff1a; top命令看到系统负载&#xff1a; CPU负载 IO负载 上下文&#xff1a; CPU的寄存器和程序计数器----在cpu的控制器中 实战演示分析 top命令分析 arthas工具 进程上下文切换高的问题分析…

【MIT6.S081】Lab1: Xv6 and Unix utilities(详细解答版)

实验内容网址&#xff1a;https://xv6.dgs.zone/labs/requirements/lab1.html Sleep 关键点&#xff1a;函数参数判断、系统函数调用 思路&#xff1a; 通过argc来判断函数参数是否正确&#xff0c;通过atoi函数来讲字符串转化为整型&#xff0c;调用sleep函数后退出程序。 代…

OpenAI Sora:浅析文生视频模型Sora以及技术原理简介

一、Sora是什么&#xff1f; Sora官方链接&#xff1a;https://openai.com/sora 视频模型领头羊Runway Gen 2、Pika等AI视频工具&#xff0c;都还在突破几秒内的连贯性&#xff0c;而OpenAI&#xff0c;已经达到了史诗级的纪录。 OpenAI&#xff0c;永远快别人一步&#xff0…