清岚_lxn-CSDN博客

原创 vue3+threejs新手从零开发卡牌游戏（二十五）：尾声（附完整源码下载地址）

这个demo到这里就算接近尾声了，大体的游戏框架就算搭建完成了，主要是提供了一下思路，代码也是来来回回修改了好几次，也踩了一些坑，后续可以自行优化一些战斗效果和交互逻辑、UI美化等，这里附上源码下载链接，感谢大佬们指正！https://download.csdn.net/download/lfYexun/89059194

2024-03-31 14:39:48 275

原创 vue3+threejs新手从零开发卡牌游戏（二十四）：添加p2战斗逻辑

其实到这里基本已经实现了和电脑简单对战的游玩，基本的游戏架构初步完成，剩下的就是往这个框里添加各种卡牌逻辑，比如基础的加攻减攻，恢复血量等等，以及优化一些战斗效果和交互逻辑等。：p1场上卡牌已经全部被破坏，而此时p2场上还有卡牌未行动，那么此时卡牌可以直接攻击p1玩家。，进行下一个循环，当p2场上所以卡牌攻击次数均为0时，认为战斗阶段结束，可以进行下一个回合。：p2战斗阶段时，p1场上怪兽区没有卡牌时，全员即可轮询直接攻击p1玩家。：p2场上卡牌由大到小进行排序，按序轮询可以攻击的卡牌，然后攻击。

2024-03-31 08:58:42 601

原创 vue3+threejs新手从零开发卡牌游戏（二十三）：优化己方游戏流程代码逻辑

3.卡牌添加资源值（Mana），每回合双方玩家最多只能使用6点能量值，用于召唤怪兽上场或使用物品。2.卡牌添加攻击次数，默认每回合只能攻击1次。1.添加先手第一回合不能攻击的逻辑。

2024-03-30 18:45:18 373

原创 vue3+threejs新手从零开发卡牌游戏（二十二）：添加己方游戏流程（先后手、抽牌、主要阶段、战斗阶段、结束阶段）

【代码】vue3+threejs新手从零开发卡牌游戏（二十二）：添加己方游戏流程（先后手、抽牌、主要阶段、战斗阶段、结束阶段）

2024-03-30 10:25:30 369

原创 vue3+threejs新手从零开发卡牌游戏（二十一）：添加战斗与生命值关联逻辑

1.卡牌战斗后的攻击力差值导致的血量削减。2.卡牌直接攻击玩家导致的血量削减。

2024-03-29 16:40:28 342

原创 vue3+threejs新手从零开发卡牌游戏（二十）：添加卡牌被破坏进入墓地逻辑

【代码】vue3+threejs新手从零开发卡牌游戏（二十）：添加卡牌被破坏进入墓地逻辑。

2024-03-29 14:03:36 523

原创 vue3+threejs新手从零开发卡牌游戏（十九）：添加战斗事件

1.卡牌移动到对方卡牌的位置进行碰撞，然后退回到原位置。2.两张卡牌比较大小，攻击力高的存活，攻击力低的被破坏。

2024-03-28 16:17:34 631

原创 vue3+threejs新手从零开发卡牌游戏（十八）：己方场上手牌添加画线

手牌上场后，点击己方怪兽区卡牌会跟随鼠标移动画出线条，之后可以通过判断鼠标移动到对方场地的某卡牌进行战斗操作，代码主要改动在game/index.vue文件。

2024-03-27 18:31:24 517 1

原创 vue3+threejs新手从零开发卡牌游戏（十七）：模拟对方手牌上场

【代码】vue3+threejs新手从零开发卡牌游戏（十七）：模拟对方手牌上场。

2024-03-27 14:19:16 368

原创 vue3+threejs新手从零开发卡牌游戏（十六）：初始化对方手牌

【代码】vue3+threejs新手从零开发卡牌游戏（十六）：初始化对方手牌。

2024-03-26 17:25:45 206

