java桌面宠物制作 桌面宠物教程

有备考软考的小伙伴，想积分落户，单位评职称？科目太多不知道怎么选？考试考点难点太多没有头绪？刚准备1个多月过了高级，关注我，我整理了软考各科目的报考条件、适合人群以及备考攻略，可以直接领取：

一、网页宠物素材

1.1 需要准备什么素材

同前一篇文章一样，web网页宠物的动画效果的实现，也是由一个个GIF图拼接而成，我们需要准备多组GIF动图来实现网页宠物的动作切换。

1.2 素材的获取方法

① 素材网站：爱给网、素材巷等。

② 通过ps、pr自己制作 ：pr制作选择视频输出为GIF图即可，ps则需要一帧一帧的找静态图拼接到一起，具体操作流程看上篇。

③ 通过淘宝购买：【淘宝某些商家的资源挺坑的】

二、js实现代码

2.1 目录结构

项目的目录结构如下，其中index.html为可以打开的网页。

 img下的GIF图片是网页宠物对应的可切换动作，这里就放了4个，分别为Attack攻击动画、Hit受击动画、Idle待机动画、Walk行走动画。

 class下的pet.js就是网页宠物的行为逻辑设置。

2.2 实现代码

<img>标签即为展示网页宠物的内容，设置他的class和id名都为pet，src为其读取的资源路径，默认读取idle（待机）的GIF图片

 script下引入对应的JS文件

 style下设置网页宠物的展示样式

这次的网页宠物实现的功能为：平常处于待机动画状态，在点击宠物后，宠物播放受击动画，然后开始追逐鼠标，追逐到后执行攻击动画，攻击动画执行完毕后恢复待机状态。

① 宠物元素设置

首先通过getElementById，根据id获取对应image的相关属性

定义旋转角度，宠物位置、鼠标位置、移动次数来实现宠物追逐鼠标时候位置方向的旋转移动。

定义相关状态，与动画切换时间，实现状态切换和动画播放

② 鼠标点击的监听事件，将其设置为点击状态

③ 监听鼠标移动事件

        首先通过当前鼠标位置-当前宠物距离浏览器左边的距离-宠物宽度的中心位置的方式算出需要移动的距离mousePosition；

        通过相关公式算出需要翻转的角度deg；

        判断鼠标当时的落点与宠物离浏览器左边距离的关系，根据你GIF图的朝向调整是大于还是小于；

        最后将count计数清零，因为每一次鼠标移动都需要重新计算鼠标距离。

④ 宠物更新状态事件，网页宠物的动作切换流程，主体由setInterval完成，setInterval为一个不断执行的定时函数，每过10毫秒循环执行。

⑤ 鼠标追逐状态 catchUpState()

用walk.current模拟GIF播放的当前帧，walk.max模拟GIF图的一次播放时间。  walk.current = 1 就相当于GIF播放到第1帧。

 （1）在current等于0时，切换成需要的GIF图，并根据你自己GIF图的大小决定调整情况，最后current++。

（2）在current>0而小于设定的max时 ，就执行当前状态下的一些操作。

walk状态下，首先根据我们在鼠标监听事件中获取的deg调整宠物旋转角度。

然后再通过count和speed的大小判断宠物是否到达鼠标位置，没到达就改变宠物对应的位置，到达就调整宠物状态。【speed为我们设定的需要移动距离的份数，count为当前移动距离的份数】

 最后改变宠物实际的样式属性，实现宠物的移动。

（3）在current>=max时，即是行走动画播放完毕，在walk状态下，如果没有追逐到鼠标，将会继续循环播放walk.gif动画。

⑥ 宠物攻击状态 attackState()，这里的逻辑和上面的逻辑是一样的，就不过多讲述了。

 ⑦ 宠物点击状态 clickState()

2.3 完整源码

三、在vue项目中展示网页宠物

做这个东西主要还是想把他放在自己的个人网站上面，让网站内容不至于过于空虚。放在vue上面的话，大体没啥问题，主要是注意放的位置就欧克了，建议放在绝对路径里面。

3.1 资源位置

这里资源放置的路径，建议将宠物的GIF图片放在项目public下面的文件夹中，不然可能无法正常加载。

 .js文件和.vue文件同正常一样即可。

3.2 pet.js代码

将整个js代码用一个函数start包起来，然后每个涉及到图片地址的用public下的绝对路径代替即可。

3.3 vue界面代码

引入pet.js里面的start方法，这个需要在mounted里面初始化，不能放在created()里面进行初始化，不然会报错。

四、总结

4.1 项目百度网盘

百度网盘链接:  https://pan.baidu.com/s/1585QjxSWWdX2eOXXECGpVg

提取码: hia9

vue为vue项目上更改过的文件

webpet则是可以直接打开index.html的文件

4.2 总结

还有很多等待优化的地方，只是一个小小的demo，做着玩的，不过收获的确很多。可能有些地方会出现问题，有问题私信或者评论区留言，咱们共同探讨

有备考软考的小伙伴，想积分落户，单位评职称？科目太多不知道怎么选？考试考点难点太多没有头绪？刚准备1个多月过了高级，关注我，我整理了软考各科目的报考条件、适合人群以及备考攻略，可以直接领取：

相关知识

java开发桌面宠物
电脑桌面小宠物
咪萌桌面宠物怎么弄 桌面宠物设置教程
java桌面宠物swing实现
咪萌桌面宠物怎么弄桌面宠物设置教程
*弹桌面宠物怎么弄 设置桌面宠物教程
电脑上如何弄桌面宠物
基于C#制作一个桌面宠物
桌面宠物 java 桌面宠物自制app
桌面宠物系列

网址: java桌面宠物制作 桌面宠物教程 https://www.mcbbbk.com/newsview890804.html