React - 连连看小游戏

原创

已于 2024-04-04 20:40:42 修改 · 792 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

于 2024-04-04 15:12:25 首次发布

这篇文章介绍了如何使用React开发一个8x8大小的连连看游戏，涉及元素生成、随机排序、DFS算法用于判断消除路径以及状态管理。作者详细解释了如何创建item对象，生成并随机排列元素，以及实现游戏核心逻辑，包括检查两个元素是否可以消除。

简介

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

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

实现效果

实现难点

1.item 生成

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

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

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

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

    const size = 8; // 大小为 8 * 8

    const 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 {
                // 交换key
                let key = arr[i].key;
                arr[i].key = arr[j].key;
                arr[j].key = key;
            }
        }
        return arr;
    }

最低0.47元/天解锁文章