An elimination game that drawed by Canvas and implemented using TypeScript.
The game play design and some of the resources are from Gardenscapes.
English | 简体中文
https://vermouth1995.github.io/MatchThreeGame/
- 🎀 Beautiful page, smooth game experience.
- 🌼 Written in TypeScript with predictable static types.
- 🏅 Multiple rendering methods support capability.
- ⚙️ Compile with gulp, full link development.
- 🏆 Powerful level customization in every detail.
- 🤳 Support for mobile terminal.
- run
npm i
- run
npm run build
- open html file(
/dist/index.html
) in browser
- run
npm run format
concept -- Basic tools (tool concept class content)
concept
├─ coordinate -- Coordinate and coordinate operation
├─ event -- Record movement events
├─ coordinate_adaptor -- Coordinate adaptor
├─ coordinate_dynamic -- Dynamic coordinate
├─ coordinate_value -- Common coordinate
├─ coordinate -- Coordinate interface
└─ locus -- Record the moving state and coordinate track
├─ linked_list -- Linked list
├─ listener -- Listening tools to manage listening events
├─ once -- Manages the invocation of a series of callback functions
├─ style -- Style classes, such as colors, fonts, and so on
└─ random_weight -- Random access with weights
engine -- Game engine (core elements and concepts in game)
engine
├─ birth -- The generation of eliminable elements
├─ board -- Game board
├─ cell -- Game cell
├─ goal -- Game goal
├─ item -- Eliminated elements
├─ sacrifice -- Rule of elimination
├─ puzzle_keeper -- The object that holds the real rendering block
└─ score -- Game steps/Score management
game -- Game logic (including score calculation, relationship between levels, etc.)
game
├─ game -- Instance of game logic
├─ level_creator -- Level generator
├─ level_data -- Level data interface
├─ level -- Level implementation
└─ message -- Message
level -- Level (level content setting)
level
├─ 1 -- Level 1
├─ 2 -- Level 2
├─ 3 -- Level 3
└─ ... -- Level ...
main -- Project entrance
main
├─ resource -- Game resources
└─ index -- Entrance
platform -- Rendering platform
platform
├─ canvas -- canvas
└─ webgl -- webgl
render -- Image rendering
render
├─ atom -- Minimum render unit
├─ puzzle -- Real rendering block
├─ render_adapter -- Render adapter
├─ render_locus -- Trace nodes of the rendering tree
├─ render_position -- Nodes of the rendering tree
└─ render -- Render interface
- Rerender when window onResize
- onTouch realization
- Level selection
- Style optimization
- Automatic prompt
- Bomb appearance weight can be set
- Level of dwarf
MIT © Vermouth1995