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