devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

React - 连连看小游戏

作者：很楠不爱3 | 2024-04-06 04:43:13

赞

踩

React - 连连看小游戏

简介

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

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

实现效果

实现难点

 1.item 生成

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

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

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

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

  1.     const size = 8; // 大小为 8 * 8
  2.  
  3.     const itemImgSize = 20; // 圖片素材大小
  4.     const [items, setItems] = useState([]);
  5.     useEffect(() => { // 初始化元素
  6.         const initItems = [];
  7.         let idx = 0;
  8.         while (initItems.length < size * size) {
  9.             // 一次插入2個
  10.             initItems.push({
  11.                 key: (idx % itemImgSize) + 1,
  12.                 x: parseInt(idx / size),
  13.                 y: parseInt(idx % size)
  14.             });
  15.             
  16.             initItems.push({
  17.                 key: (( idx)% itemImgSize) + 1,
  18.                 x: parseInt(( idx + 1) / size),
  19.                 y: parseInt((idx + 1)% size)
  20.             });
  21.             idx = idx + 1;
  22.         }
  23.         const nArr = [...shuffleArray(initItems)];
  24.         setItems(nArr);
  25.  
  26.     }, [])
  27.  
  28.  
  29.     function shuffleArray(arr) {
  30.  
  31.         for (let i = arr.length - 1; i >= arr.length / 2; i--) {
  32.             const j = Math.floor(Math.random() * (size - 1));
  33.             [arr[i], arr[j]] = [arr[j], arr[i]];
  34.             if (arr[i] instanceof Array) {
  35.                 shuffleArray(arr[i]);
  36.                 shuffleArray(arr[j])
  37.             } else {
  38.                 // 交换key
  39.                 let key = arr[i].key;
  40.                 arr[i].key = arr[j].key;
  41.                 arr[j].key = key;
  42.             }
  43.         }
  44.         return arr;
  45.     }

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

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

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

  1.     /**
  2.      * 判断 （i,j) 与(x,y)是否可达
  3.      */
  4.     function dfs(i, j, visited, x, y) {
  5.         if (res.current === true) {
  6.             return;
  7.         }
  8.         if (i < 0 || i >= size + 2 || j < 0 || j >= size + 2) { // 边界
  9.             return;
  10.         }
  11.  
  12.         if (i === x && j === y) {
  13.             res.current = true;
  14.             return;
  15.         }
  16.  
  17.         if (visited[i][j] === 1) {
  18.             return;
  19.         }
  20.         if (board.current[i][j] === 1) { // 只能走空白
  21.             return;
  22.         }
  23.         visited[i][j] = 1;
  24.         dfs(i - 1, j, visited, x, y);
  25.         dfs(i + 1, j, visited, x, y);
  26.         dfs(i, j + 1, visited, x, y);
  27.         dfs(i, j - 1, visited, x, y);
  28.         visited[i][j] = 0;
  29.     }

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

  item 对应位置为（item.x+1,item.y+1）

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

  1.     // 二维int数组，标记是否存在元素 (size + 2) * (size + 2)， +1是为了边界可以连接
  2.     const board = useRef([]);
  3.     useEffect(() => {
  4.         const nBoard = new Array(size + 2);
  5.         // init
  6.         for (let i = 0; i < size + 2; i++) {
  7.             nBoard[i] = new Array(size + 2);
  8.             for (let j = 0; j< size + 2;j++){
  9.                 nBoard[i][j] = 0;
  10.             }
  11.         }
  12.  
  13.         //根据items设置boards
  14.         items.map((item) => {
  15.             nBoard[item.x + 1][item.y + 1] = 1;
  16.         })
  17.  
  18.         board.current = (nBoard)
  19.     }, [items]);
