“我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛”
一、主题初设
先看看夏の主题：
落花飘零送春去，荷叶田田引夏归
《游戏城》最初策划是想做成一个游戏集市。用户进来通过集市上摊位，或玩游戏、或参与抽奖、或参与寻宝、或交易宝贝、或盲盒交友，穿插广告发布。因为时间原因做了抽奖、寻宝、广告发布、宝贝交易和交友，后因小程序审核，广告发布、宝贝交易和盲盒交友都被撤下来了。
游戏的背景主题设定是打算按着春、夏、秋、冬四季来做的。开发的时候，已是夏天，所以应时主题就是初夏：落花飘零送春去，荷叶田田引夏归。
二、初夏主题的实现
为了增强场景动态效果，场景分层实现了许多动效，如远处天空飘动的云朵，中景树丛、角色的微动作、微表情，近景的落花飘零。为了减少资源的大小，尽可能的用css来实现了这些场景及动效。分享如下：
（一）落花飘零的效果：
<view class="leaves"> <i class="leaf"></i> <i class="leaf"></i> <i class="leaf"></i> <i class="leaf"></i> <i class="leaf"></i> <i class="leaf"></i> <i class="leaf"></i> <i class="leaf"></i> <i class="leaf"></i> <i class="leaf"></i> <i class="leaf"></i> <i class="leaf"></i> <i class="leaf"></i> <i class="leaf"></i> <i class="leaf"></i></view>
css
/* */.leaves { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; z-index: 100}.leaves .leaf { display: inline-block; width: 200px; height: 50px; background: linear-gradient(to bottom right, #ffe8ee, #f699ab); transform: skew(50deg); border-radius: 5% 40% 70%; /* box-shadow: inset 0px 0px 1px #c54f4f; */ border: 0; z-index: 1; animation: falling 15s 0s infinite; top: -20vh; position: absolute;}.leaves .leaf:nth-of-type(2n) { animation: falling2 10s 0s infinite;}.leaves .leaf:nth-of-type(3n) { animation: falling3 5s 0s infinite;}.leaves .leaf:nth-of-type(n) { height: 23px; width: 30px;}.leaves .leaf:nth-of-type(n):before { width: 7px; height: 5px; top: -10vh; right: 1px;}.leaves .leaf:nth-of-type(n):after { width: 2px; height: 17px; left: -12px; top: -15vh;}.leaves .leaf:nth-of-type(2n+1) { height: 11px; width: 16px;}.leaves .leaf:nth-of-type(2n+1):before { width: 4px; height: 3px; top: -10vh; right: 0px;}.leaves .leaf:nth-of-type(2n+1):after { width: 2px; height: 6px; left: 5px; top: -8vh;}.leaves .leaf:nth-of-type(3n+2) { height: 17px; width: 23px; top: -8vh; /* z-index:100 */}.leaves .leaf:nth-of-type(3n+2):before { height: 4px; width: 4px; top: 12px; right: 1px;}.leaves .leaf:nth-of-type(3n+2):after { height: 10px; width: 2px; top: -21px; left: 8px;}.leaves .leaf:nth-of-type(n) { animation-delay: 300ms;}.leaves .leaf:nth-of-type(2n) { animation-delay: 3.9s;}.leaves .leaf:nth-of-type(3n) { animation-delay: 2.3s;}.leaves .leaf:nth-of-type(4n) { animation-delay: 4.4s;}.leaves .leaf:nth-of-type(5n) { animation-delay: 5s;}.leaves .leaf:nth-of-type(6n) { animation-delay: 3.5s;}.leaves .leaf:nth-of-type(7n) { animation-delay: 2.8s;}.leaves .leaf:nth-of-type(8n) { animation-delay: 1.5s;}.leaves .leaf:nth-of-type(9n) { animation-delay: 3.3s;}.leaves .leaf:nth-of-type(10n) { animation-delay: 2.5s;}.leaves .leaf:nth-of-type(11n) { animation-delay: 1.2s;}.leaves .leaf:nth-of-type(12n) { animation-delay: 4.1s;}.leaves .leaf:nth-of-type(13n) { animation-delay: 1s;}.leaves .leaf:nth-of-type(14n) { animation-delay: 4.7s;}.leaves .leaf:nth-of-type(15n) { animation-delay: 3s;}.leaves .leaf:nth-of-type(n) { background: linear-gradient(to bottom right, #fde5ea, #fdc4d2);}.leaves .leaf:nth-of-type(2n+2) { background: linear-gradient(to bottom right, #fcd1d9, #fdc4d2);}.leaves .leaf:nth-of-type(4n+1) { background: linear-gradient(to bottom right, #fcecef, #fdc4d2);}.leaves .leaf:nth-of-type(n) { opacity: 0.7;}.leaves .leaf:nth-of-type(3n+1) { opacity: 0.9;}.leaves .leaf:nth-of-type(3n+2) { opacity: 0.9;}.leaves .leaf:nth-of-type(n) { transform: rotate(180deg);}.leaves .leaf:nth-of-type(n) { animation-timing-function: ease-in-out;}@keyframes falling { 0% { -webkit-transform: translate3d(90vw, -5vh, 0) rotate(0deg); } 100% { -webkit-transform: translate3d(0vw, 70vh, 0) rotate(90deg); opacity: 0.1; }}@keyframes falling2 { 0% { -webkit-transform: translate3d(105vw, -5vh, 0) rotate(90deg); } 100% { -webkit-transform: translate3d(30vw, 80vh, 0) rotate(0deg); opacity: 0.3; }}@keyframes falling3 { 0% { -webkit-transform: translate3d(80vw, -5vh, 0) rotate(-20deg); } 100% { -webkit-transform: translate3d(70vw, 99vh, 0) rotate(-70deg); opacity: 0.2; }}
（二）角色选择
角色当初规划了团子、粽子、月饼等，也是应景时节而设计的。
三、最后
很遗憾，后来因为精力有限，加上微信对个人小程序限制诸多，小程序运行了一段时间后没有继续开发，辜负了不少用户，say sorry。颇有：
淡霭轻颸⼊夏初，⼀窗新绿鸟相呼。
出门易倦常归卧，著句难⼯但⾃娱。
