--- theme: fancy --- 作为一个开发经验不足两年半的前端，我觉得发呆并不是摸鱼的最好方式，不妨用自己微不足道的技术去创造一些自己感兴趣的东西。当然，一切好的创意还是来源于摸鱼时的发呆。😎 > 虽然我有很多不错的想法,但无奈技术能力有限,不过这也是学习的动力之一吧。话不多说，现在开始最基础的前端知识带大家做一个小玩意🏀。我是小辣🐓各位大佬们，献丑了！ # 构思最开始的想法很简单，用CSS画一个火柴人。技术选型的话就用最近在接触的vite+vue3吧。不熟悉vue3的使用js动态修改css也能实现，这里只讲下实现思路吧。 | ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ef2574b0d63645aa892b9d2bf0f3ebb2~tplv-k3u1fbpfcp-watermark.image?) |

既然是火柴人,那么需要有头、躯干、四肢组成(如图所示)。对于入门级前端来说画出来并不难，涉及绘画第一时间想到的是使用canvas，但由于不太熟悉这个，最终还是决定使用CSS绘画。

| | --- | --- | # 从头开始 - 头很简单利用`border:50%`可以轻松绘制出来。 - 然后考虑一下，四肢应该是定位于躯干之上，而躯干应定位于头上。（果然头才是本体） - 利用头相对定位躯干绝对定位，来使得躯干定位于脖子位置即可。 - 四肢同理，利用定位+旋转即可，需要注意的是需要修改旋转中心点后再进行旋转。 ``` transform-origin: top; //修改旋转中心为元素顶端 transform: rotate(xdeg); //旋转角度 ``` # 动起来！火柴人绘制好后，开始思考如何让火柴人动起来呢?很简单，监听键盘的按下来修改火柴人位置即可。通过`window.addEventListener('keydown')` 添加键盘监听事件，通过switch来判断`e.key`的值来判断按键然后来触发对应事件。简单来说就是监听w或↑来让头部的top值先增后减来实现跳跃效果，监听a/d或←/→来修改头部的left值来实现移动。现在做完后是这个样子，略有生硬。接下来我们来优化一下。 QQ录屏20230129171319.gif

在左右移动的时候只需要加上手脚交替摆动然后返回原来位置即可实现走动效果。这次我们使用动画来实现，通过监听按键来播放一个摆动的动画来实现。这里展示左手摆动，右手和腿同理即可。 ``` @keyframes handshake1 { 0% { transform: rotate(30deg); } 50% { transform: rotate(80deg); } 100% { transform: rotate(30deg); } } ``` 加完动画后看着果然是流畅多了，有那味了哈。至此一个会动的火柴人完成了。

# 优化一下下看到这个会动的火柴人，不禁让人想到超级玛丽等等游戏，那为什么不做个小游戏呢？用火柴人做主角似乎有点太没有创意了。此时，我盯着眼前的手办陷入了沉思...

没错，就是你了，贴个图吗?no!这并不能展现我练习两年半的美术水平，几个div的事！搞起！事先声明，我是真爱粉，才不是什么小黑子😏 ![CC242030872E7A5D329605714565F806.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/41301dd393cb4f2a8e31bc844f16ae25~tplv-k3u1fbpfcp-watermark.image?) 首先坤坤最显著的特征先安排上，那么什么是最显著的特征呢，相信很多真爱粉都能想到，那么就来两个带定位的div轻松实现。

| ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fdafb5bda9ac417ca953c30908a56e0c~tplv-k3u1fbpfcp-watermark.image?) |

这里还是使用了修改定位中心加偏移的方式，至于我为什么要如此频繁修改定位中心，都是为了之后的优化做的准备。现在看起来不太自然我们使用渐变来优化一下。
`background-image: linear-gradient(to right, grey, lightgrey);`
优化完看着好多了😄

|![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9875dc6d689b47f6ba3aeefc0aedb33e~tplv-k3u1fbpfcp-watermark.image?)| | --- | --- | --- | 发型完成后下一步做的应该就是加上坤坤的背带裤了。同样定位来实现即可，一个裤裤加两个背带，再将腿部颜色改为一致即可，需要注意的是元素的层级问题，建议都加上`z-index`以防层级错误。

> 盯着看了很久，总感觉少些什么，直到我又望向了旁边的坤坤手办...没错!是篮球!
很简单，从百度找个🏀的透明图然后用定位即可。定位的位置需要慎重选择，最开始我选择定位在右手上，但是随着后期加上运球动画后发现，手臂摆动会改变🏀的运动方向，也会导致🏀层级低于躯干,同时也会降低后期的可操作性，于是我最终选择将篮球定位于人物最外层。然后再加上一点点的动画，篮球也就完成了。

