灵感来源

天气冷了，办公室零食准备起来。最近一直忙着工作，有点忽视了好友。看着网友分享的零食图片，我头顶的灵感之光亮了。

正所谓，何以解忧，美食足矣。我准备给好友写一个零食盲盒的小游戏，能看不能吃的那种。

游戏名称

这次的游戏名我准备采用怀旧+直白的方式命名。简单明了直奔主题，但是又带点怀旧风。最后决定的游戏名称是

零食小卖部

客串游戏策划

每次到这个环节就很开心，有种我的游戏我做主的快乐。

作为一个临时的菜鸟策划，我会先问自己三个问题，游戏的内容是什么？游戏怎么玩？玩游戏的奖励是什么？

先弄清楚这三个问题，然后在设置游戏规则，再定好交互设计，才会正式进入开发阶段。

游戏规则

规则	内容
盲盒数量	6个
可选盲盒次数	<=1次
盲盒默认可操作性	默认可以操作
已开盲盒的操作重复性	单次不可重复操作
获得零食种类	随机类型
零食重复性	单次不可重复获得

功能设计

游戏功能

前期的准备工作和界面交互均已经准备就绪，可以进入功能设计阶段了。

游戏标题

为了增加标题的趣味性，我在标题右侧增加了一个甜美的甜甜圈。

.doughnut {width: 180px;height: 180px;background: #dd6f89;border-radius: 50%;border-bottom: 3px solid #874d16;box-shadow: #874d16 0px 2px 3px 1px;z-index: 250;position: absolute;top: -80px;right: -70px;transform: scale(0.5);
}<div class='doughnut'>......
</div>

开盲盒规则

规则内容

每次可以选择一个盲盒进行打开，可以随机获取一种零食。
选中一个盲盒打开后获取对应的零食，不可以再次打开该盲盒，也不可以打开其他盲盒。
盲盒中的零食种类主要包括以下六种：

种类	数量
蒸蛋糕	一箱
米糕	一盒
芝士酥	一盒
芒果干	一袋
麻薯小面包	一箱
鸡蛋仔	一箱

规则阅读

标题下方有一行文字提示，提示的右侧是问号icon。

<div class="rule"><span>每次只可以开一个盲盒，请挑选喜欢的盲盒吧~</span><span class="rule-icon" id="ruleIcon">?</span>
</div>

点击问号icon可以打开规则弹层，弹层展示了游戏规则的全部内容，可直接阅读。

function ruleModalOpen() {modal.style.display = 'block';ruleContent.style.display = 'block';
}
ruleIcon.onclick = ruleModalOpen;

绘制零食

一共六种零食，我都是用CSS绘制完成的。

包装的锯齿

绘制过程中，box-shadow帮我打开了一扇崭新的编程大门。

比如蒸蛋糕的外包装两侧的锯齿形状就是通过设置box-shadow的值实现的。再也不用一个点一个点的数着往上面加了。

.snack-zdg::before,
.snack-zdg::after {content: '';position: absolute;top: 0;width: 6px;height: 6px;border-radius: 50%;box-shadow: 0 6px #fff, 0 18px #fff, 0 30px #fff, 0 42px #fff, 0 54px #fff, 0 66px #fff, 0 78px #fff;
}

包装的凹陷效果

元素的背景是可以设置径向渐变颜色的，从中心点向外，可以定义多个颜色值。

当设置边缘的颜色和外层父容器的背景颜色一致时，就会形成凹陷的效果。

