灵感来源
昨天在群里回忆了一波童年动画，挺欢乐的。龙珠暂时没有画出来，好友说她想回忆童年，我可以找个别的动画先画着。
之前有部动画，里面的角色形象都很可爱，而且有很多不同颜色的角色，就很适合做换装功能，这部动画也有个可爱的名字叫《果宝特攻》。这里面的角色大多是果冻的形象，所以用CSS实现难度也不是很大，之前我用CSS绘制过冰墩墩，所以也算驾轻就熟。
我和好友都挺喜欢小游戏的，我相信这个功能应该能给她一个小惊喜。
在线预览
在线预览平台，可查看完整代码，并体验效果。
功能设计
通过按钮操作，更换果宝的果冻颜色。
- 一共有橙、黄、绿、红、粉、紫这六种颜色，对应六个按钮，位置在页面左侧；
- 果宝的位置在按钮右侧，默认为红色；
- 切换代表不同颜色的按钮，果宝的颜色对应更换，同时展示对应颜色的果宝的名字。
功能实现
果宝的结构
果宝主要由叶子、头、身体、四肢这四个部分组成。
- 头顶的叶子为绿色，像一片呆毛，为果宝增添一分呆萌；
- 头部，包括眼睛、鼻子、嘴巴，粉扑扑的那一片便是鼻子，为果宝增添一分可爱；
- 身体是连起来的，符合果冻的特点；
- 四肢中，手臂圆滚滚的，为了增加立体感，我打了白色的光效。小短腿是萌物的标配。
颜色切换
果宝的名字
颜色区分不同的果宝
橙：橙留香
黄：菠萝吹雪
绿：陆小果
红：上官子怡
粉：梨花诗
紫：花如意
实现方式是通定义一个包含全部果宝的数组对象，每个元素都包含按钮Id、果宝名字、按钮高亮的样式名称、身体颜色的样式名称四个变量。点击切换按钮时，通过按钮对应的颜色type值，取到相应的数组中元素即可。
varlist= [ { type: 'orangeBtn', btn: orangeBtn, flag: orangeBtnFlag, rightVal: 'orange', title: '橙留香', }, { type: 'yellowBtn', btn: yellowBtn, flag: yellowBtnFlag, rightVal: 'yellow', title: '菠萝吹雪', }, { type: 'greenBtn', btn: greenBtn, flag: greenBtnFlag, rightVal: 'green', title: '陆小果', }, { type: 'redBtn', btn: redBtn, flag: redBtnFlag, rightVal: 'red', title: '上官子怡', }, { type: 'pinkBtn', btn: pinkBtn, flag: pinkBtnFlag, rightVal: 'pink', title: '梨花诗', }, { type: 'purpleBtn', btn: purpleBtn, flag: purpleBtnFlag, rightVal: 'purple', title: '花如意', }, ];
实现切换功能
- 每个按钮操作调用重置颜色的方法，传入对应颜色的type值；
- 将果宝数组进行循环操作，避免一个一个处理的繁琐方式；；
- 当前点击按钮置为高亮，其他按钮移除高亮的样式名；
- 当前切换的颜色为身体容器添加颜色样式，其他则移除颜色样式，同时当前颜色操作按钮变为不可操作，避免重复添加样式名。
// 重置颜色
functionresetColor(type) { list.forEach((item, index) => { if (type===item.type) { console.log(type); item.btn.classList.toggle('active'); item.flag=true; right.classList.add(item.rightVal); rightTitle.innerHTML=item.title; } else { item.btn.classList.remove('active'); right.classList.remove(item.rightVal); } }); }
设置默认颜色
默认展示橙色的果宝-橙留香，直接调用重置颜色的方法，并传入type值为'orangeBtn'
// 默认橙色resetColor('orangeBtn');
总结
框架代码写多了，所以最近返璞归真，写原生写的比较多，还挺有意思的。
好像回到了刚工作那会。反反复复，无数的样式实现一个效果，很有成就；修修改改，写一大段代码实现一个小功能，快乐半天。
好友也很开心，她玩的不亦乐乎，好像暂时忘记了龙珠的事情，我赶紧去想下一个小创意了。
