原创JYeontu前端也能这么有趣2024-01-0300:00发表于广东
组件实现效果如下图：
图片包我们可以通过以下几种方式来获取：
会作图的同学可以自己画一套专属的图片包。
我们从动图或视频中截取关键帧，并将获取到的关键帧背景扣除，这样我们也可以得到一套自己喜欢的图片包。
其实网上也有很多的桌宠图片包资源，所以我们可以直接到网上搜索。
由于本人美术不行且想偷懒，所以果断地选择了第3种方式来获取到了可以使用的图片资源。
获取到一套图片包之后，一套图片包中可能包含多个动作行为，所以我们还需要对其进行分类，将不同行为的图片分类出来，为了方便我们后续代码的编写，我们可以先将图片根据动作的顺序进行编号命名。
如上图划分的4中行为动作，我们都按顺序对图片进行编号命名，那么我们后续引用的时候就可以根据序号来定义一个行为动作，如下图：
图片准备好并且处理好之后，我们便可以开始编写代码了。
我们需要完成一个配置表来将图片和行为关联起来，如下图：
我们需要对每个图包的每个动作进行一个简单的配置：
图片包的路径。
没有进行任何行为的时候的默认展示图片。
行为集合，每个集合的配置如下：
name：该行为的名称，后面会在行为菜单展示；
min：行为开始图片编号；
max：行为结束图片编号；
isMove：该行为是否要发生位移；
audio：触发该行为时的音频。
具体如下：
{"name":"run","min":1,"max":2,"isMove":true,"audio":"Pikachu.mp3"},2、组件参数配置name选择展示的图片包，目前已有图片包：皮卡丘,奇犽,白一护,橘一护,喵老师,蓝染,迪达拉,日向雏田。
触发可移动行为时每一次移动的距离，默认为20px。
桌宠的尺寸大小，默认为50px。
初始化时默认触发的行为，可从行为菜单中选择。
props:{name:{type:String,default:"皮卡丘",},step:{type:Number,default:20,},petSize:{type:String,default:"50px",},defaultAction:{type:String,default:"",},},3、配置数据初始化我们需要根据传入的name来选择相对应的配置，图片我们要通过require的方式来引入，不能直接使用相对路径字符串。
importconfigfrom"./config.json";initData(){this.webPetConfig=config[this.name];this.actionList=this.webPetConfig.actionList;this.imgRootPath=this.webPetConfig.imgRootPath;this.imgSrc=require("@/assets/img/"+this.webPetConfig.defaultImg);this.uid="j-web-pet-"+getUId();constlist=this.actionList.map((item)=>{returnitem.name;})||[];this.menuList=list;clearTimeout(this.isRunToTarget);this.isRunToTarget=null;this.menuShow=false;}4、页面初始化根据传入参数及对应的配置来进行页面初始化。
init(){this.nowAction=this.actionList.find((item)=>{returnitem.name==this.defaultAction;})||{};this.showImg=document.getElementById("showImg");this.showImg.style.width=this.petSize;this.showImg.style.height=this.petSize;this.showImg.style.right=this.petSize;this.showImg.style.top="50%";this.showImg.style.transform="";this.mouseEventListen();this.autoRunToTarget();},5、行为菜单栏我们需要有个行为菜单栏来对宠物的行为进行切换，所以我们可以制作一个简易菜单展示，为了防止菜单栏溢出视图窗口，我们可以对其弹出位置进行以下限定：
菜单顶部与宠物的顶部对齐，如下图：
菜单底部与宠物中心对齐，如下图：
菜单从宠物右边弹出，如下图：
菜单从宠物左边弹出，如下图：
实现代码如下：
showMenu(){constw=this.showImg.offsetWidth;consth=this.showImg.offsetHeight;constleft=this.showImg.offsetLeft;consttop=this.showImg.offsetTop;constinnerWidth=window.innerWidth;constinnerHeight=window.innerHeight;constinLeft=left playImg(action,ind){if(!action||JSON.stringify(action)=="{}")return;letmin=action.min,max=action.max;if(!ind||ind 转化成这么一道数学题之后是不是觉得简单多了？我们只需要解开这道简单的三角函数题目即可： 我们可以通过点A和点B的坐标来求边BC和边AC的长度： AC=|X2-X1|BC=|Y2-Y1|知道了这两边的长度之后我们便可以求得角θ的度数了。 首先我们应该先了解一下反正切arctan，如果tanθ=y,我们可以得出arctan(y)=θ，所以我们可以通过反正切来求得角θ的大小 但是我们计算的时候两边的长度永远是正的，所以求得的角度区间应该是[0,π/2]，所以在下面这种情况（目标点x坐标大于宠物x坐标）的时候，我们应该对其进行一个y轴镜像翻转。 转化成代码如下： autoRunToTarget(action=this.nowAction,x="",y=""){if(action.isMove){if(!x)x=getRandomNum(0,window.innerWidth);if(!y)y=getRandomNum(0,window.innerHeight);this.runToTarget(action,action.min,x,y,()=>{this.autoRunToTarget(action);});}else{this.playImg(action);}},9、宠物拖动有的时候宠物可能会遮挡到页面内容，我们需要将其拖动移开，这里我们可以对鼠标移动事件和点击事件进行监听处理。 我们需要先点击宠物后使其进入可拖动状态才能开始拖动宠物。 clickPet(e){this.canDrag=true;//设置可拖动状态clearTimeout(this.isRunToTarget);this.startClickX=e.pageX-window.scrollX;this.startClickY=e.pageY-window.scrollY;window.addEventListener("mouseover",this.mouseoverHandler,false);window.addEventListener("mouseup",this.mouseupHandler,false);},2、根据鼠标坐标更新宠物坐标判断当前是否进入可拖动状态，可拖动时根据鼠标坐标更新宠物坐标。 mouseoverHandler(e){if(!this.canDrag)return;constw=this.showImg.offsetWidth/2;consth=this.showImg.offsetHeight/2;this.showImg.style.left=e.pageX-window.scrollX-w+"px";this.showImg.style.top=e.pageY-window.scrollY-h+"px";this.showImg.style.right="";this.showImg.style.bottom="";},3、区分点击事件和拖动事件鼠标抬起时判断是点击事件还是拖动事件，这里我使用拖拽开始位置和拖拽结束位置来做一个简单的判断，拖拽结束后注意清除鼠标的监听事件。 mouseupHandler(e){constendClickX=e.pageX-window.scrollX;constendClickY=e.pageY-window.scrollY;const{target}=e;if(target==this.showImg&&(Math.abs(this.startClickX-endClickX)<10||Math.abs(this.startClickY-endClickY)<10)){this.showMenu();}else{this.menuShow=false;this.autoRunToTarget();}this.canDrag=false;window.removeEventListener("mouseover",this.mouseoverHandler,false);window.removeEventListener("mouseup",this.mouseupHandler,false);},10、播放音频根据配置表获取当前行为的音频，有配对的音频则随机播放音频。 如有侵权，可以联系删除。 目前实现的只是一个简单组件版，后面会继续完善，增加更多的交互功能或交互小游戏，提高组件可配置性，后续还有两个改动方向： 有图片包资源的同学可以赞助下有什么其他好的建议也都可以提出来 当前组件已发布到npm，可以查看组件文档进行引入并配置。 引入后即可直接使用。 Gitee源码：/zheng_yongt…[3] 这里是JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球，平时也喜欢写些东西，既为自己记录，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解，写错的地方望指出，定会认真改进，在此谢谢大家的支持，我们下文再见。