.zdg-inner {width: 80px;height: 80px;background-image: radial-gradient(circle at 74px 74px, #feeed7, #f4bd6b);border-radius: 50%;position: absolute;left: 50%;top: 50%;margin: -40px 0 0 -40px;filter: blur(1px);
}

米糕的立体化

通过设置transform-style属性的值，可以指定嵌套元素是怎样在三维空间中呈现。

再将米糕的三个面聚拢在一起，一块立体的米糕就绘制完成了。

.mg-cake {position: absolute;transform-style: preserve-3d;top: 30%;left: 65%;transform: rotateX(-35deg) rotateY(-45deg);
}
.mg-cake-face1 {width: 30px;transform: rotateY(0deg) translateZ(40px);
}
.mg-cake-face1::before,
.mg-cake-face2::before {content: '';width: 100%;height: 2px;background: #6b1f21;box-shadow: 1px 1px 2px 0 #6b1f21;position: absolute;top: 48%;
}
.mg-cake-face2 {left: -18px;top: 15px;transform: rotateY(90deg) translateZ(8px);
}
.mg-cake-face3 {width: 31px;height: 51px;left: 2px;top: -3px;transform: rotateX(90deg) translateZ(24px) translateY(57px) rotateX(0deg) translateY(-40px) rotate(180deg);
}

开盲盒咯

获取零食流程图

获取零食步骤讲解

选择一个心仪的盒子，进行点击操作；
点击之后，将所有盒子的可点击性值变成不可点击；
获取0~5的随机数，确定最终获得的零食类型；
将盲盒的盖子打开，打开效果做了一个盖子移动的动画，最终盖子会消失；
盖子消失之后，零食会展示到盒子上方，会一直保持上下移动的动画效果，增加了一丝趣味性；
1.5秒之后，展示获得零食的弹层；
零食展示弹层可以关闭，关闭之后不可以重新选择盲盒。

总结

在这个月朗星稀的夜晚，我的创意之旅就告一段落了。

这次，断断续续的设计了很多代码创意。有些是很日常的功能，比如怎么获取周期性事情的所有日期。也有一波童年回忆，比如果宝特攻、套圈水机。

而零食盲盒，是我近期用原生JS写的最复杂的一个小功能。实现过程中，每个小零食的绘制都让我有一点点收获。也对3D展示效果有了更深的了解。

接下来就专注写「趣学前端」系列了。

transform-style还挺好用的。大部分时候，实现3D效果，在父元素上设置transform-style属性的值为preserve-3d，后面的就可以随意发挥了。

有时候学习并不困难，如何应用是关键，所以，想要熟练的掌握前端知识，还需要不断的练习和应用。

「CSS畅想」何以解忧，美食足矣，用技术给好友开发了一个零食盲盒小游戏相关推荐

「免费申请」基于Arm Cortex-M4的兆易创新GD32F427高性能开发板试用活动
申请链接:「免费申请」基于Arm Cortex-M4的兆易创新GD32F427高性能开发板试用活动基于Arm® Cortex®-M4的兆易创新GD32F427开发板免费试用活动近期兆易创新发布了全 ...
「css基础」关于字体相关的基础知识（一）
常言道网页设计的好坏,95%取决于字体的排版.尽管现在抖音.小视频和游戏的盛行,其占据了我们大部分的业余时间,但是还是有大部分人在网络上进行阅读,比如查阅资料,阅读小说.看新闻.知识学习之类. 舒适的 ...
网安行业「iPhone时刻」！深信服首秀安全GPT技术应用
5月18日,深信服正式对外首秀安全GPT技术应用.深信服科技董事长何朝曦在现场分享了安全GPT技术应用的研发背景.技术应用特点及未来设想.深信服科技研发总经理梁景波.深信服安全攻防专家演示了安全GPT ...
多个excel工作簿合并_「Excel技巧」批量将多个工作簿的工作表合并到一个工作簿中...
多个工作簿里的表格合并到一个工作簿中,在日常工作中应该经常碰到吧. 怎么合并会比较快又省事? 当然,肯定不是复制粘贴,要合并的工作簿多的情况下,这种方式很耗力气. 不妨,试试用VBA代码法. 今天来讲 ...
微信第一行代码曝光！从「扫地僧」到「地成佛」，张小龙10年磨一剑
点击上方,选择星标或置顶,不定期资源大放送! 阅读大概需要5分钟 Follow小博主,每天更新前沿干货来源:微博编辑:卫民 [导读]腾讯官方微博今日凌晨发布了微信10年前在微信后台第一天提交的代码 ...
微软放弃的游戏被他们复活了：Windows经典「三维弹球」现实版，CAD建模、Arduino编程、数控机床打造，硬核致敬童年...
金磊贾浩楠发自凹非寺量子位报道 | 公众号 QbitAI 20年前,电脑还是大背头的,「休闲小游戏」是属于Windows的. 纸牌.扫雷.空当接龙--满满的一波回忆杀. 最近,来自美国肯尼索 ...
await原理 js_「速围」Node.js V14.3.0 发布支持顶级 Await 和 REPL 增强功能
本周,Nodejs v14.3.0 发布.这个版本包括添加顶级 Await.REPL 增强等功能. REPL 增强通过自动补全改进对 REPL 的预览支持,例如,下图中当输入 process.ver ...
虚拟与现实！深兰科技打造湖北首个街区数字主理人「江妮」
最近有一位"来自平行数字宇宙"的"她"真实地出现在武汉人民生活当中,用数字的形象和AIGC的能力为江汉路数字街区增添了一抹未来的科技色彩."她&quo ...
谈谈「绩效考核」背后的逻辑以及潜规则
转载:谈谈「绩效考核」背后的逻辑以及潜规则绩效被打C了!谈谈「绩效考核」背后的逻辑以及潜规则在新公司度过了一个完整的 Q3 季度,被打了绩效,也给下属打了绩效,感慨颇深. 今天就好好聊聊大厂打 ...

「CSS畅想」何以解忧，美食足矣，用技术给好友开发了一个零食盲盒小游戏