大体上完成了，只差一个表情和背景了。表情本来也打算画出来的，但是突然想起一个极其简单粗暴的方式🤔。至于背景嘛，网上没找到纯粹的，那就某图秀秀扣一个出来好了。加上背景和表情，大概就是这样。

# 变成游戏首先我们需要想出来制作成何种游戏，什么玩法。略加思索后，既然是真爱粉，必然会想起来坤坤四大爱好之一的篮球，然后想到下面这个画面，没错，运球挑战！篮球在右手时按左，在左手时按右，然后只需要加上定时器，便可以变成练手速挑战了。

玩法有了，那么如何用前端技术去实现呢，也很简单。只需要建一个空数组，我们假设左为1，右为0，初始化时向数组中push一个0当按下左右键时，判断是否是与方向相反的按键，如果是的话进行push对应的数字，否则的话初始化数组初始化定时器来重新进行挑战。 js部分设计完成后，剩下的就简单的css部分了。只需要通过按键来改变篮球的位置，在改变时通过动画来模拟运球即可。值得注意的是，为了让🏀每次执行动画完毕时保留状态，用到了一个css属性`animation-fill-mode: forwards;` > 前文我们修改了很多偏移中心，不仅仅是优化移动效果，现在也可以方便优化动作。在每次运球时，让四肢、发型和坤坤位置都执行一次动画效果，这样运球的动作就更加~~还原~~`流畅`。 ![QQ录屏20230130160157.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/47ff18a968e6455699fcb983e1bb708f~tplv-k3u1fbpfcp-watermark.image?) 然后经过一些简单小调整后，坤坤的运球挑战算是完成了。难度设置的话十秒50次，难度不是很大。困难模式是根据我的同事`前端小吕布`挑战结果（120+）来设置的，至少我是完不成困难模式的挑战🙄。

# 真爱粉挑战如果到此为止的话总觉得有一些遗憾，因为这些花活儿并不能证明我是真爱粉😫，并且总有个画面在我脑海里挥之不去。因此，我决定再加一小部分。其实也很简单，只需要让每个部位都播放动画即可。拆分下来的话包括转球、扔球、转头、弯臂、曲腿这几部分。花费一点点时间话也就很容易调好了。就是这样。其中转头使用的是 ``` transform-origin: center center 40px; //修改旋转中心Z轴为头部半径距离 @keyframes facemove { 0%{ transform: rotateY(180deg); //绕Y轴旋转 } 16%{ transform: rotateY(200deg); } 83%{ transform: rotateY(200deg); } 100%{ transform: rotateY(270deg); } } ``` 抖动用到了另一个CSS属性transform的`skew`，作用是沿某一个轴进行拉伸。 ``` transform: translate(-75%, -5%) skew(-8deg,0deg) !important; ```

至于最后一部分也很容易了，是真爱粉就能过去😏，参考下面就行，大家自己完整体验下吧。其实还有蛮多的改进空间，比如加上`audio`适时的播放背景音乐或者音效，但是找不到音源就此作罢。大家有兴趣的可以发挥天马行空的想象自行创作。

