chenxch / xlegex

Match 3 type game template. 简化版羊了个羊游戏模板

⭐ Stargazers

Many thanks to the kind individuals who leave a star. Your support is much appreciated!

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

Game screenshot / 游戏截图

Core Code / 核心代码

// useGame.ts
useGame(config: GameConfig): Game{
  ...
}

// type.d.ts
interface Game {
  nodes: Ref<CardNode[]>
  selectedNodes: Ref<CardNode[]>
  removeList: Ref<CardNode[]>
  removeFlag: Ref<boolean>
  backFlag: Ref<boolean>
  handleSelect: (node: CardNode) => void
  handleSelectRemove: (node: CardNode) => void
  handleBack: () => void
  handleRemove: () => void
  initData: (config?: GameConfig) => void
}
interface GameConfig {
  container?: Ref<HTMLElement | undefined> // 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 / 应用

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/掘金

xlegex's Issues

如何启动

大佬你好，我刚接触编程不就想问一下，要如何启动游戏，感谢！

npm run dev后一直加载不出来？

有偿求助

已加，可删除issue