原创 vue3+threejs新手从零开发卡牌游戏（十五）：创建对方场地和对方卡组

【代码】vue3+threejs新手从零开发卡牌游戏（十五）：创建对方场地和对方卡组。

2024-03-26 16:39:34 262

原创 vue3+threejs新手从零开发卡牌游戏（十四）：调整卡组位置，添加玩家生命值HP和法力值Mana信息

【代码】vue3+threejs新手从零开发卡牌游戏（十四）：调整卡组位置，添加玩家生命值HP和法力值Mana信息。

2024-03-26 11:37:11 306

原创 vue3+threejs新手从零开发卡牌游戏（十三）：上场手牌添加攻击力文字

【代码】vue3+threejs新手从零开发卡牌游戏（十三）：上场手牌添加攻击力文字。

2024-03-26 10:40:07 479

原创 vue3+threejs新手从零开发卡牌游戏（十二）：优化手牌上场逻辑

1.dialog添加取消事件，点击取消时，卡牌回到原手牌区位置。3.卡牌上场时，按213顺序放置，即中央、左侧、右侧顺序放置。2.卡牌拖放位置不在己方战域内时，卡牌回到原手牌区位置。4.卡牌上场时，重新计算手牌的叠放位置。

2024-03-24 10:39:51 291

原创 vue3+threejs新手从零开发卡牌游戏（十一）：添加简单的手牌上场逻辑

3.执行上场操作时，clone要上场的手牌，然后先把卡牌从手牌区移除，然后将clone的卡牌加入scene场景中，同时将卡牌移动到对应的战域位置。1.首先把之前game/hand/p1.vue中的DragControls移到game/index.vue中。2.在components文件夹下新建Dialog.vue，作为弹出操作层。

2024-03-23 15:28:15 291

原创 vue3+threejs新手从零开发卡牌游戏（十）：创建己方战域

这里计算出了平面的长和宽，将长宽数据存放进site的userData中，这个长和宽可以用来帮助我们后续绘制格子的时候做位置计算。这里我为每个格子添加了name，方便后续卡牌上场，进墓等操作逻辑。

2024-03-22 14:48:42 453

原创 vue3+threejs新手从零开发卡牌游戏（九）：添加抽卡逻辑和动效

1.点击卡组，将卡组平移到页面中心位置（0, 0, 0）（y轴可以适当调高一点，这里点击事件只是为了测试抽卡，之后可以删掉）2.然后卡组上展示“点击抽卡”的文字（文字用的是div+css的形式），所以我们在onMousedown方法中添加了。至此基本完成了抽卡逻辑和简单动效的开发。进行判断是否点击到了canvas上。4.抽卡结束后，卡组移回到原位。3.点击抽卡，执行抽卡动画。

2024-03-22 10:59:44 957

原创 vue3+threejs新手从零开发卡牌游戏（八）：关联卡组和手牌区、添加初始化卡组和初始化手牌逻辑

我们继续修改game/deck/p1.vue，这个方法是传入一个mesh对象，根据type判断是要往卡组里添加还是移除这个mesh，如果是移除的话，那么我们先找到卡组Group，然后删除卡组Group中的这个mesh，并进行更新；addHandCard方法的参数obj指的是从p1Deck中移除的那张卡牌对象，里面只包含card_id和name两个字段，origin指的是来源对象，比如如果是从卡组移入手牌，那么来源对象就是卡组，如果是从墓地移入手牌那么来源就是墓地，这个来源对象是方便。

2024-03-21 13:46:30 858

原创 vue3+threejs新手从零开发卡牌游戏（七）：创建卡组

我们使用一个测试卡组来生成卡组里的卡牌，由于卡组是多张卡牌摞在一起，所以我们需要调整每张卡牌的位置高度，同时由于卡牌是盖放，所以我们通过rotateX进行180度翻转

2024-03-20 14:12:23 327

原创 vue3+threejs新手从零开发卡牌游戏（六）：手牌区卡牌添加叠放逻辑和拖曳事件