当你能看到下面这个动作，第二关就算是结束啦。恭喜你鸭小黑子！ ![1675232954906.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ee90ddd0300a4455a29346e84d79cb69~tplv-k3u1fbpfcp-watermark.image?) # 坤坤大战小黑子这部分是后来灵感来了添加的，想法很简单，做一个简单的格斗游戏，但是又不是完全的格斗，需要有一部分整蛊元素，那就给小黑子无限血量吧，需要达到一定条件再胜利。思路有了，首先要解决的就是和之前的内容有衔接，这个简单，只需要加个出场动画即可，于是在抖动3s后让屏幕外侧的小黑子出现并打断坤坤的抖肩，然后将两个角色放置两端并修改为战斗姿势。在做这部分时我想到了不单纯的用css动画来制作动作切换，因为这样无法去保留状态频繁的使用css切换当动作过多也会乱掉，因此对两个角色的位置和四肢均由js变量来进行控制。但是具体的姿势的参数需要一点点的调整来达到自己满意的结果，说实话这是一个漫长的过程... 角色就位后直接开打也显得不是很合理，于是就加了个对话的动画，为了加强代入感，并没有直接添加对话框，而是选择用换场景对话的方式来添加对话，即添加一个蒙层，在蒙层上对话，由于蒙层只需要设置简单的出现和消失动画，于是两个蒙层我选择用了vue中的`transition`组件。对话设置完成后就可以开始设置战斗了。 ![QQ录屏20230330133416.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e3bb5bd3a8a452c93476a92cf4d0ae1~tplv-k3u1fbpfcp-watermark.image?) 首先是位置移动和攻击动画，由于我们之前用js变量设置了人物位置和四肢参数，所以只需要绑定按键然后修改参数即可，需要注意的是我们需要做节流处理，否则上一动画未执行完下个动画又开始播放，效果不太好。 ![QQ录屏20230330134554.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ee3a82f976b24ba897e7333313440bf5~tplv-k3u1fbpfcp-watermark.image?) 当kunkun可以自由移动后，我们发现角色可以移动到重合的位置，这显然不太好，于是我们需要计算可移动的距离即`kunkun.left<屏幕宽度-heizi.right-heizi.width-kunkun-width`，即不能超过小黑子的当前位置。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bf37f69d2620405099dfb4e03f1ca68c~tplv-k3u1fbpfcp-watermark.image?) 这些设置好之后，需要开始做攻击有效检测了，和上面一样，用距离检测判断即可，`距离=屏幕宽度-kunkun.width-kunkun.left-heizi.right-heizi.width`按下攻击键的同时判断人物之间的距离是否小于攻击距离，小于即判定攻击有效。判定攻击有效后再用节流做一个僵直，即被攻击后的一段时间不能操作。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/32feebf7330c47dc9b1c8d745ce83f27~tplv-k3u1fbpfcp-watermark.image?) 当坤坤的移动、攻击、攻击有效判断都完成后，我们该设置一个可以自己活动的小黑子了。小黑子的移动、攻击、攻击有效判定、移动距离限制和坤坤基本一致，值得注意的是为了添加难度我提高了小黑子的攻击距离、攻击伤害、击退距离。我们选择用两个`定时器`来让小黑子自行移动，通过在定时器内取随机数来决定小黑子进行哪种运动。这些完成后我们需要添加个血条，这个很简单了，定两个参数，当判定攻击有效的时候自减即可。当一方血量为0时添加事件。为了方便操作，我们可以提前写好resetPositon事件来重置位置血量与定时器。当坤坤血量为0时，我们需要重置这一关，可直接调用上面写好的方法。当小黑子血量为0时，我们需要进入下一阶段同时给血量补满。下一阶段的设计是普通攻击打败小黑子后总会恢复满血状态，只有点击眼睛时触发爆炸然后用大招解决战斗。点击眼睛时由于当前位置不同，我们需要设置的射线长度与倾斜角并不相同，在这里我们需要用到勾股定理和三角函数，已知角色间距离和高度，求夹角和第三边长度，相信对于大家来说都很简单了。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc2d319b81de44b7990c394b6e2f122f~tplv-k3u1fbpfcp-watermark.image?) 点击后延时显示爆炸动画即可。 ![QQ录屏20230330141643.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/49f0f4b3259b4effa06590be2bd643a8~tplv-k3u1fbpfcp-watermark.image?) 最后的大招参考的是火影中螺旋丸，坤坤用`篮遁-螺旋丸`应该也很合理吧。 ![QQ录屏20230330141847.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7eb16b4805554e08b8721962b1863b86~tplv-k3u1fbpfcp-watermark.image?) 下面是码上掘金建议点下面的右上角去详情中体验（屏幕尺寸不合适的ctrl+滑轮缩放调整下）----⬇⬇⬇⬇⬇ [jcode](https://code.juejin.cn/pen/7194618804104593466) # 免责声明！该代码仅供学习娱乐！不针对任何ikun，也没有歧视坤坤的意思，大家适度玩梗。如有冒犯，还望海涵，请勿律师函警告😘。各位大佬，本人纯新手，不喜勿喷，如有意见，欢迎指出，也欢迎大家在评论区发出来自己第一关的最好成绩。 # 结局or写在最后在这个人心躁动的时代，尽管只是个小游戏，我仍然不希望结局会是谁赢谁输，所以我并没有做战败动画，玩家玩到最后的结果也只是两个人迎来和平共处，希望互联网上的人们也能秉持一颗平常心，温柔的对待每个人，接受人与人想法之间的差异，允许各种各样类型想法的存在，至少从自己做起，每个人都自己做好自己，那社会环境互联网环境多少会改善一点吧...