微信小程序教程入門篇【2】,小程序小游戲2048實戰(zhàn)講解
2017-12-20
導讀：本帖最后由 狂兔科技 于 2016-11-5 03:58 編輯 1. 開篇導言 本節(jié)目標：對于上篇需求分析做減法。 目標用戶：學習過【入門篇】的同學或有一定編程經驗的同學。 學習目標：如果2048”就是...
1. 開篇導言
- 本節(jié)目標：對于上篇需求分析做減法。
- 目標用戶：學習過【入門篇】的同學或有一定編程經驗的同學。
- 學習目標：如果2048”就是一個頁面，那么開始動手吧！
- 案例分析：小游戲2048。
- 傳送門：
上一篇：微信小程序教程-入門篇【1】
下一篇：微信小程序教程-入門篇【3】
2. 對需求設計做減法
上一節(jié)的流程圖相信大家都看了。對于怎么研發(fā)自己的2048相信大家也有自己的思路和辦法。
筆者也把自己的思路在這里和大家分享一下。做減法，先做Y軸縱向，在X軸橫向。
Y軸：業(yè)務邏輯的粒度級別的放大/縮小。
X軸：業(yè)務邏輯在同一個粒度級別中的邏輯加/減。
那么對【2048】的Y軸簡化后，就是一個靜態(tài)頁面。X軸簡化后，去除格子。復雜度大大降低了，Let's GO！
3. 2048主頁面
實現(xiàn)流程：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
- }
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>
5. 小結
方法論：Y軸，X軸。有時間的同學，請去了解一下涉及到的css樣式。雖不糾結于細節(jié)，但請在頭腦中保留一個認識。
6. 預告
下一節(jié)將繼續(xù)進行2048的拆解和coding。
第二部分：如何開通一個小商店
掃碼免費領取運營資料包
