https://github.com/chenxch/xlegex

Match 3 type game template. 简化版羊了个羊游戏模板
https://github.com/chenxch/xlegex

Last synced: 3 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/chenxch/xlegex
• Owner: chenxch
• License: mit
• Created: 2022-09-20T16:01:27.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-02-10T15:07:55.000Z (almost 2 years ago)
• Last Synced: 2024-12-27T09:09:11.052Z (10 days ago)
• Language: TypeScript
• Homepage: https://chenxch.github.io/xlegex/
• Size: 4.09 MB
• Stars: 231
• Watchers: 3
• Forks: 71
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome - chenxch/xlegex - Match 3 type game template. 简化版羊了个羊游戏模板 (TypeScript)
• awesome - chenxch/xlegex - Match 3 type game template. 简化版羊了个羊游戏模板 (TypeScript)

README

        


## ⭐ Stargazers

Many thanks to the kind individuals who leave a star.

Your support is much appreciated!

[![Stargazers for xlegex}](https://reporoster.com/stars/chenxch/xlegex)](https://github.com/chenxch/xlegex/stargazers)

# 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)