本项目是 是对vue3项目 https://github.com/liyupi/yulegeyu 的react搬运
最大的变化的是将vue3项目react化,其次是将核心逻辑拆分,更面向对象化,这样抽离的逻辑更适合搬运到与框架无关的其它项目,比如solid或svelte
- 棋盘(层叠区), 最上面的打乱了层级和位置的 block 摆放区
- 随机区,只有一张显示出来的棋子
- 插槽区,棋子点击后放置的位置
- 功能区,各种道具功能
- box: 格子,棋盘上的一个格子
- block: 一张图片就是一个块,一个块占 3*3的格子
- 撤回,撤销上一步骤
- 移出,将底部块移出棋盘 todo
- 洗牌,将棋盘中的棋子所在在层级和所在棋盘位置重新随机
- 破坏,从棋盘上随机删掉几个块
- 圣光,棋盘上的下一点击动作无视块所在的层级
- 透视,查看随机区的块
-
棋盘和块的坐标点关系,在一个2424的棋盘上,最左上角坐标为 (0,0) 最右下角坐标为 (23,23),但是一个块,比如途中的鸭子,它的坐标为(0,0),但是它占了33的格子, 所以块的最右下角坐标为(21,21)
- game.ts: 游戏的所有逻辑协调
- chessBoard.ts: 棋盘的逻辑,只关心棋盘的布局,以及块怎么落在棋盘上
- block-help.ts: 块的生成逻辑,只关心块的生成
- range.ts: 坐标点范围,限制块的坐标落点范围
- slotArea.ts: 插槽区,插槽区的逻辑,消除,撤回,以及游戏输赢的判断
npx shadcn-ui@latest init
✔ Would you like to use TypeScript (recommended)? … yes
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Slate
✔ Where is your global CSS file? … app/globals.css
✔ Would you like to use CSS variables for colors? … yes
✔ Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) …
✔ Where is your tailwind.config.js located? … tailwind.config.js
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Are you using React Server Components? … no
✔ Write configuration to components.json. Proceed? … yes
✔ Writing components.json...
✔ Initializing project...
✔ Installing dependencies...
Success! Project initialization completed. You may now add