- 博客(64)
- 收藏
- 关注
RSS订阅原创 原生SSE实现AI智能问答+Vue3前端打字机流效果
3.在SSE的onmessage里监听返回的数据流，并拼接到前端对话框中，我这里接的是deepseek，所以返回的数据流里会有推理信息，不过后端可以控制不返回推理信息，只返回结果。4.可以加一些细节处理，提升用户体验，比如：保存最近十条的聊天记录（这里存到了localStorage里），允许用户主动停止正在生成的内容，每次读取流时页面需要滚动到底部等。2.用户输入问题，点击提问按钮，创建一个SSE实例请求后端数据，由于SSE是单向流，所以每提一个问题都需要先把之前的实例关掉，然后重新new个SSE实例。
2025-04-09 16:41:05
214
原创 vue3自定义动态锚点列表，实现本页面锚点跳转效果
需求：当前页面存在多个模块且内容很长时，需要提供一个锚点列表，可以快速查看对应模块内容。1.每个模块添加唯一id，添加锚点列表div。2.初始化锚点列表，监听滚动事件。
2025-03-27 17:10:00
156
原创 解决antd3.xAutoComplete组件在页面滚动时面板内下拉列表未跟随滚动的问题（实测有效）
getPopupContainer属性在对应的AutoComplete文档中未直接体现，但确实可以用。
2025-03-13 15:37:58
136
原创 js 根据color两个端点颜色，生成渐变色区间
在JavaScript中，生成两个颜色之间的渐变色区间，它接受两个颜色值（可以是十六进制、RGB或RGBA格式）和一个步长（即渐变色的数量），然后返回一个包含渐变色的数组。这个方法适用在在绘制地图渐变等操作，比如根据颜色展示地图不同省份的热度，重点是不需要你设置每一个颜色的色值，只要设置初始和结束的颜色即可。// 生成10个渐变色。
2024-12-26 11:18:51
374
原创 cocoscreater3.8.4生成图集并使用
2.将图片拖动进来，即可自动生成精灵表，这里输出选用cocos2d-x，打包用免费版的“基本”就行，高级模式是收费的，然后点击“发布精灵表”，4.将plist和png一起放到resources目录下，注意两者要放在一起，然后用resources.load加载即可。5.控制台里打印的就是图集里各个精灵图的spriteFrame，然后根据自己需求使用即可。3.会导出两个文件，一个plist配置文件，一个png图集文件。1.安装texturepacker，去官网下载。
2024-11-24 09:37:14
756
原创 cocoscreater3.8.4 调用微信api
注：在cocoscreater中预览是看不到效果的，需要打包成微信小游戏，然后用微信开发者工具运行才能看到效果。2.然后在ts文件中使用wx变量就不报红线了，建议trycatch包裹下，否则可能会在控制台上报错。1.在项目目录下（与assets目录同级）安装miniprogram-api-typings。
2024-11-18 16:46:01
523
原创 g6图表监听图表容器的父元素尺寸变化
通过new ResizeObserver方法可以监听到父元素尺寸变化，resize能监听到手动拖曳导致的浏览器窗口变化，可以都加上。
2024-11-07 18:10:51
143
原创 npm i忽略依赖冲突
2.使用--legacy-peer-deps参数：这个参数用于处理peer依赖冲突。在某些情况下，npm会因为peer依赖版本不匹配而报错，使用这个参数可以忽略这些错误。1.使用--force或-f参数：这个参数会强制npm忽略某些错误，包括依赖冲突，但并不推荐这样做，因为它可能会导致依赖问题，使得项目不稳定。在使用npm安装依赖时，如果遇到依赖冲突，通常npm会提示错误并阻止安装。
2024-11-07 18:05:21
953
原创 记录cocoscreater3.8.x设置2d卡牌圆角
引擎版本：Cocos Creater3.8.3版本。2.在Card节点上绑定CardController.ts脚本。在CardController.ts编写圆角脚本，其实就是动态绘制Graphics组件。1.在Card节点上添加Mask组件，类型选择。
2024-10-02 09:14:45
428
原创 小程序获取自定义tabbar高度踩坑
在小程序中使用自定义tabbar后，页面page高度会包含自定义tabbar高度，为了方便页面布局，可以获取tabbar高度后，用calc(100% - {{tabbarHeight}})来计算。3.custom-tab-bar/index.ts，定义获取高度方法。
2024-08-31 11:15:50
2438
2
原创 小程序自定义tabbar
1.修改app.json，在json中加入如下代码，注意这里的样式和list并不会用到，但是需要存在，而下面的usingComponents里引入的custom-tab-bar则是自定义的tabbar。2.在components目录下自定义custom-tab-bar，文件夹名称必须叫这个custom-tab-bar，这里我用的tdesign组件。3.在需要的页面里引入custom-tab-bar组件，注意每个页面都需要引入。我的：pages/my/my.wxml。
2024-08-16 11:37:52
527
原创 vue3+threejs新手从零开发卡牌游戏（二十五）：尾声（附完整源码下载地址）
这个demo到这里就算接近尾声了，大体的游戏框架就算搭建完成了，主要是提供了一下思路，代码也是来来回回修改了好几次，也踩了一些坑，后续可以自行优化一些战斗效果和交互逻辑、UI美化等，这里附上源码下载链接，感谢大佬们指正！https://download.youkuaiyun.com/download/lfYexun/89059194
2024-03-31 14:39:48
477
原创 vue3+threejs新手从零开发卡牌游戏（二十四）：添加p2战斗逻辑
其实到这里基本已经实现了和电脑简单对战的游玩，基本的游戏架构初步完成，剩下的就是往这个框里添加各种卡牌逻辑，比如基础的加攻减攻，恢复血量等等，以及优化一些战斗效果和交互逻辑等。：p1场上卡牌已经全部被破坏，而此时p2场上还有卡牌未行动，那么此时卡牌可以直接攻击p1玩家。，进行下一个循环，当p2场上所以卡牌攻击次数均为0时，认为战斗阶段结束，可以进行下一个回合。：p2战斗阶段时，p1场上怪兽区没有卡牌时，全员即可轮询直接攻击p1玩家。：p2场上卡牌由大到小进行排序，按序轮询可以攻击的卡牌，然后攻击。
2024-03-31 08:58:42
780
原创 vue3+threejs新手从零开发卡牌游戏（二十三）：优化己方游戏流程代码逻辑
3.卡牌添加资源值（Mana），每回合双方玩家最多只能使用6点能量值，用于召唤怪兽上场或使用物品。2.卡牌添加攻击次数，默认每回合只能攻击1次。1.添加先手第一回合不能攻击的逻辑。
2024-03-30 18:45:18
522
2
原创 vue3+threejs新手从零开发卡牌游戏（二十二）：添加己方游戏流程（先后手、抽牌、主要阶段、战斗阶段、结束阶段）
【代码】vue3+threejs新手从零开发卡牌游戏（二十二）：添加己方游戏流程（先后手、抽牌、主要阶段、战斗阶段、结束阶段）
2024-03-30 10:25:30
544
原创 vue3+threejs新手从零开发卡牌游戏（二十一）：添加战斗与生命值关联逻辑
1.卡牌战斗后的攻击力差值导致的血量削减。2.卡牌直接攻击玩家导致的血量削减。
2024-03-29 16:40:28
441
原创 vue3+threejs新手从零开发卡牌游戏（二十）：添加卡牌被破坏进入墓地逻辑
【代码】vue3+threejs新手从零开发卡牌游戏（二十）：添加卡牌被破坏进入墓地逻辑。
2024-03-29 14:03:36
625
原创 vue3+threejs新手从零开发卡牌游戏（十九）：添加战斗事件
1.卡牌移动到对方卡牌的位置进行碰撞，然后退回到原位置。2.两张卡牌比较大小，攻击力高的存活，攻击力低的被破坏。
2024-03-28 16:17:34
759
原创 vue3+threejs新手从零开发卡牌游戏（十八）：己方场上手牌添加画线
手牌上场后，点击己方怪兽区卡牌会跟随鼠标移动画出线条，之后可以通过判断鼠标移动到对方场地的某卡牌进行战斗操作，代码主要改动在game/index.vue文件。
2024-03-27 18:31:24
647
1
原创 vue3+threejs新手从零开发卡牌游戏（十七）：模拟对方手牌上场
【代码】vue3+threejs新手从零开发卡牌游戏（十七）：模拟对方手牌上场。
2024-03-27 14:19:16
488
原创 vue3+threejs新手从零开发卡牌游戏（十六）：初始化对方手牌
【代码】vue3+threejs新手从零开发卡牌游戏（十六）：初始化对方手牌。
2024-03-26 17:25:45
305
原创 vue3+threejs新手从零开发卡牌游戏（十五）：创建对方场地和对方卡组
【代码】vue3+threejs新手从零开发卡牌游戏（十五）：创建对方场地和对方卡组。
2024-03-26 16:39:34
332
原创 vue3+threejs新手从零开发卡牌游戏（十四）：调整卡组位置，添加玩家生命值HP和法力值Mana信息
【代码】vue3+threejs新手从零开发卡牌游戏（十四）：调整卡组位置，添加玩家生命值HP和法力值Mana信息。
2024-03-26 11:37:11
382
原创 vue3+threejs新手从零开发卡牌游戏（十三）：上场手牌添加攻击力文字
【代码】vue3+threejs新手从零开发卡牌游戏（十三）：上场手牌添加攻击力文字。
2024-03-26 10:40:07
569
原创 vue3+threejs新手从零开发卡牌游戏（十二）：优化手牌上场逻辑
1.dialog添加取消事件，点击取消时，卡牌回到原手牌区位置。3.卡牌上场时，按213顺序放置，即中央、左侧、右侧顺序放置。2.卡牌拖放位置不在己方战域内时，卡牌回到原手牌区位置。4.卡牌上场时，重新计算手牌的叠放位置。
2024-03-24 10:39:51
423
原创 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
398
原创 vue3+threejs新手从零开发卡牌游戏（十）：创建己方战域
这里计算出了平面的长和宽，将长宽数据存放进site的userData中，这个长和宽可以用来帮助我们后续绘制格子的时候做位置计算。这里我为每个格子添加了name，方便后续卡牌上场，进墓等操作逻辑。
2024-03-22 14:48:42
615
原创 vue3+threejs新手从零开发卡牌游戏（九）：添加抽卡逻辑和动效
1.点击卡组，将卡组平移到页面中心位置（0, 0, 0）（y轴可以适当调高一点，这里点击事件只是为了测试抽卡，之后可以删掉）2.然后卡组上展示“点击抽卡”的文字（文字用的是div+css的形式），所以我们在onMousedown方法中添加了。至此基本完成了抽卡逻辑和简单动效的开发。进行判断是否点击到了canvas上。4.抽卡结束后，卡组移回到原位。3.点击抽卡，执行抽卡动画。
2024-03-22 10:59:44
1366
原创 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
1025
原创 vue3+threejs新手从零开发卡牌游戏（七）：创建卡组
我们使用一个测试卡组来生成卡组里的卡牌，由于卡组是多张卡牌摞在一起，所以我们需要调整每张卡牌的位置高度，同时由于卡牌是盖放，所以我们通过rotateX进行180度翻转
2024-03-20 14:12:23
519
原创 vue3+threejs新手从零开发卡牌游戏（六）：手牌区卡牌添加叠放逻辑和拖曳事件
当手牌过多时，我们可以考虑将卡牌进行叠放，这样就不会超出之前设计好的手牌区长度了。2.根据宽度和卡牌数量实时计算叠放位置。至此我们基本完成了手牌区的开发。1.获取手牌区的长度。
2024-03-19 16:49:39
656
原创 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
534
原创 vue3+threejs新手从零开发卡牌游戏（四）：优化卡牌生成逻辑及卡牌数据管理
可以从右侧打印的mesh中看到，卡牌的数据已经绑定到userData上了，将CARD_DICT[0]改为CARD_DICT[1]，则展示另一张卡牌。接下来我们需要优化卡牌的生成逻辑，我们可以封装一个公共的card类，将每张不同的卡牌new出来。属性，也就是说mesh网格中其实已经默认添加了数据存放的属性，我们直接把数据放在这里即可。上节我们成功在场景中创建了一张卡牌，现在我们思考一个问题，2.我们在index.vue中引入新创建的卡牌类和卡牌数据。3.修改renderCard方法。
2024-03-18 17:26:33
618
原创 vue3+threejs新手从零开发卡牌游戏（三）：尝试在场景中绘制一张卡牌
由于我们使用的是Box几何体，他本身有6个面，所以我们可以通过分别设置六个面的材质来渲染不同的图案（一张卡牌有正面和背面，有名称、属性、种族、攻击力等数据，我们先尝试在场景中绘制一张卡牌出来。为了简单我直接去游戏王决斗链接官网上面找的卡牌素材，然后百度图片游戏王卡背，拿到卡背的素材（注：3和4两个面对应的是我们卡牌的正面和背面，其他几个面可以随便设置个颜色即可。back目录下存放的是卡背图片，card目录下存放的是卡牌的正面。至此，我们成功在场景中绘制了一张卡牌。几何体，方便处理正面和背面不同的素材。
2024-03-18 15:52:31
484
原创 vue3+threejs新手从零开发卡牌游戏（二）：初始化场景
一、添加一个div作为threejs的画布对象，之后整个的主要游戏开发内容全在这一个div中（实际threejs会渲染成canvas），并调整样式铺满整个屏幕（注：这个练手的卡牌项目是打算做成移动端的）在删掉初始化中一些没用的代码后，在views目录下新建game文件夹，在里面新建一个index.vue，这里就当成游戏的主入口。二、引入threejs变量，之前在main.js中挂载的全局变量可以通过vue中的。由于引入了轨道控制器，所以按住鼠标拖动可以进行旋转，至此成功创建了场景。
2024-03-18 13:56:52
553
vue3+threejs开发TCG卡牌游戏demo
2024-03-31
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人