1. 开篇导言
- 本节目标:对于上篇需求分析做减法。
- 目标用户:学习过【入门篇】的同学或有一定编程经验的同学。
- 学习目标:如果2048”就是一个页面,那么开始动手吧!
- 案例分析:小游戏2048。
- 代码下载
- 在线试玩(点我啊!!!)
- 传送门:
目录:微信小程序教程-开篇导言-很快微信小程序社区
上一篇:【2048】-微信小程序教程-入门篇-实战【1】-很快微信小程序社区
下一篇:暂无。
2. 对需求设计做减法
上一节的流程图相信大家都看了。对于怎么研发自己的2048相信大家也有自己的思路和办法。
笔者也把自己的思路在这里和大家分享一下。做减法,先做Y轴纵向,在X轴横向。
Y轴:业务逻辑的粒度级别的放大/缩小。
X轴:业务逻辑在同一个粒度级别中的逻辑加/减。
那么对【2048】的Y轴简化后,就是一个静态页面。X轴简化后,去除格子。复杂度大大降低了,Let's GO!
3. 2048主页面
实现流程:1. 绿色的导航栏部分。
2. 蓝色的游戏frame部分。
4. 导航栏
- 目录
app.js如下:
//nothing to do App({})
app.json如下:
{ "pages":[ "pages/2048/2048" ], "window":{ "navigationBarBackgroundColor":"#ffffff", "navigationBarTextStyle":"#000000", "navigationBarTitleText": "Demo:2048", "backgroundTextStyle":"light" }, "debug": false }
【window】导航栏相关设置。
app.wxss为空。
2048.js如下:
//空page Page({})
2048.wxml,2048wxss都为空。
5. 游戏frame部分
我们只需修改2048.wxml,2048.wxss
2048.wxml如下:
<view class="container"> <view class="game-body"> <view class="heading"> <text class="title">2048</text> <view class="scores-container"> <view class="score-container"></view> <view class="best-container"></view> </view> </view> <view class="above-game"> <text class="game-intro">你能拿到2048吗?</text> <text class="restart-button">新游戏</text> </view> <view class="game-container"> </view> </view>
我们需要有与之配套的2048.wxss,代码过多不在这里复制出来。请下载源代码查看。
5. 小结
方法论:Y轴,X轴。有时间的同学,请去了解一下涉及到的css样式。虽不纠结于细节,但请在头脑中保留一个认识。
6. 预告
下一节将继续进行2048的拆解和coding。