整体代码
  1. import bgImg from './imgs/bg.png'
  2. import {useEffect, useRef, useState} from "react";
  3.  
  4. export const LinkGame = () => {
  5.  
  6.     const size = 8; // 大小为 8 * 8
  7.  
  8.     const itemImgSize = 20; // 圖片素材大小
  9.     const [items, setItems] = useState([]);
  10.     useEffect(() => { // 初始化元素
  11.         const initItems = [];
  12.         let idx = 0;
  13.         while (initItems.length < size * size) {
  14.             // 一次插入2個
  15.             initItems.push({
  16.                 key: (idx % itemImgSize) + 1,
  17.                 x: parseInt(idx / size),
  18.                 y: parseInt(idx % size)
  19.             });
  20.      
  21.             initItems.push({
  22.                 key: (idx % itemImgSize) + 1,
  23.                 x: parseInt((idx + 1)/ size),
  24.                 y: parseInt((idx + 1) % size)
  25.             });
  26.             idx = idx + 2;
  27.         }
  28.         const nArr = [...shuffleArray(initItems)];
  29.         setItems(nArr);
  30.  
  31.     }, [])
  32.  
  33.  
  34.     function shuffleArray(arr) {
  35.  
  36.         for (let i = arr.length - 1; i >= arr.length / 2; i--) {
  37.             const j = Math.floor(Math.random() * (size - 1));
  38.             [arr[i], arr[j]] = [arr[j], arr[i]];
  39.             if (arr[i] instanceof Array) {
  40.                 shuffleArray(arr[i]);
  41.                 shuffleArray(arr[j])
  42.             } else {
  43.                 // 交换key
  44.                 let key = arr[i].key;
  45.                 arr[i].key = arr[j].key;
  46.                 arr[j].key = key;
  47.             }
  48.         }
  49.         return arr;
  50.     }
  51.  
  52.     // 二维int数组，标记是否存在元素 (size + 2) * (size + 2)， +1是为了边界可以连接
  53.     const board = useRef([]);
  54.     useEffect(() => {
  55.         const nBoard = new Array(size + 2);
  56.         // init
  57.         for (let i = 0; i < size + 2; i++) {
  58.             nBoard[i] = new Array(size + 2);
  59.             for (let j = 0; j< size + 2;j++){
  60.                 nBoard[i][j] = 0;
  61.             }
  62.         }
  63.  
  64.         //根据items设置boards
  65.         items.map((item) => {
  66.             nBoard[item.x + 1][item.y + 1] = 1;
  67.         })
  68.  
  69.         board.current = (nBoard)
  70.     }, [items]);
  71.  
  72.  
  73.     // 当选择2个时候，判断是否能消除，如果能消除，则消除，不能则复原。
  74.     const res = useRef(false);
  75.     useEffect(() => {
  76.         const checkedList = [];
  77.         items.map(item => {
  78.             if (item.checked) {
  79.                 checkedList.push(item);
  80.             }
  81.             if (checkedList.length === 2) {
  82.                 const a = checkedList[0];
  83.                 const b = checkedList[1];
  84.  
  85.                 if (a.key !== b.key) {
  86.                     a.checked = false;
  87.                     b.checked = false;
  88.                     setItems([...items])
  89.                 } else {
  90.                     // 判断 a 和 b 直接是否能连接
  91.                     const visited = new Array(size + 2);
  92.                     for (let i = 0; i < size + 2; i++) {
  93.                         visited[i] = new Array(size + 2);
  94.                     }
  95.                     const i = a.x + 1;
  96.                     const j = a.y + 1;
  97.                     const x = b.x + 1;
  98.                     const y = b.y + 1;
  99.                     dfs(i + 1, j, visited, x, y)
  100.                     dfs(i - 1, j, visited, x, y)
  101.                     dfs(i, j + 1, visited, x, y)
  102.                     dfs(i, j - 1, visited, x, y)
  103.                     if (res.current === true) { // 存在线路相连
  104.                         // 移除 a 和 b
  105.                         const nItems = [];
  106.                         items.map((item) => {
  107.                             if (item !== a && item !== b) {
  108.                                 nItems.push(item);
  109.                             }
  110.                         })
  111.                         setItems(nItems)
  112.                         res.current = false; //init
  113.                     } else {
  114.                         a.checked = false;
  115.                         b.checked = false;
  116.                         setItems([...items])
  117.                     }
  118.                 }
  119.             }
  120.         })
  121.     }, [items]);
  122.  
  123.     /**
  124.      * 判断 （i,j) 与(x,y)是否可达
  125.      */
  126.     function dfs(i, j, visited, x, y) {
  127.         if (res.current === true) {
  128.             return;
  129.         }
  130.         if (i < 0 || i >= size + 2 || j < 0 || j >= size + 2) { // 边界
  131.             return;
  132.         }
  133.  
  134.         if (i === x && j === y) {
  135.             res.current = true;
  136.             return;
  137.         }
  138.  
  139.         if (visited[i][j] === 1) {
  140.             return;
  141.         }
  142.         if (board.current[i][j] === 1) { // 只能走空白
  143.             return;
  144.         }
  145.         visited[i][j] = 1;
  146.         dfs(i - 1, j, visited, x, y);
  147.         dfs(i + 1, j, visited, x, y);
  148.         dfs(i, j + 1, visited, x, y);
  149.         dfs(i, j - 1, visited, x, y);
  150.         visited[i][j] = 0;
  151.     }
  152.  
  153.     function onItemClick(item) {
  154.         item.checked = !item.checked;
  155.         setItems([...items]);
  156.     }
  157.  
  158.     const gameBoardStyle = { // 游戏区域样式
  159.         display: 'grid',
  160.         gridTemplateColumns: `repeat(${size}, 1fr)`,
  161.         gridTemplateRows: `repeat(${size}, 1fr)`,
  162.         width: '60vw',
  163.         height: '80vh',
  164.         backgroundImage: 'url(' + bgImg + ')',
  165.         backgroundSize: 'cover'
  166.     };
  167.  
  168.     const gameBoardItemStyle = (item) => {
  169.         if (item.checked) {
  170.             return ({
  171.                 gridRowStart: item.x + 1,
  172.                 gridColumnStart: item.y + 1,
  173.                 opacity: 0.4
  174.             })
  175.         }
  176.         return ({
  177.             gridRowStart: item.x + 1,
  178.             gridColumnStart: item.y + 1,
  179.  
  180.         });
  181.     }
  182.  
  183.     return <>
  184.         <div id={'link-game'}>
  185.             <div style={gameBoardStyle}>
  186.                 {
  187.                     items.map((item, idx) => (
  188.                         <div style={gameBoardItemStyle(item)}
  189.                              onClick={() => onItemClick(item)} key={'item-' + idx}>
  190.                             <img src={require(`./imgs/${item.key}.png`)}/>
  191.                         </div>
  192.                     ))
  193.                 }
  194.             </div>
  195.         </div>
  196.     </>
  197. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/369856
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号