送给女朋友的hello world

背景

近来女朋友生日，心理寻思着给她准备一点点惊喜，希望生日能够过得开心。有想过最最最最实诚的礼物-黄金，也想过她购物车里的各种心爱之物：香水、雪地靴、手镯、衣服、帽子等等，这些无疑符合我对送礼物的标准，对方应该会喜欢，也能体现自己的心意，但总觉得缺点什么东西，抓挠头塞啊！对了，仪式感！！再没谈恋爱之前有想过各种浪漫的场景，去哪里玩、每天变着花样的制造惊喜、两个人奇奇怪怪的行为...

思来想去，最终决定在给送礼物的时候增加一些有趣的互动环节，希望除了物质的“送礼”行为，更迫切的想她以生日当天为举例，来年能够快快乐乐的生活哦~

准备

在确认好增加仪式感这一目标之后，便开始想生日当天的情景；最开始想到的是通过两个人趣味问答的形式，两个人回忆恋爱期间发生的种种，把女友往礼物相关的事情引导，最后慢慢拿出准备好的一件件礼物，哈哈哈哈。

最终确定了仪式感和趣味问答，就自然的萌生出了给女朋友写一个小小小小游戏的点子了，虽然想到了点子，不过也因此犯了难，我一个臭写JavaWeb的，拿什么本事去开发小游戏。结合我对她的了解，她所理解的游戏或者程序，都指的是前端所能实实切切能看得着，能交互的界面，就想着用前端JS、CSS、Html完成一些简单的动画操作和交互，由此开始准备送给女朋友的hello world。

开始

开始动工之前再介绍一下给女朋友准备的实际礼物： 支付宝口令红包、99朵胭脂玫瑰，一瓶喜欢的香水、一个桃花酿手镯（因为喜欢粉色系搭配）

coding

因为想制造一点惊喜效果，想着借着自己平常爱倒腾代码的性格,就准备在网上找一个交互类型的小游戏,将送礼物的环节植入进去, 中间寻找的过程我就不过多赘述了, 合理使用搜索引擎 ("百度 -csdn", "语雀", "知乎", "github") 大多数完整的产品都能搜到.