注冊(cè)

微信小程序教程入門(mén)篇【2】,小程序小游戲2048實(shí)戰(zhàn)講解

2017-12-20
導(dǎo)讀:本帖最后由 狂兔科技 于 2016-11-5 03:58 編輯 1. 開(kāi)篇導(dǎo)言 本節(jié)目標(biāo):對(duì)于上篇需求分析做減法。 目標(biāo)用戶:學(xué)習(xí)過(guò)【入門(mén)篇】的同學(xué)或有一定編程經(jīng)驗(yàn)的同學(xué)。 學(xué)習(xí)目標(biāo):如果2048”就是...

1. 開(kāi)篇導(dǎo)言    
  • 本節(jié)目標(biāo):對(duì)于上篇需求分析做減法。
  • 目標(biāo)用戶:學(xué)習(xí)過(guò)【入門(mén)篇】的同學(xué)或有一定編程經(jīng)驗(yàn)的同學(xué)。
  • 學(xué)習(xí)目標(biāo):如果2048”就是一個(gè)頁(yè)面,那么開(kāi)始動(dòng)手吧!
  • 案例分析:小游戲2048。
  • 傳送門(mén):

上一篇:微信小程序教程-入門(mén)篇【1】 
下一篇:微信小程序教程-入門(mén)篇【3】

2. 對(duì)需求設(shè)計(jì)做減法

上一節(jié)的流程圖相信大家都看了。對(duì)于怎么研發(fā)自己的2048相信大家也有自己的思路和辦法。
筆者也把自己的思路在這里和大家分享一下。做減法,先做Y軸縱向,在X軸橫向。
Y軸:業(yè)務(wù)邏輯的粒度級(jí)別的放大/縮小。
X軸:業(yè)務(wù)邏輯在同一個(gè)粒度級(jí)別中的邏輯加/減。
那么對(duì)【2048】的Y軸簡(jiǎn)化后,就是一個(gè)靜態(tài)頁(yè)面。X軸簡(jiǎn)化后,去除格子。復(fù)雜度大大降低了,Let's GO!

3. 2048主頁(yè)面

微信小程序教程入門(mén)篇【2】,小程序小游戲2048實(shí)戰(zhàn)講解

實(shí)現(xiàn)流程:1. 綠色的導(dǎo)航欄部分。
                   2. 藍(lán)色的游戲frame部分。

4. 導(dǎo)航欄

微信小程序教程入門(mén)篇【2】,小程序小游戲2048實(shí)戰(zhàn)講解


  • 目錄

微信小程序教程入門(mén)篇【2】,小程序小游戲2048實(shí)戰(zhàn)講解

app.js如下:
  1. //nothing to do
  2. App({})
復(fù)制代碼

app.json如下:
  1. {
  2.   "pages":[
  3.     "pages/2048/2048"   
  4.   ],
  5.   "window":{   
  6.     "navigationBarBackgroundColor":"#ffffff",
  7.     "navigationBarTextStyle":"#000000",
  8.     "navigationBarTitleText": "Demo:2048",
  9.     "backgroundTextStyle":"light"
  10.   },
  11.   "debug": false
  12. }
復(fù)制代碼
【window】導(dǎo)航欄相關(guān)設(shè)置。

app.wxss為空。

2048.js如下:

  1. //空page
  2. Page({})
復(fù)制代碼

2048.wxml,2048wxss都為空。

5. 游戲frame部分

我們只需修改2048.wxml,2048.wxss

2048.wxml如下:
  1. <view class="container">
  2.  
  3.   <view class="game-body">
  4.     <view class="heading">
  5.               <text class="title">2048</text>
  6.               <view class="scores-container">
  7.                 <view class="score-container"></view>
  8.                       <view class="best-container"></view>
  9.               </view>
  10.     </view>
  11.  
  12.     <view class="above-game">
  13.               <text class="game-intro">你能拿到2048嗎?</text>
  14.               <text class="restart-button">新游戲</text>
  15.     </view>
  16.  
  17.     <view class="game-container">      
  18.           </view>
  19.  
  20. </view>
復(fù)制代碼
我們需要有與之配套的2048.wxss,代碼過(guò)多不在這里復(fù)制出來(lái)。請(qǐng)下載源代碼查看。

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。





重磅推薦:小程序開(kāi)店目錄

第一部分:小商店是什么

第二部分:如何開(kāi)通一個(gè)小商店

第三部分:如何登錄小商店

第四部分:開(kāi)店任務(wù)常見(jiàn)問(wèn)題

第五部分:小商店可以賣(mài)什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開(kāi)發(fā)