# xlegex / x了个X This is a match-3 game, a simplified version of the sheep, currently based on rabbits, you can customize your own game based on this. 这是一个三消类的游戏,简化版的羊了个羊,目前是以兔子为素材,你可以基于这个定制你自己的游戏。 [Online Demo / 在线demo](https://chenxch.github.io/xlegex/) ## Game screenshot / 游戏截图 ![QQ浏览器截图20220922214942](https://cdn.staticaly.com/gh/chenxch/pic-image@master/20220929/tutu.4jhzwxilnfs0.gif) ## Core Code / 核心代码 ```ts // useGame.ts useGame(config: GameConfig): Game{ ... } ``` ### ```ts // type.d.ts interface Game { nodes: Ref selectedNodes: Ref removeList: Ref removeFlag: Ref backFlag: Ref handleSelect: (node: CardNode) => void handleSelectRemove: (node: CardNode) => void handleBack: () => void handleRemove: () => void initData: (config?: GameConfig) => void } interface GameConfig { container?: Ref // cardNode容器 cardNum: number // card类型数量 layerNum: number // card层数 trap?: boolean // 是否开启陷阱 delNode?: boolean // 是否从nodes中剔除已选节点 events?: GameEvents // 游戏事件 } interface GameEvents { clickCallback?: () => void dropCallback?: () => void winCallback?: () => void loseCallback?: () => void } ``` ## Application / 应用 ```ts const { nodes, selectedNodes, handleSelect, handleBack, backFlag, handleRemove, removeFlag, removeList, handleSelectRemove, initData, } = useGame({ container: containerRef, cardNum: 4, layerNum: 2, trap: false, events: { clickCallback: handleClickCard, dropCallback: handleDropCard, winCallback: handleWin, loseCallback: handleLose, }, }) initData() ``` ## Related Articles / 相关文章 [juejin/掘金](https://juejin.cn/post/7147245442172977189)