--- theme: fancy --- “我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，[点击查看活动详情](https://s.juejin.cn/ds/jooSN7t "https://s.juejin.cn/ds/jooSN7t")” Hello,我是[Xc](https://github.com/chenxch),一位因[antfu](https://github.com/antfu)结缘开源的前端菜鸟,今天和大家分享最近用vue3+ts+vite3做的一个小游戏项目[【兔了个兔】](https://github.com/chenxch/xlegex)。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/45783ec16d56487291d389ebe3a10ed1~tplv-k3u1fbpfcp-watermark.image?) [在线demo](https://chenxch.github.io/xlegex/) # 一、为什么做这样一个项目 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5412ff8306994204a877121b754ada8b~tplv-k3u1fbpfcp-watermark.image?) 哦咯雷丽丽雷丽丽~~ 这个画面和魔性的背景音乐大家应该都不陌生吧，席卷多少人的朋友圈和深夜。由于一直在临近通关的边缘折戟$\color{darkgray}{(菜是原罪)}$，所以就索性自己做一个玩。 # 二、如何做一个这样的游戏作为一个IT社畜，做了以下的事情： ## 1.需求分析（仅分析功能）【羊了个羊】作为一个三消类型的游戏，其玩法就是就是选中三个相同的既可以销毁，将界面上的卡牌都销毁完成即通关，该游戏卡牌是一层层叠加上去，且存在遮盖关系（即卡牌上方有其他卡牌时不可点击）。 ## 2.技术分析（前端角度） ### 2.1 游戏引擎方案由于有过`Phaser`的一点开发经历，就想说通过这个H5游戏引擎去处理这些遮盖的判断，快速实现(可以偷懒)，查了半天英文文档和尝试写了demo都未实现，放弃该方案。 ### 2.2 js+css方案从css角度来看遮盖，那不就是`绝对定位`+`zIndex`的事情嘛~~ ## 3.方案落实 ### 3.1 层级 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5c2bc3384b3f4859aaabd8af1be0ceab~tplv-k3u1fbpfcp-watermark.image?) 先看这种游戏的卡牌布局图，会发现上一层相对一层是类型这样的一个布局 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/57a5d0cf39bf42c98bd273fdc02ef58f~tplv-k3u1fbpfcp-watermark.image?) 关于层级和数量问题可以通过`层级的平方去设置每个层级元素数量`，当然每个层级并不是铺满的，所以这个数量只能是`层级最大元素数量` ### 3.2 位置 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/da1c228fd0a2405ca7a069e2b52372c5~tplv-k3u1fbpfcp-watermark.image?) 层级的数量设定好了，在看下位置要怎么处理？从上图加上坐标轴后来看，卡牌宽度2，第一层第一张卡牌中心坐标（0,0），第二层第一张卡牌坐标（1,1），会有以下发现：按照层的角度,中心坐标不变的情况下，每一层相对上一层的上下左右都外扩了50%卡牌的宽高。按照卡牌的角度，第二层第一个卡牌是基于第一层的第一张卡牌进行的左上各50%卡牌宽高的偏移。 ### 3.3 遮罩关系元素的层级和位置确认后，那遮罩关系要怎么判断？既然有了层级和位置，可以通过每个卡牌的左上角的坐标进行判断，如下图，基于第一层的一张卡牌的左上角为中心建立一个2倍长宽的遮罩区（其实也可以不用2倍），只要第二层卡牌的左上角XY轴坐标和遮罩区中心XY分布相减且绝对值都小于长宽的值，那即存在遮罩关系。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a4394b8d53fd43d5bf574e4eb7e05d9f~tplv-k3u1fbpfcp-watermark.image?) ## 4.技术选型话不多说，就是vue了~ ```json // package.json { "dependencies": { "canvas-confetti": "^1.5.1", "lodash-es": "^4.17.21", "vue": "^3.2.37" }, "devDependencies": { "@antfu/eslint-config": "^0.26.3", "@iconify-json/carbon": "^1.1.8", "@types/canvas-confetti": "^1.4.3", "@types/lodash-es": "^4.17.6", "@types/node": "^18.7.18", "@vitejs/plugin-vue": "^3.1.0", "eslint": "^8.23.1", "typescript": "^4.6.4", "unocss": "^0.45.21", "vite": "^3.1.0", "vue-tsc": "^0.40.4" } } ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8378cf2fef6942f7b10db6d8a11e7bd2~tplv-k3u1fbpfcp-watermark.image?) ## 5.功能开发 ### 5.1 type定义首先定义卡牌的数据类型，一个清晰的数据结构，在开发上可以事半功倍。 ```ts // 卡片节点类型 type CardNode = { id: string // 节点id zIndex-index type: number // 类型 zIndex: number // 图层 index: number // 所在图层中的索引 parents: CardNode[] // 父节点 row: number // 行 column: number // 列 top: number left: number state: number // 是否可点击 0：无状态 1：可点击 2：已选 3：已消除 } ``` ### 5.2 核心代码实现生成cardNodes流程图 ```mermaid graph TD 生成卡牌池 --> 打乱卡牌; 打乱卡牌 --> 卡牌分层; 卡牌分层 --> 建立遮罩关系; ``` 代码如下： ```ts // useGame.ts // 生成节点池 const itemTypes = (new Array(cardNum).fill(0)).map((_, index) => index + 1) let itemList: number[] = [] const selectedNodes = ref([]) for (let i = 0; i < 3 * layerNum; i++) itemList = [...itemList, ...itemTypes] // 打乱节点 itemList = shuffle(shuffle(itemList)) // 初始化各个层级节点 let len = 0 let floorIndex = 1 const floorList: number[][] = [] const itemLength = itemList.length while (len <= itemLength) { const maxFloorNum = floorIndex * floorIndex const floorNum = ceil(random(maxFloorNum / 2, maxFloorNum)) floorList.push(itemList.splice(0, floorNum)) len += floorNum floorIndex++ } const containerWidth = container.value!.clientWidth const containerHeight = container.value!.clientHeight const width = containerWidth / 2 const height = containerHeight / 2 - 60 // 建立遮罩关系 floorList.forEach((o, index) => { indexSet.clear() let i = 0 const floorNodes: CardNode[] = [] o.forEach((k) => { i = floor(random(0, (index + 1) ** 2)) while (indexSet.has(i)) i = floor(random(0, (index + 1) ** 2)) const row = floor(i / (index + 1)) const column = index ? i % index : 0 const node: CardNode = { id: `${index}-${i}`, type: k, zIndex: index, index: i, row, column, top: height + (size * row - (size / 2) * index), left: width + (size * column - (size / 2) * index), parents: [], state: 0, } const xy = [node.top, node.left] perFloorNodes.forEach((e) => { if (Math.abs(e.top - xy[0]) <= size && Math.abs(e.left - xy[1]) <= size) e.parents.push(node) }) floorNodes.push(node) indexSet.add(i) }) nodes.value = nodes.value.concat(floorNodes) perFloorNodes = floorNodes }) ``` ![86d11ffb1bbacdbbed28df22dfcade7.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3c146b9b2cbc48fda5cfc6bb9da5977a~tplv-k3u1fbpfcp-watermark.image?) 这时候核心功能卡牌的生成和关系绑定已经完成，剩下事件的处理和卡牌组件的封装。 ### 5.3 卡牌组件封装这里我比较喜欢先把UI搞定，所以选择先处理卡牌组件的封装了组件封装先从其所拥有的功能进行分析如下： 1. 根据卡牌的top和left以及type在正确的位置渲染出对应的卡牌 2. 内部能判断是否可点击，不可点击添加遮罩 3. 支持限制是否使用绝对定位（提供给选中卡槽时候使用） 4. 点击事件反馈实现如下： [代码片段](https://code.juejin.cn/pen/7147228330641752100) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b9b74d53ed5f496d9f36416233a0836f~tplv-k3u1fbpfcp-watermark.image?) 因为没有require赶时间就先这么写了，现在看这段代码着实太丑了，马上优化 [代码片段](https://code.juejin.cn/pen/7147227974054445070) 第一步，定义props，其实我们入参也就卡牌节点和是否限制使用绝对定位 ```ts interface Props { node: CardNode isDock?: boolean } ``` 第二步，定义emits，作为点击事件的反馈 ```ts const emit = defineEmits(['clickCard']) ``` 第三步，通过计算属性判断卡牌是否可点击（冻结状态） ```ts const isFreeze = computed(() => { return props.node.parents.length > 0 ? props.node.parents.some(o => o.state < 2) : false }, ) ``` 第四步，html处理 ```html ``` 看下效果： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4dd24f0b521e4f3f84300d43329cd15b~tplv-k3u1fbpfcp-watermark.image?) ### 5.4 事件处理首先先整理有哪些事件： 1. 点击卡牌事件 2. 消除事件 3. 胜利事件 4. 失败事件其中2 3 4的触发前提都是在1的基础上，所以实现如下 ```ts // useGame.ts function handleSelect(node: CardNode) { if (selectedNodes.value.length === 7) return node.state = 2 histroyList.value.push(node) preNode.value = node const index = nodes.value.findIndex(o => o.id === node.id) if (index > -1) { delNode && nodes.value.splice(index, 1) // 判断是否已经清空卡牌，即是否胜利 if (delNode ? nodes.value.length === 0 : nodes.value.every(o => o.state > 0)) { removeFlag.value = true backFlag.value = true events.winCallback && events.winCallback() } } // 判断是否有可以消除的节点 if (selectedNodes.value.filter(s => s.type === node.type).length === 2) { selectedNodes.value.push(node) // 为了动画效果添加延迟 setTimeout(() => { for (let i = 0; i < 3; i++) { const index = selectedNodes.value.findIndex(o => o.type === node.type) selectedNodes.value.splice(index, 1) } preNode.value = null events.dropCallback && events.dropCallback() }, 100) } else { const index = selectedNodes.value.findIndex(o => o.type === node.type) if (index > -1) selectedNodes.value.splice(index, 0, node) else selectedNodes.value.push(node) events.clickCallback && events.clickCallback() // 判断卡槽是否已满，即失败 if (selectedNodes.value.length === 7) { removeFlag.value = true backFlag.value = true events.loseCallback && events.loseCallback() } } } ``` #### 这里为什么是callback？从项目的设计上，核心代码只负责处理逻辑功能，事件的后续功能通过callback给使用者自行定义。 ### 5.5 道具功能实现【羊了个羊】有四个功能（移除前三个卡牌，回退，洗牌，复活且移出前三个）先实现`移除前三个卡牌`和`回退`两个功能吧实现以上三个功能需要添加一下变量 ```ts // useGame.ts const histroyList = ref([]) // 历史记录 const backFlag = ref(false) // 因为功能只能使用一次，做了flag限制 const removeFlag = ref(false) // 同上 const removeList = ref([]) // 存放移出的卡牌节点 const preNode = ref(null) // 存放回退节点 ``` 回退功能： ```ts // useGame.ts function handleBack() { const node = preNode.value // 当node存在时回退功能才能触发，因为在触发消除或者其他道具功能的时候，是无法触发回退的 if (!node) return preNode.value = null backFlag.value = true node.state = 0 delNode && nodes.value.push(node) const index = selectedNodes.value.findIndex(o => o.id === node.id) selectedNodes.value.splice(index, 1) } ``` 移出功能： ```ts function handleRemove() { // 从selectedNodes.value中取出3个到 removeList.value中 if (selectedNodes.value.length < 3) return removeFlag.value = true preNode.value = null for (let i = 0; i < 3; i++) { const node = selectedNodes.value.shift() if (!node) return removeList.value.push(node) } } ``` ### 5.6 效果处理 #### 5.6.1 添加通过效果想起了antfu直播扫雷时候的通过动画库[canvas-confetti](https://github.com/catdad/canvas-confetti)，最终实现效果如下 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eeda275bf4cd4edfbebb3c5421ff3fdf~tplv-k3u1fbpfcp-watermark.image?) #### 5.6.2 添加音效 ```ts const clickAudioRef = ref() const dropAudioRef = ref() const winAudioRef = ref() const loseAudioRef = ref() function handleClickCard() { if (clickAudioRef.value?.paused) { clickAudioRef.value.play() } else if (clickAudioRef.value) { clickAudioRef.value.load() clickAudioRef.value.play() } } function handleDropCard() { dropAudioRef.value?.play() } function handleWin() { winAudioRef.value?.play() isWin.value = true fireworks() } function handleLose() { loseAudioRef.value?.play() setTimeout(() => { alert('槽位已满，再接再厉~') window.location.reload() }, 500) } ``` ```html