一键在自己的网站上添加一只会动的小宠物

700 227

开通VIP，畅享免费电子书等14项超值服

首页

好书

留言交流

下载APP

联系客服

2024.01.25江苏

原创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||indmax){ind=min;}this.showImg&&this.showImg.setAttribute("src",require("@/assets/img/"+this.imgRootPath+ind+".png"));clearTimeout(this.isRunToTarget);this.isRunToTarget=setTimeout(()=>{this.playImg(action,ind+1);},500);},7、宠物移动效果实现移动效果我们只需要在图片切换的同时对图片的定位进行修改，便可以简单实现宠物移动的效果，所以我们需要计算每次移动的时候图片的坐标变化量及角度的偏移量。

转化成这么一道数学题之后是不是觉得简单多了？我们只需要解开这道简单的三角函数题目即可：

我们可以通过点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源码：gitee.com/zheng_yongt…[3]

这里是JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球，平时也喜欢写些东西，既为自己记录，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解，写错的地方望指出，定会认真改进，在此谢谢大家的支持，我们下文再见。

THE END

宠物,猫,头像,动物,矢量图图片宠物,猫,头像,动物,矢量图图片素材免费下载

宠物图片ICON图标宠物图片边框图片宠物图片卡通图案

一键在自己的网站上添加一只会动的小宠物

宠物图片宠物素材免费下载

