「CSS畅想」好友想回忆童年,安排~为她做了一个果宝特攻的换装

时间:2022-11-03 12:57:27

灵感来源

昨天在群里回忆了一波童年动画,挺欢乐的。龙珠暂时没有画出来,好友说她想回忆童年,我可以找个别的动画先画着。

之前有部动画,里面的角色形象都很可爱,而且有很多不同颜色的角色,就很适合做换装功能,这部动画也有个可爱的名字叫《果宝特攻》。这里面的角色大多是果冻的形象,所以用CSS实现难度也不是很大,之前我用CSS绘制过冰墩墩,所以也算驾轻就熟。

我和好友都挺喜欢小游戏的,我相信这个功能应该能给她一个小惊喜。

在线预览

​在线预览平台​​,可查看完整代码,并体验效果。


功能设计

通过按钮操作,更换果宝的果冻颜色。

  • 一共有橙、黄、绿、红、粉、紫这六种颜色,对应六个按钮,位置在页面左侧;
  • 果宝的位置在按钮右侧,默认为红色;
  • 切换代表不同颜色的按钮,果宝的颜色对应更换,同时展示对应颜色的果宝的名字。

「CSS畅想」好友想回忆童年,安排~为她做了一个果宝特攻的换装

功能实现

果宝的结构

果宝主要由叶子、头、身体、四肢这四个部分组成。

  • 头顶的叶子为绿色,像一片呆毛,为果宝增添一分呆萌;
  • 头部,包括眼睛、鼻子、嘴巴,粉扑扑的那一片便是鼻子,为果宝增添一分可爱;
  • 身体是连起来的,符合果冻的特点;
  • 四肢中,手臂圆滚滚的,为了增加立体感,我打了白色的光效。小短腿是萌物的标配。

颜色切换

果宝的名字

颜色区分不同的果宝

橙:橙留香

黄:菠萝吹雪

绿:陆小果

红:上官子怡

粉:梨花诗

紫:花如意


实现方式是通定义一个包含全部果宝的数组对象,每个元素都包含按钮Id、果宝名字、按钮高亮的样式名称、身体颜色的样式名称四个变量。点击切换按钮时,通过按钮对应的颜色type值,取到相应的数组中元素即可。

var list = [
{
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值;
  • 将果宝数组进行循环操作,避免一个一个处理的繁琐方式;;
  • 当前点击按钮置为高亮,其他按钮移除高亮的样式名;
  • 当前切换的颜色为身体容器添加颜色样式,其他则移除颜色样式,同时当前颜色操作按钮变为不可操作,避免重复添加样式名。
// 重置颜色
function resetColor(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');

总结

框架代码写多了,所以最近返璞归真,写原生写的比较多,还挺有意思的。

好像回到了刚工作那会。反反复复,无数的样式实现一个效果,很有成就;修修改改,写一大段代码实现一个小功能,快乐半天。

好友也很开心,她玩的不亦乐乎,好像暂时忘记了龙珠的事情,我赶紧去想下一个小创意了。