![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
threejs
清岚_lxn
这个作者很懒,什么都没留下…
展开
-
vue3+threejs新手从零开发卡牌游戏(二十五):尾声(附完整源码下载地址)
这个demo到这里就算接近尾声了,大体的游戏框架就算搭建完成了,主要是提供了一下思路,代码也是来来回回修改了好几次,也踩了一些坑,后续可以自行优化一些战斗效果和交互逻辑、UI美化等,这里附上源码下载链接,感谢大佬们指正!https://download.csdn.net/download/lfYexun/89059194原创 2024-03-31 14:39:48 · 379 阅读 · 0 评论 -
vue3+threejs新手从零开发卡牌游戏(二十四):添加p2战斗逻辑
其实到这里基本已经实现了和电脑简单对战的游玩,基本的游戏架构初步完成,剩下的就是往这个框里添加各种卡牌逻辑,比如基础的加攻减攻,恢复血量等等,以及优化一些战斗效果和交互逻辑等。:p1场上卡牌已经全部被破坏,而此时p2场上还有卡牌未行动,那么此时卡牌可以直接攻击p1玩家。,进行下一个循环,当p2场上所以卡牌攻击次数均为0时,认为战斗阶段结束,可以进行下一个回合。:p2战斗阶段时,p1场上怪兽区没有卡牌时,全员即可轮询直接攻击p1玩家。:p2场上卡牌由大到小进行排序,按序轮询可以攻击的卡牌,然后攻击。原创 2024-03-31 08:58:42 · 695 阅读 · 0 评论 -
vue3+threejs新手从零开发卡牌游戏(二十三):优化己方游戏流程代码逻辑
3.卡牌添加资源值(Mana),每回合双方玩家最多只能使用6点能量值,用于召唤怪兽上场或使用物品。2.卡牌添加攻击次数,默认每回合只能攻击1次。1.添加先手第一回合不能攻击的逻辑。原创 2024-03-30 18:45:18 · 435 阅读 · 1 评论 -
vue3+threejs新手从零开发卡牌游戏(二十二):添加己方游戏流程(先后手、抽牌、主要阶段、战斗阶段、结束阶段)
【代码】vue3+threejs新手从零开发卡牌游戏(二十二):添加己方游戏流程(先后手、抽牌、主要阶段、战斗阶段、结束阶段)原创 2024-03-30 10:25:30 · 466 阅读 · 0 评论 -
vue3+threejs新手从零开发卡牌游戏(二十一):添加战斗与生命值关联逻辑
1.卡牌战斗后的攻击力差值导致的血量削减。2.卡牌直接攻击玩家导致的血量削减。原创 2024-03-29 16:40:28 · 374 阅读 · 0 评论 -
vue3+threejs新手从零开发卡牌游戏(二十):添加卡牌被破坏进入墓地逻辑
【代码】vue3+threejs新手从零开发卡牌游戏(二十):添加卡牌被破坏进入墓地逻辑。原创 2024-03-29 14:03:36 · 559 阅读 · 0 评论 -
vue3+threejs新手从零开发卡牌游戏(十九):添加战斗事件
1.卡牌移动到对方卡牌的位置进行碰撞,然后退回到原位置。2.两张卡牌比较大小,攻击力高的存活,攻击力低的被破坏。原创 2024-03-28 16:17:34 · 680 阅读 · 0 评论 -
vue3+threejs新手从零开发卡牌游戏(十八):己方场上手牌添加画线
手牌上场后,点击己方怪兽区卡牌会跟随鼠标移动画出线条,之后可以通过判断鼠标移动到对方场地的某卡牌进行战斗操作,代码主要改动在game/index.vue文件。原创 2024-03-27 18:31:24 · 566 阅读 · 1 评论 -
vue3+threejs新手从零开发卡牌游戏(十七):模拟对方手牌上场
【代码】vue3+threejs新手从零开发卡牌游戏(十七):模拟对方手牌上场。原创 2024-03-27 14:19:16 · 406 阅读 · 0 评论 -
vue3+threejs新手从零开发卡牌游戏(十六):初始化对方手牌
【代码】vue3+threejs新手从零开发卡牌游戏(十六):初始化对方手牌。原创 2024-03-26 17:25:45 · 234 阅读 · 0 评论 -
vue3+threejs新手从零开发卡牌游戏(十五):创建对方场地和对方卡组
【代码】vue3+threejs新手从零开发卡牌游戏(十五):创建对方场地和对方卡组。原创 2024-03-26 16:39:34 · 285 阅读 · 0 评论 -
vue3+threejs新手从零开发卡牌游戏(十四):调整卡组位置,添加玩家生命值HP和法力值Mana信息
【代码】vue3+threejs新手从零开发卡牌游戏(十四):调整卡组位置,添加玩家生命值HP和法力值Mana信息。原创 2024-03-26 11:37:11 · 327 阅读 · 0 评论 -
vue3+threejs新手从零开发卡牌游戏(十三):上场手牌添加攻击力文字
【代码】vue3+threejs新手从零开发卡牌游戏(十三):上场手牌添加攻击力文字。原创 2024-03-26 10:40:07 · 518 阅读 · 0 评论 -
vue3+threejs新手从零开发卡牌游戏(十二):优化手牌上场逻辑
1.dialog添加取消事件,点击取消时,卡牌回到原手牌区位置。3.卡牌上场时,按213顺序放置,即中央、左侧、右侧顺序放置。2.卡牌拖放位置不在己方战域内时,卡牌回到原手牌区位置。4.卡牌上场时,重新计算手牌的叠放位置。原创 2024-03-24 10:39:51 · 349 阅读 · 0 评论 -
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 · 345 阅读 · 0 评论 -
vue3+threejs新手从零开发卡牌游戏(十):创建己方战域
这里计算出了平面的长和宽,将长宽数据存放进site的userData中,这个长和宽可以用来帮助我们后续绘制格子的时候做位置计算。这里我为每个格子添加了name,方便后续卡牌上场,进墓等操作逻辑。原创 2024-03-22 14:48:42 · 530 阅读 · 0 评论 -
vue3+threejs新手从零开发卡牌游戏(九):添加抽卡逻辑和动效
1.点击卡组,将卡组平移到页面中心位置(0, 0, 0)(y轴可以适当调高一点,这里点击事件只是为了测试抽卡,之后可以删掉)2.然后卡组上展示“点击抽卡”的文字(文字用的是div+css的形式),所以我们在onMousedown方法中添加了。至此基本完成了抽卡逻辑和简单动效的开发。进行判断是否点击到了canvas上。4.抽卡结束后,卡组移回到原位。3.点击抽卡,执行抽卡动画。原创 2024-03-22 10:59:44 · 1155 阅读 · 0 评论 -
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 · 917 阅读 · 0 评论 -
vue3+threejs新手从零开发卡牌游戏(七):创建卡组
我们使用一个测试卡组来生成卡组里的卡牌,由于卡组是多张卡牌摞在一起,所以我们需要调整每张卡牌的位置高度,同时由于卡牌是盖放,所以我们通过rotateX进行180度翻转原创 2024-03-20 14:12:23 · 413 阅读 · 0 评论 -
vue3+threejs新手从零开发卡牌游戏(六):手牌区卡牌添加叠放逻辑和拖曳事件
当手牌过多时,我们可以考虑将卡牌进行叠放,这样就不会超出之前设计好的手牌区长度了。2.根据宽度和卡牌数量实时计算叠放位置。至此我们基本完成了手牌区的开发。1.获取手牌区的长度。原创 2024-03-19 16:49:39 · 591 阅读 · 0 评论 -
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 · 446 阅读 · 0 评论 -
vue3+threejs新手从零开发卡牌游戏(四):优化卡牌生成逻辑及卡牌数据管理
可以从右侧打印的mesh中看到,卡牌的数据已经绑定到userData上了,将CARD_DICT[0]改为CARD_DICT[1],则展示另一张卡牌。接下来我们需要优化卡牌的生成逻辑,我们可以封装一个公共的card类,将每张不同的卡牌new出来。属性,也就是说mesh网格中其实已经默认添加了数据存放的属性,我们直接把数据放在这里即可。上节我们成功在场景中创建了一张卡牌,现在我们思考一个问题,2.我们在index.vue中引入新创建的卡牌类和卡牌数据。3.修改renderCard方法。原创 2024-03-18 17:26:33 · 514 阅读 · 0 评论 -
vue3+threejs新手从零开发卡牌游戏(三):尝试在场景中绘制一张卡牌
由于我们使用的是Box几何体,他本身有6个面,所以我们可以通过分别设置六个面的材质来渲染不同的图案(一张卡牌有正面和背面,有名称、属性、种族、攻击力等数据,我们先尝试在场景中绘制一张卡牌出来。为了简单我直接去游戏王决斗链接官网上面找的卡牌素材,然后百度图片游戏王卡背,拿到卡背的素材(注:3和4两个面对应的是我们卡牌的正面和背面,其他几个面可以随便设置个颜色即可。back目录下存放的是卡背图片,card目录下存放的是卡牌的正面。至此,我们成功在场景中绘制了一张卡牌。几何体,方便处理正面和背面不同的素材。原创 2024-03-18 15:52:31 · 340 阅读 · 0 评论 -
vue3+threejs新手从零开发卡牌游戏(二):初始化场景
一、添加一个div作为threejs的画布对象,之后整个的主要游戏开发内容全在这一个div中(实际threejs会渲染成canvas),并调整样式铺满整个屏幕(注:这个练手的卡牌项目是打算做成移动端的)在删掉初始化中一些没用的代码后,在views目录下新建game文件夹,在里面新建一个index.vue,这里就当成游戏的主入口。二、引入threejs变量,之前在main.js中挂载的全局变量可以通过vue中的。由于引入了轨道控制器,所以按住鼠标拖动可以进行旋转,至此成功创建了场景。原创 2024-03-18 13:56:52 · 488 阅读 · 0 评论 -
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 · 487 阅读 · 0 评论