1.宠物素材宠物png图片下载PNG 实物可爱的小花猫 PNG 可爱的吐舌头长毛狗 PNG PNG 小猫小狗 PNG PSDPNG 卡通可爱小狗动插画元素 PNG PNG 可爱的小猫咪宠物猫 PNG PSDPNG 宠物q版可爱小狗奔跑元素... PNG PNG 一只卡其色卡通宠物狗 PNG PNG 一只卡通宠物小黄猫 PNG AIPNG 蓝色水族馆鱼群矢量素材 ...https://www.51yuansu.com/search/chongwu.html
2.宠物图片图片免费下载宠物图片素材宠物图片海报新图网是专注免费商用设计素材下载的网站,提供宠物图片,宠物图片图片,宠物图片素材, 宠物图片图标,宠物图片海报等免费下载服务!https://ixintu.com/all/chongwutupian.html
3.今日分享一组高清宠物狗PNG免抠图片素材,...来自BOOM素材盒今日分享一组高清宠物狗PNG免抠图片素材,每一款都独具特色,无论是细腻的毛发纹理,还是生动的眼神表情,都让人置身于宠物的欢乐世界。素材的PNG免抠图格式使得使用更加方便灵活。你可以根据自己的需求,轻松地...https://weibo.com/5239885294/OggBnmQbD
4.动物宠物图片素材动物宠物png图片下载千图网正版元素图库为设计师提供动物宠物素材下载服务,这里有海量的动物宠物免抠素材供您使用,节省您搜索动物宠物图片的时间,找动物宠物设计素材,就来千图网!https://www.58pic.com/ys-zt/39758.html
5.宠物(pet)图片png,svg图标爱给网提供海量的图标库资源素材免费下载, 本次作品为png,svg 格式的宠物(pet), 本站编号41880782, 该图标库素材大小为4k, 该素材已被下载:2次,许可范围为可商用,署名,协议名称为CC署名, 更多精彩图标库素材,尽在爱给网。 浏览本次作品的您可能还对 宠物图标宠物 感兴趣。 https://www.aigei.com/item/pet_chong_wu_9.html
6.宠物头像图片免费下载PNG素材编号1xri45l61图精灵为您提供宠物头像免费下载,本设计作品为宠物头像,格式为PNG,尺寸为564x2096,下载后直接使用,下载宠物头像图片素材就到图精灵。https://616pic.com/sucai/1xri45l61.html
7.手绘宠物素材图片免费手绘宠物png元素大全图怪兽提供免费手绘宠物素材图片大全共136个元素、涵盖多种手绘宠物主题风格,手绘宠物元素设计 等供您免费下载使用。https://818ps.com/png/shouhuichongwu.html
8.宠物商店设施png图片免费下载素材swdccwcc88ICON有海量宠物商店设施素材:卡通彩绘,可爱,商品摆设,宠物用品等,你现在浏览的素材编号swdccwcc,搜索免抠元素素材就来88ICON素材库!https://88icon.com/sucai/swdccwcc.html
9.宠物店logo图片素材宠物店logoPNG设计图片下载熊猫办公网站共为您提供51个宠物店logo设计素材以及精品宠物店logo图片素材下载,汇集全球精品流行的宠物店logo免抠元素完整版模板,下载后直接替换文字图片即可使用,方便快捷的不二选择。https://m.tukuppt.com/sopng/chongwudianlogo.html
10.宠物图片,宠物图片素材大全宠物图片图片素材,百图汇提供宠物图片相关图片下载,分享可爱的宠物狗高清图片下载、女孩与宠物狗高清壁纸、宠物医院项目收费表图片素材、可爱猫咪宠物海报图片等。http://so.5tu.cn/haibao/chongwutupian-p4.html
11.猫小猫猫咪素材图片宠物,摄影图片素材花瓣网,设计师灵感库,素材图库分发。发现你喜欢的猫图片,猫灵感图,将你喜欢的小猫_猫咪猫素材采集到宠物,摄影https://huaban.com/explore/cat/
1.小狗png素材小狗png图片小狗png素材图片下载觅知网为您找到84个原创小狗png素材图片,包括小狗png图片,小狗png素材,小狗png海报,小狗png背景,小狗png模板源文件下载服务,包含PSD、PNG、JPG、AI、CDR等格式素材,更多关于小狗png素材、图片、海报、背景、插画、配图、矢量、UI、PS、免抠,模板、艺术字、PPT、视频https://www.51miz.com/so-sucai/4754880.html
2.小猫图谱各种小猫可爱小动物宠物卡通PNG素材这是一张可爱宠物小猫商用插画图片素材,可爱风格,小猫为主画面,设计成可爱宠物小猫插画。可用作可爱宠物小猫插画配图,也可用作产品图片,作品编号:20517169,尺寸为4000*4000px像素,格式为PNG,欢迎会员免费下载。https://www.51mo.com/graphics/20517169.html
3.可爱的桌面宠物猫unity桌面宠物资源"可爱的桌面宠物猫"是一款专为用户打造个性化桌面体验的应用程序。它以其独特且迷人的设计,让用户的电脑桌面变得更加生动有趣。这款软件通常被归类在“桌面界面优化”类别,因为它旨在提升用户与电脑交互时的视觉享受,同时也能提供一定的娱乐性。 在“桌面”领域,这类应用的主要功能是将虚拟宠物——如这只“可爱的...https://download.csdn.net/download/sd7087001/562569
4.可爱的小猫咪PNG素材,高清透明图片,动植物元素设计下载PNG 可爱白色鲸鱼(499x500) 详情 下载 PNG 亲子节 天猫 活动 透明图(772x602) 详情 下载 PNGPSD 2019年618天猫开门红活动(1440x900) 详情 下载 PNG 可爱小心图片素材(700x394) 详情 下载 PNG 可爱宠物狗(1024x590) 详情 下载 PNG 可爱 草莓 卡通 图案(640x640) ...https://www.moyublog.com/png/2970.html
5.宠物食品3D图标高清免抠透明png图片素材类图片素材60张我图找相似功能已为您找到60张与宠物食品3D图标高清免抠透明png图片素材类似的图片,包含各种高清原创宠物食品3D图标高清免抠透明png图片素材素材图片,找宠物食品3D图标高清免抠透明png图片素材相似图片就上我图网.https://so.ooopic.com/findsimilarity-35175156.html
6.PNG矢量素材CDR图标ICON设计UIAI宠物设计素材PNG矢量素材CDR图标ICON设计UIAI宠物设计素材 PNG宠物美容店APP软件WEB应用界面AI矢量UI设计ICON图标CDR素材PS 风格: PNG 矢量 素材 CDR 图标 ICON 设计 ui AI 宠物https://www.zhe2.com/note/683745332047
7.宠物免抠宠物免抠图片、宠物免抠高清图片,堆糖精选最新宠物免抠图片大全,一键收藏免费下载。https://www.duitang.com/blogs/tag/?name=%E5%AE%A0%E7%89%A9%E5%85%8D%E6%8A%A0
8.小狗宠物动物卡通插画免抠本素材作品名称为小狗宠物动物卡通插画免抠,素材编号是5022135,是一张格式为:png ,可以使用image editor等软件打开,颜色模式为RGB的作品。https://www.sucai999.com/sucai/5022135.html