当手牌过多时，我们可以考虑将卡牌进行叠放，这样就不会超出之前设计好的手牌区长度了。2.根据宽度和卡牌数量实时计算叠放位置。至此我们基本完成了手牌区的开发。1.获取手牌区的长度。

2024-03-19 16:49:39 534

原创 vue3+threejs新手从零开发卡牌游戏（五）：在scene场景中添加手牌区

首先在game目录下新建hand文件夹，里面的index.vue是入口文件，这里我设计的是将玩家1（刷新页面效果如下（之前在game/index.vue中测试用的renderCard方法可以。首先为了方便，我们修改camera相机的位置，将它从正上方往下看，x和z轴值设为0即可。1.先确定左下角的屏幕坐标（0, window.innerHeight）当然这个demo里的玩家2其实指的是电脑操控，而不是真的联网和别人对战。）手牌区分别建立，对应就是p1.vue和p2.vue，2.将屏幕坐标转换成世界坐标。

2024-03-19 14:58:42 366

原创 vue3+threejs新手从零开发卡牌游戏（四）：优化卡牌生成逻辑及卡牌数据管理

可以从右侧打印的mesh中看到，卡牌的数据已经绑定到userData上了，将CARD_DICT[0]改为CARD_DICT[1]，则展示另一张卡牌。接下来我们需要优化卡牌的生成逻辑，我们可以封装一个公共的card类，将每张不同的卡牌new出来。属性，也就是说mesh网格中其实已经默认添加了数据存放的属性，我们直接把数据放在这里即可。上节我们成功在场景中创建了一张卡牌，现在我们思考一个问题，2.我们在index.vue中引入新创建的卡牌类和卡牌数据。3.修改renderCard方法。

2024-03-18 17:26:33 427

原创 vue3+threejs新手从零开发卡牌游戏（三）：尝试在场景中绘制一张卡牌

由于我们使用的是Box几何体，他本身有6个面，所以我们可以通过分别设置六个面的材质来渲染不同的图案（一张卡牌有正面和背面，有名称、属性、种族、攻击力等数据，我们先尝试在场景中绘制一张卡牌出来。为了简单我直接去游戏王决斗链接官网上面找的卡牌素材，然后百度图片游戏王卡背，拿到卡背的素材（注：3和4两个面对应的是我们卡牌的正面和背面，其他几个面可以随便设置个颜色即可。back目录下存放的是卡背图片，card目录下存放的是卡牌的正面。至此，我们成功在场景中绘制了一张卡牌。几何体，方便处理正面和背面不同的素材。

2024-03-18 15:52:31 230

原创 vue3+threejs新手从零开发卡牌游戏（二）：初始化场景

一、添加一个div作为threejs的画布对象，之后整个的主要游戏开发内容全在这一个div中（实际threejs会渲染成canvas），并调整样式铺满整个屏幕（注：这个练手的卡牌项目是打算做成移动端的）在删掉初始化中一些没用的代码后，在views目录下新建game文件夹，在里面新建一个index.vue，这里就当成游戏的主入口。二、引入threejs变量，之前在main.js中挂载的全局变量可以通过vue中的。由于引入了轨道控制器，所以按住鼠标拖动可以进行旋转，至此成功创建了场景。

2024-03-18 13:56:52 362

原创 vue3+threejs新手从零开发卡牌游戏（一）：项目搭建

3.main.js相关代码，这里我将threejs中的几个必要的元素：scene（场景）、camera（相机）、renderer（渲染器）挂载到全局变量上，主要是为了方便在组件里引入，并未考虑效率相关方面的问题，实际情况看个人。1.pinia-plugin-persistedstate：对pinia做持久化管理。4.tween.js：用来协助做threejs里的动效。3.animate.css：可对前端h5标签做动效。2.安装threejs，并在main.js中引用。3.threejs：核心。

2024-03-18 10:45:34 295