整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
紹一個(gè)可運(yùn)行的微信小程序登錄+支付的demo。接觸了小程序簡(jiǎn)易教程的，想必都知道我們必然有自己的后臺(tái)應(yīng)用服務(wù)器，來(lái)處理我們自己的業(yè)務(wù)邏輯、請(qǐng)求微信服務(wù)完成一定的功能。在此，我們的后臺(tái)采用java環(huán)境，本文將首先介紹環(huán)境搭建的過(guò)程，隨后介紹登錄+支付的流程及代碼。
一、后臺(tái)web服務(wù)環(huán)境搭建
1. 安裝jdk、tomcat，ICP備案的域名準(zhǔn)備。
Linux安裝jdk：https://blog.csdn.net/zhang918784312/article/details/79751283
Linux 安裝tomcat：https://www.cnblogs.com/EasonJim/p/7202844.html
經(jīng)過(guò)icp備案的域名，請(qǐng)自行準(zhǔn)備。
2.配置https，由于小程序請(qǐng)求url必須是https，故而必須配置支持https請(qǐng)求。本人采用的是在阿里云購(gòu)買(mǎi)的域名，故而采用的證書(shū)也是阿里云生成的ssl證書(shū)，可參考如下兩篇博文進(jìn)行配置。當(dāng)然，你也可以通過(guò)別的方式生成證書(shū)，更或者通過(guò)nginx作反向代理到你的服務(wù)器。
https://blog.csdn.net/qq_28189091/article/details/75078164
https://blog.csdn.net/z_xuewen/article/details/78176509
同時(shí)，務(wù)必將您的小程序域名綁定在小程序后端。登入小程序后臺(tái)，【設(shè)置】-【開(kāi)發(fā)設(shè)置】-【服務(wù)器域名】
如上兩步完成后，請(qǐng)務(wù)必確認(rèn)通過(guò)你的域名(https://...)可以展示tomcat的默認(rèn)頁(yè)之后，開(kāi)始部署我們的web服務(wù)。在此，就簡(jiǎn)單粗暴的在webapps下建立小程序的根目錄，我命名為wechatserver，在此目錄下，創(chuàng)建WEB-INFO，下面的目錄結(jié)構(gòu)如下：
classes存放自己寫(xiě)的類(lèi)的classes文件，lib存放我們項(xiàng)目依賴(lài)的jar包，logs用于存放我們的日志輸出，web.xml是我們這個(gè)項(xiàng)目的配置。demo中，我們只有一個(gè)servlet接收小程序前端請(qǐng)求，web.xml中增加配置如下：
4. log4j 應(yīng)用在開(kāi)發(fā)調(diào)試中，我們免不了需要通過(guò)打印日志進(jìn)行調(diào)試，因此在此增加了日志的使用。web.xml中增加配置：
在classes增加文件，log4j.properties，內(nèi)容如下：
log4j 在java中的引用、使用：public static Logger logger=Logger.getLogger(WechatServlet.class);logger.info(“打印信息”);
基于微信小程序工具生成的默認(rèn)hello world程序，pages下先建立目錄order，隨后在order目錄生成一個(gè)新的page，命名為order，結(jié)構(gòu)如下圖：
image
在index中增加按鈕，進(jìn)入order。index.wxml
order.xml中描述商品信息，增加支付按鈕，order.js 支付事件處理。
2. 登錄+支付 code
流程大概分為幾步：
1）登錄，獲取code（一個(gè)code只能用一次）
2）通過(guò)code獲取openid（通過(guò)請(qǐng)求服務(wù)器，由服務(wù)器請(qǐng)求微信獲取并返回小程序）。微信登錄+獲取openid接口。
3）小程序請(qǐng)求服務(wù)器進(jìn)行預(yù)下單，上送商品詳情、金額、openid。
4）服務(wù)器端接收請(qǐng)求，根據(jù)請(qǐng)求訂單數(shù)據(jù)、生成第三方訂單號(hào)，調(diào)用微信的統(tǒng)一下單接口。
5）服務(wù)器收到預(yù)下單信息后，簽名并組裝支付數(shù)據(jù)，返回給小程序。所需數(shù)據(jù)見(jiàn)：小程序支付接口
6）小程序前端發(fā)起支付，并支付完成
7）服務(wù)器收到回調(diào)。
2.1 登錄，獲取code。
2.2 通過(guò)code 獲取openid(前端)
2.2 服務(wù)器端servlet（復(fù)寫(xiě)HttpServlet的doGet doPost函數(shù)）doPost的代碼片段：
2.3 前端上送訂單信息、openid請(qǐng)求預(yù)下單（在此，為方便，訂單信息直接寫(xiě)死在服務(wù)器端了），若成功，則根據(jù)服務(wù)器端返回?cái)?shù)據(jù)發(fā)起支付。
2.4 服務(wù)器端預(yù)下單，2.5并簽名返回支付請(qǐng)求數(shù)據(jù)。
三、實(shí)戰(zhàn)中遇到的問(wèn)題
預(yù)下單和支付請(qǐng)求中，簽名的密鑰使用的是商戶(hù)密鑰，但是用code獲取openid是使用小程序?qū)?yīng)的secret key，這個(gè)可以在小程序的后臺(tái)看到。
微信小程序前端發(fā)起post請(qǐng)求到服務(wù)器端時(shí)，服務(wù)器端收不到請(qǐng)求參數(shù)。原因是：微信API接口wx.request中：
a) 對(duì)于 GET 方法的數(shù)據(jù)，會(huì)將數(shù)據(jù)轉(zhuǎn)換成 query string（encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)…）
b1) 對(duì)于 POST 方法且 header[‘content-type’] 為 application/json 的數(shù)據(jù)，會(huì)對(duì)數(shù)據(jù)進(jìn)行 JSON 序列化
b2) 對(duì)于 POST 方法且 header[‘content-type’] 為 application/x-www-form-urlencoded 的數(shù)據(jù)，會(huì)將數(shù)據(jù)轉(zhuǎn)換成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)…）
所以，如果post請(qǐng)求，為省去服務(wù)器端反序列化的操作時(shí)，可使用header[‘content-type’] 為 application/x-www-form-urlencoded 的數(shù)據(jù)。
3. 如果部署了servlet后，tomcat重啟后，需要等幾分鐘才能生效（原因是我的機(jī)器內(nèi)存比較小，而tomcat又很占用內(nèi)存資源），待熟悉tomcat 調(diào)優(yōu)。[java進(jìn)階架構(gòu)師]
學(xué)網(wǎng)頁(yè)設(shè)計(jì)與前端開(kāi)發(fā)的途徑很多，有人喜歡觀看視頻課程學(xué)習(xí)，有人則習(xí)慣閱讀書(shū)籍和文章掌握相應(yīng)的知識(shí)點(diǎn)。當(dāng)然，玩學(xué)習(xí)類(lèi)趣味游戲也是測(cè)試與提升技能的有效途徑之一。
今天我們將分享 11 個(gè)有趣的在線小游戲，通過(guò)游戲化場(chǎng)景提升你的網(wǎng)頁(yè)設(shè)計(jì)與前端開(kāi)發(fā)技能。寓教于樂(lè)，其樂(lè)無(wú)窮。如果你正在學(xué)習(xí)相關(guān)知識(shí)，不妨試試哦。
這是一款考驗(yàn)?zāi)銓徝馈⒍床炝Φ脑诰€網(wǎng)頁(yè)游戲。你需要從兩個(gè) iOS 界面中選出更正確或恰當(dāng)?shù)脑O(shè)計(jì)，網(wǎng)站除了告訴你選項(xiàng)的對(duì)錯(cuò)，還支持對(duì)比兩者之間的差異。 隨著游戲難度的增加，界面的差異會(huì)越來(lái)越小。考驗(yàn)?zāi)阊哿?iOS 界面敏感度的時(shí)候到了，速速來(lái)挑戰(zhàn)吧。
地址：https://cantunsee.space/
掌握字符間距是印刷師和設(shè)計(jì)師必學(xué)的技能之一，Kern Type 是一款幫助你在線練習(xí)調(diào)整字符間距的游戲。你需要把字母移動(dòng)到合適的位置，點(diǎn)擊「Compare」即可了解正確的字符間距，并得到相應(yīng)的分值。當(dāng)你完成 10 個(gè)測(cè)試后，也會(huì)得到最終的測(cè)試總分。
地址：https://type.method.ac/
對(duì)于設(shè)計(jì)師來(lái)說(shuō)，提升西文字體造型能力，能幫助你更深刻的理解字體設(shè)計(jì)與排版。Shape Type 這款游戲基于鋼筆工具，你需要拖動(dòng)滑竿使字體邊緣達(dá)到平滑與飽滿的狀態(tài)。在練習(xí)的過(guò)程中，你可以了解字體的起源，例如字體類(lèi)型、字體設(shè)計(jì)師與年代等信息，還能夠通過(guò)繪制比較加深對(duì)字體筆畫(huà)、結(jié)構(gòu)的認(rèn)知。
地址：https://shape.method.ac
在使用 PS 的時(shí)候，不免會(huì)用到鋼筆工具。對(duì)于剛接觸 PS 的萌新朋友來(lái)說(shuō)，如何快速掌握鋼筆工具的使用方式呢？不妨試試 The Bézier Game 這款游戲。
根據(jù)動(dòng)畫(huà)演示，你需要利用鋼筆工具繪制圖形。當(dāng)然如果你忘記了前面的步驟，系統(tǒng)會(huì)有相應(yīng)的提示。但隨著難度的增加，你就要結(jié)合之前學(xué)到的方法，獨(dú)立繪制更復(fù)雜的圖形了。
地址：https://bezier.method.ac/
準(zhǔn)備好訓(xùn)練你的色彩辨識(shí)和感知技巧了嗎？那么，快來(lái)試試在線交互游戲 Color 吧。在這款游戲中，你需要快速完成常見(jiàn)的配色測(cè)試，例如色調(diào)、飽和度、互補(bǔ)色、三色、四色等模式測(cè)試。分值越能達(dá)到「Perfect」，你的顏色感知能力也就越出眾哦。
地址：https://color.method.ac/
Pixactly 是一個(gè)在線測(cè)試像素尺寸的網(wǎng)站，通過(guò)互動(dòng)體驗(yàn)幫助你直觀的了解像素的尺寸大小。你需要根據(jù)像素的寬、高提示來(lái)繪制畫(huà)框，并能及時(shí)得到反饋。通過(guò) 5 項(xiàng)測(cè)試，能夠提高你對(duì)像素尺寸的把控能力。
地址：http://pixact.ly/
前端開(kāi)發(fā)過(guò)程中，會(huì)接觸到各種類(lèi)型的編碼，了解 Hex（十六進(jìn)制）編碼是前端開(kāi)發(fā)者需要掌握的知識(shí)之一。Hex Invaders 這款游戲則通過(guò)互動(dòng)的方式，幫助你直觀的掌握 Hex 編碼。你需要根據(jù)頁(yè)面上方出現(xiàn)的 Hex 編碼，選擇正確的顏色來(lái)完成游戲。隨著難度的增加，關(guān)卡敵人會(huì)越來(lái)越多，挑戰(zhàn)也變得更加燒腦哦。
地址：http://www.hexinvaders.com/
這是一款相當(dāng)有趣的小青蛙跳荷葉游戲，你可以邊玩游戲邊學(xué)習(xí) Flex 布局的相關(guān)知識(shí)。你需要使用justify-content屬性，幫助青蛙跳到荷葉上。隨后你需要按照游戲提示，完成其他屬性的學(xué)習(xí)。游戲共有 24 個(gè)關(guān)卡，將幫助你更直觀的掌握 Flex 布局。
地址：https://flexboxfroggy.com/
如果你想提升 Flexbox 技能熟練度，可以嘗試 Flexbox Defense 這款游戲。這是一款經(jīng)典的塔防游戲，你必須使用 CSS 定位塔樓的位置，并抵御敵人的進(jìn)攻。如果你通關(guān)了 Flexbox Froggy，再?lài)L試下這款游戲，你的 Flex 布局技能勢(shì)必能更上一層樓。
地址：http://www.flexboxdefense.com/
還再利用枯燥的文檔學(xué)習(xí)網(wǎng)格布局嗎？不如嘗試下 Grid Garden 在線游戲。在這款游戲中，你需要利用網(wǎng)格布局的相應(yīng)屬性，完成胡蘿卜澆水的任務(wù)。游戲共 28 個(gè)關(guān)卡，你可以掌握網(wǎng)格布局屬性的全部用法，幫助你入門(mén)網(wǎng)格布局。
地址：http://cssgridgarden.com
如果你是前端萌新，正在學(xué)習(xí) CSS 選擇器相關(guān)知識(shí)，那么這款游戲一定適合你。通過(guò)這款游戲，你可以學(xué)習(xí)到各種 CSS 選擇器的用法，例如 CSS 類(lèi)選擇器、子元素選擇器、偽類(lèi)選擇器等。挑戰(zhàn) 32 個(gè)關(guān)卡，幫助你更好的掌握 CSS 選擇器。
地址：http://flukeout.github.io
唐人“諾亞方舟”計(jì)劃全線啟動(dòng)
新型冠狀病毒引起的肺炎疫情突發(fā)，線下校區(qū)停課，學(xué)生不敢出門(mén)，就業(yè)實(shí)習(xí)無(wú)法進(jìn)行，家長(zhǎng)學(xué)生焦慮多，只能宅在家里……
危難關(guān)頭，唐人設(shè)計(jì)學(xué)校啟動(dòng)“諾亞方舟”計(jì)劃——我們面向職場(chǎng)人士、大學(xué)生、待業(yè)等朋友，免費(fèi)提供長(zhǎng)達(dá)2個(gè)月的線上VIP直播課程服務(wù)；面向所有想學(xué)設(shè)計(jì)的朋友，提供優(yōu)質(zhì)免費(fèi)的UI設(shè)計(jì)、室內(nèi)設(shè)計(jì)、平面設(shè)計(jì)等課程和配套實(shí)操、講解服務(wù)。請(qǐng)QQ號(hào)掃描下方二維碼，登陸唐人“諾亞方舟”，好好修煉內(nèi)功，打好疫情期間個(gè)人提升時(shí)光！
武漢加油
、準(zhǔn)備條件
1.1、設(shè)計(jì)師應(yīng)該注意的地方
移動(dòng)端最大的問(wèn)題在于多種設(shè)備，多種平臺(tái)，多種尺寸，當(dāng)我們?cè)谧鍪謾C(jī)端H5網(wǎng)頁(yè)設(shè)計(jì)稿時(shí)（當(dāng)然包含微信端的H5網(wǎng)頁(yè)設(shè)計(jì)），如果沒(méi)有做過(guò)類(lèi)似的移動(dòng)端的設(shè)計(jì)，UI設(shè)計(jì)師和前端工程師肯定會(huì)糾結(jié)的。那么多手機(jī)屏幕尺寸，設(shè)計(jì)稿應(yīng)該按照哪一個(gè)尺寸作為標(biāo)準(zhǔn)尺寸。現(xiàn)在已經(jīng)有很多2K分辨率的手機(jī)屏幕了，設(shè)計(jì)稿是不是也要把寬高跟著最大分辨率來(lái)設(shè)計(jì)。顯然不是。先看一下市面上主流的手機(jī)尺寸：
我們?cè)贖5開(kāi)發(fā)初期的時(shí)候，進(jìn)行了各種尺寸的設(shè)計(jì)稿嘗試，比如1倍的（320X480）、2倍的（640X1136）、3倍的（1242X2280）像素。最終得出的試驗(yàn)結(jié)果是。H5的設(shè)計(jì)稿一般設(shè)計(jì)為640X1136即可。即iphone 5s的物理像素（也即是5、5c以及將要發(fā)布的5se的物理像素，這一系列手機(jī)在iphone的占有率中是最高的）， 既滿足了retina用戶(hù)的顯示需求，又能降低2G、3G用戶(hù)加載圖片需要的帶寬。不過(guò)，你若有更高質(zhì)量的追求，750*1334像素的設(shè)計(jì)稿也是一個(gè)不錯(cuò)的選擇。
1.2、開(kāi)發(fā)者應(yīng)該注意的地方
不管在手機(jī)瀏覽器還是在微信客戶(hù)端或者騰訊新聞客戶(hù)端開(kāi)發(fā)，內(nèi)容大都不能全屏顯示的。在底部或者頂部多多少少會(huì)有一個(gè)狀態(tài)欄的占位，并不能展示手機(jī)的全部尺寸。一些手機(jī)瀏覽器底部會(huì)有導(dǎo)航，也有些會(huì)在頂部和底部都有占位，比如導(dǎo)航欄、狀態(tài)欄。頂部的占位會(huì)把內(nèi)容往下擠，底部的占位會(huì)把內(nèi)容遮蓋住。所以，我們?cè)谶M(jìn)行H5頁(yè)面內(nèi)容規(guī)劃布局設(shè)計(jì)的時(shí)候，不能把重要內(nèi)容放在太偏下或者太偏上的位置，否則前端布局時(shí)可能出現(xiàn)內(nèi)容顯示不全的情況。如果有滑動(dòng)的交互操作，用戶(hù)很有可能觸發(fā)瀏覽器頁(yè)面的滑動(dòng)，導(dǎo)致較差的用戶(hù)體驗(yàn)。
下圖為騰訊新聞客戶(hù)端和微信內(nèi)置瀏覽器的占位高度，在640x1136（iphone5s）上他們的高度是一樣的。如果你的頁(yè)面高度超過(guò)1008px，頁(yè)面就會(huì)出現(xiàn)滾動(dòng)功能。
除去頂部大概130px的像素，底部大概150左右的像素，內(nèi)容的安全高度大概有850左右，怎么布局頁(yè)面，具體要看你的項(xiàng)目主要在什么環(huán)境上運(yùn)行。
2、開(kāi)始動(dòng)手
2.1、頁(yè)面流程
當(dāng)我們?cè)谕嬉粋€(gè)簡(jiǎn)單的H5游戲的時(shí)候，其流程通常會(huì)包含以下步驟：
1、 出現(xiàn)一個(gè)載入進(jìn)度條，載入一些必須的圖片、音頻、字體等文件；
2、 顯示主菜單，提示用戶(hù)開(kāi)始游戲；
3、 進(jìn)入游戲主邏輯。在游戲過(guò)程中，當(dāng)用戶(hù)勝利或者失敗，或是觸發(fā)了某個(gè)按鈕或者按鍵時(shí)，游戲會(huì)退出，顯示結(jié)果頁(yè)面。
4、用戶(hù)分享游戲或者關(guān)閉游戲。
也就是說(shuō)一個(gè)完整的H5游戲，至少有3個(gè)頁(yè)面不可或缺，就是加載頁(yè)、游戲頁(yè)、結(jié)果頁(yè)。由此也可以延伸出多個(gè)頁(yè)面，比如開(kāi)始頁(yè)，分享頁(yè)等。
2.2、資源的加載
區(qū)別于普通的網(wǎng)頁(yè)的開(kāi)發(fā)，H5游戲需要大量的視覺(jué)聽(tīng)覺(jué)素材，并且用戶(hù)的網(wǎng)絡(luò)的帶寬有限。當(dāng)你使用了很多的圖片、聲音、視頻以及媒體文件的時(shí)候，用戶(hù)會(huì)花費(fèi)一些時(shí)間等待瀏覽器從服務(wù)器下載。 如果在編寫(xiě)游戲時(shí)， 你不把它放在心上，不提前加載而直接使用， 等你開(kāi)發(fā)完游戲到真實(shí)的用戶(hù)場(chǎng)景上運(yùn)行時(shí)，你就會(huì)碰到問(wèn)題多多，因?yàn)閳D片和聲音文件是異步加載的，你的JavaScript代碼會(huì)在資源全部加載完成前執(zhí)行。這常常導(dǎo)致一個(gè)紅叉的圖片在上躥下跳，聲音效果在需要時(shí)不播放或者延遲很久冒出來(lái)一個(gè)聲音. 好的開(kāi)發(fā)習(xí)慣是創(chuàng)建一個(gè)預(yù)加載器，延后腳本代碼的執(zhí)行，直到所有的資源都下載完畢為止，這個(gè)時(shí)候才放出游戲的開(kāi)始按鈕，讓用戶(hù)參與游戲。
我們經(jīng)常會(huì)看到，一些站點(diǎn)在首次進(jìn)入的時(shí)候會(huì)先顯示一個(gè)進(jìn)度條，等資源加載完畢后再呈現(xiàn)頁(yè)面，進(jìn)度條大概像這樣：
以圖片的加載為例，大致的代碼應(yīng)該是這樣：
至于預(yù)加載的技術(shù)原理，其實(shí)也相當(dāng)簡(jiǎn)單，就是維護(hù)一個(gè)資源列表，挨個(gè)去加載列表中的資源，然后在每個(gè)資源加載完成的回調(diào)函數(shù)中更新進(jìn)度即可。
當(dāng)前加載完的資源個(gè)數(shù)/pic總數(shù)*100，就是加載進(jìn)度的百分比了。
當(dāng)然，我們沒(méi)必要手動(dòng)寫(xiě)自己的加載器，很多優(yōu)秀的游戲框架已經(jīng)幫我們做到了，比如phaser，下面是phaser實(shí)現(xiàn)預(yù)加載的代碼，具體的示例點(diǎn)我，點(diǎn)我
在上述的例子中，我們先創(chuàng)建一個(gè)游戲?qū)ο螅缓笸@個(gè)游戲?qū)ο笾刑砑恿藘蓚€(gè)方法，boot方法執(zhí)行的時(shí)候準(zhǔn)備了一張進(jìn)度條圖片，loaderState方法執(zhí)行的時(shí)候，加載游戲所需的圖片，并在頁(yè)面上顯示當(dāng)前的進(jìn)度。在多關(guān)卡的游戲中，加載的設(shè)置尤為重要。
3、理解游戲
3.1、認(rèn)識(shí)phaser
對(duì)于一款游戲來(lái)說(shuō)，框架就是它的基石。好的框架能是開(kāi)發(fā)者利器，能夠幫助開(kāi)發(fā)者做出強(qiáng)有力的，跨瀏覽器的游戲，能給廣大玩家?guī)?lái)更精致的作品。Phaser是一款專(zhuān)門(mén)用于移動(dòng)及桌面的HTML5 2D游戲開(kāi)發(fā)的開(kāi)源免費(fèi)框架，內(nèi)置游戲物理引擎，它也就是傳說(shuō)中100行代碼之內(nèi)搞定Flappy Bird的神器。通過(guò)這個(gè)框架我們可以很容易地開(kāi)發(fā)桌面和移動(dòng)的小游戲。接下來(lái)我會(huì)以這個(gè)框架為基礎(chǔ)，了解游戲的開(kāi)發(fā)知識(shí)。
你可以點(diǎn)擊這里獲取phaser源碼。點(diǎn)我，點(diǎn)我！
Phaser是一個(gè)單獨(dú)的js文件，你可以通過(guò)script的標(biāo)簽來(lái)使用它。
<script type="text/javascript" src="phaser.js"></script>
3.2、游戲開(kāi)發(fā)的世界觀
游戲的界面分三個(gè)層次，世界、舞臺(tái)和攝像機(jī)。如果把游戲看做通過(guò)手機(jī)觀看的一部話劇，話劇都是在舞臺(tái)上進(jìn)行表演的，舞臺(tái)的背后是世界。我們看到的畫(huà)面都是通過(guò)現(xiàn)場(chǎng)的攝像機(jī)提供給我們的。攝像機(jī)有一個(gè)視角，這個(gè)視角到哪里，我們就能看到哪里的畫(huà)面，游戲中所有看的見(jiàn)的東西，都是在舞臺(tái)中的。可以把舞臺(tái)看成游戲中所有對(duì)象最頂層的一個(gè)容器，然而舞臺(tái)下面就是世界了，可以把它看成僅次于舞臺(tái)的一個(gè)頂層容器，世界與舞臺(tái)不同的地方在于，舞臺(tái)的大小是你可視元素（對(duì)象）的大小，是固定大小的，但是世界確實(shí)是可以改變大小的，甚至是無(wú)限大的，而且可以隨時(shí)設(shè)置成我們想要的大小，世界默認(rèn)的大小是舞臺(tái)的大小，我們看到的畫(huà)面都是通過(guò)攝像機(jī)對(duì)象得到的，攝像機(jī)對(duì)象有個(gè)視角范圍，這個(gè)范圍跟舞臺(tái)的大小范圍是一樣的，如果世界的范圍是大于舞臺(tái)的，那么攝像機(jī)就可以在世界中任意移動(dòng)了，移動(dòng)到不同的位置，我們就能看到不同的東西。
所有展示的東西，都在舞臺(tái)上，世界有多大，攝像機(jī)就可以走多遠(yuǎn)，改變世界的大小，攝像機(jī)才可以在舞臺(tái)上移動(dòng)。世界限制你的范圍，舞臺(tái)給你準(zhǔn)備素材，攝像機(jī)展示多彩的界面。理解了世界、舞臺(tái)、攝像機(jī)的概念，面向?qū)ο蟮挠螒蚓幊叹秃美斫舛嗔恕?/p>
游戲?qū)ο螅篻ame
可以通過(guò)以下代碼，創(chuàng)建一個(gè)寬為640，高為1136的canvas標(biāo)簽，canvas的父標(biāo)簽是id=“gamezone”的div，當(dāng)創(chuàng)建完畢后，生成一個(gè)game對(duì)象，然后會(huì)直接執(zhí)行state對(duì)象中的方法。
var game=new Phaser.Game(
640,1136,Phaser.CANVAS,'gamezone',state
);
舞臺(tái)：game.stage
世界：game.world
攝像機(jī)：game.camera
通過(guò)代碼，我們可以更好的理解游戲的世界，具體的示例，點(diǎn)我，點(diǎn)我！使用前后左右鍵可以移動(dòng)攝像機(jī)的視角，點(diǎn)擊屏幕可以把視野聚焦到火雞身上。
3.3、游戲場(chǎng)景的生命周期
場(chǎng)景：game.state
場(chǎng)景指的是游戲中不同的界面或內(nèi)容，比如游戲菜單界面為一個(gè)場(chǎng)景，真正玩游戲的界面為一個(gè)場(chǎng)景，不同的關(guān)卡又是不同的場(chǎng)景等等。場(chǎng)景能把一個(gè)復(fù)雜的游戲分成許多小塊，各個(gè)場(chǎng)景可以獨(dú)立出來(lái)，從而簡(jiǎn)化游戲的開(kāi)發(fā)。游戲中的場(chǎng)景概念更加廣泛，例如一個(gè)只是執(zhí)行某些準(zhǔn)備工作的但是沒(méi)有實(shí)質(zhì)的畫(huà)面顯示出來(lái)的state（狀態(tài)），我們也把它叫做一個(gè)場(chǎng)景。一個(gè)游戲正是由眾多場(chǎng)景所組成的。當(dāng)我們創(chuàng)建一個(gè)游戲?qū)ο蠛螅@只是一個(gè)空的游戲，里面什么東西都沒(méi)有，接下來(lái)往游戲里添加場(chǎng)景，并在不同的條件下切換場(chǎng)景，這樣，一個(gè)個(gè)場(chǎng)景就構(gòu)成了不同的游戲。
第一段代碼示例中的
就是添加場(chǎng)景和啟動(dòng)場(chǎng)景。
場(chǎng)景的添加可以隨意的，不按順序，場(chǎng)景的啟動(dòng)也是，滿足條件后觸發(fā)即可，有些場(chǎng)景用戶(hù)在結(jié)束游戲后都看不到也用不到，比如游戲的商店的場(chǎng)景（場(chǎng)景3），但是它確確實(shí)實(shí)存在過(guò)的。
把一個(gè)場(chǎng)景單拿出來(lái)，查看場(chǎng)景的內(nèi)部的代碼，代碼循環(huán)：
每一個(gè)場(chǎng)景都會(huì)擁有這一個(gè)到五個(gè)方法，preload、create、update、render至少要存在一個(gè)，其中，update和render會(huì)循環(huán)執(zhí)行，直到下一個(gè)場(chǎng)景開(kāi)始。為什么要這么設(shè)計(jì)呢？舉個(gè)例子來(lái)說(shuō)，網(wǎng)速是H5的短板，可以在在游戲啟動(dòng)時(shí)只加載主菜單所需的資源，以提高游戲啟動(dòng)的速度。然后在每進(jìn)入一關(guān)時(shí)，加載這一關(guān)所必須的資源。這樣能更好的改善用戶(hù)體驗(yàn)。
3.4、元素
理解完世界和場(chǎng)景這兩大塊，算是理解游戲開(kāi)發(fā)的70%了，剩下的就是些細(xì)微的東西了，讓我們先對(duì)它有一些認(rèn)識(shí)，等使用的時(shí)候可以再查手冊(cè)。
元素就是游戲的顯示對(duì)象，顧名思義就是能夠在舞臺(tái)上顯示的對(duì)象，也就是我們?cè)谟螒蛑兴芸吹降臇|西，我們只有了解了這些顯示對(duì)象，才能做出一個(gè)好游戲。
文字（Text）：
我們可以通過(guò)文本對(duì)象，顯示瀏覽器默認(rèn)的字體和你通過(guò)css加載的字體，它是對(duì)canvas文本的的一個(gè)包裝。
圖形（Graphics）：
圖形對(duì)象是對(duì)canvas繪圖的一個(gè)包裝，簡(jiǎn)便快捷的繪制出多邊形。
圖像（Image）：
圖像是一個(gè)輕量級(jí)對(duì)象，你可以使用它來(lái)顯示任何不需要物理引擎或者動(dòng)畫(huà)的任務(wù)東西。它可以旋轉(zhuǎn)、縮放、剪切，并接收輸入事件。它可以完美的用于標(biāo)識(shí)、背景、簡(jiǎn)單的按鈕和其他非精靈類(lèi)圖形。
精靈（Sprite）：
精靈是游戲的生命體，幾乎可用于所有的可視化物體。基本上，精靈是有一套坐標(biāo)和渲染在畫(huà)布上的紋理所組成。精靈也包括了一些額外的屬性，例如物理移動(dòng)、輸入處理、事件、動(dòng)畫(huà)等等。
瓦片（TileSprite）：瓦片精靈是個(gè)有著重復(fù)紋理的精靈。紋理可以被滾動(dòng)、縮放，并且自動(dòng)包裹邊緣。請(qǐng)注意，TileSprites 和普通的精靈默認(rèn)沒(méi)有輸入處理方法和物理引擎剛體，兩者都必須要啟用后才會(huì)具有這些特性。
組：（Group）
組是一個(gè)用于顯示各種對(duì)象（包括 Sprites 和 Images）的容器。我們可以把許多對(duì)象放進(jìn)一個(gè)組里，然后就可以使用組提供的方法對(duì)這些對(duì)象進(jìn)行一個(gè)批量或是整體的操作。比如要使組里的對(duì)象同意進(jìn)行一個(gè)位移，只需要對(duì)組進(jìn)行位移就可以了，又比如要對(duì)組里的所有對(duì)象都進(jìn)行碰撞檢測(cè)，那么就只需要對(duì)這個(gè)組對(duì)象進(jìn)行碰撞檢測(cè)就行了。
接下來(lái)以瓦片精靈為例，講述各個(gè)元素的使用。瓦片精靈類(lèi)似于css中的背景平鋪，具體事例點(diǎn)我，點(diǎn)我，這里所有大背景圖，都是有一張小小的瓦片拼接出來(lái)的，按上下左右可以移動(dòng)視角。
3.5、物理引擎
若要使一個(gè)游戲更逼真，那一定離不開(kāi)物理引擎，物理引擎是通過(guò)為游戲中的物體賦予真實(shí)的物理屬性，計(jì)算運(yùn)動(dòng)、旋轉(zhuǎn)和碰撞之后的效果。就是把現(xiàn)實(shí)世界的牛頓定律，應(yīng)用到虛擬世界當(dāng)中去。物理引擎是獨(dú)立于游戲引擎存在的一個(gè)庫(kù)。物理引擎的種類(lèi)很多，例如box2d，cocos，three等，各有優(yōu)劣，各有擅長(zhǎng)。Phaser就內(nèi)置了三種物理引擎arcade、ninja、P2（pixi 2d）。P2在這里要單獨(dú)提一下，P2作為一個(gè)JS的2D渲染器，它的目標(biāo)是提供一個(gè)快速的、輕量級(jí)而且是兼任所有設(shè)備的2D庫(kù)。對(duì)于支持webgl的瀏覽器，P2將使用webgl繪圖，不支持webgl的瀏覽器就降級(jí)至canvas，Pixi渲染器可以使開(kāi)發(fā)者享受到硬件加速，但并不需要了解WebGL。進(jìn)當(dāng)然不限于這些引擎，你可以另外添加自己需要的物理引擎。下面是物理引擎的一個(gè)實(shí)例。
事例中對(duì)廚師和火雞進(jìn)行碰撞檢測(cè)，類(lèi)似于超級(jí)瑪麗的踩怪物，廚師踩到火雞是，由于火雞是剛體，然后就會(huì)廚師就會(huì)反彈。當(dāng)關(guān)閉火雞的剛體屬性后，廚師就直接從火雞中穿過(guò)去了，與他碰撞的是世界的邊界了。具體的示例，點(diǎn)我，點(diǎn)我！
3.6、動(dòng)畫(huà)
動(dòng)畫(huà)能夠使游戲的畫(huà)面更流暢。動(dòng)畫(huà)分兩種，一種是補(bǔ)間動(dòng)畫(huà)，一種是逐幀動(dòng)畫(huà)。
在做動(dòng)畫(huà)時(shí)，我們只需要在動(dòng)畫(huà)的開(kāi)頭和結(jié)尾設(shè)定好狀態(tài)，在中間只需要做一些過(guò)渡，就能實(shí)現(xiàn)圖畫(huà)的運(yùn)動(dòng)；插入中間的過(guò)渡是由計(jì)算機(jī)自動(dòng)運(yùn)算而得到的。這種動(dòng)畫(huà)叫做補(bǔ)間動(dòng)畫(huà)。在phaser中，Tween對(duì)象就是專(zhuān)門(mén)用來(lái)實(shí)現(xiàn)補(bǔ)間動(dòng)畫(huà)的。通過(guò)game.add的tween方法得到一個(gè)Tween對(duì)象,這個(gè)方法的參數(shù)是需要進(jìn)行補(bǔ)間動(dòng)畫(huà)的物體。然后我們可以使用Tween對(duì)象的to方法來(lái)實(shí)現(xiàn)補(bǔ)間動(dòng)畫(huà)。
在例子中，我們?cè)O(shè)定了一個(gè)圖片，讓它在兩個(gè)點(diǎn)之間來(lái)回走動(dòng)，具體事例，點(diǎn)我，點(diǎn)我。
如果想實(shí)現(xiàn)更復(fù)雜一點(diǎn)的動(dòng)畫(huà)，那就需要逐幀動(dòng)畫(huà)了。
不同于補(bǔ)間動(dòng)畫(huà)，逐幀動(dòng)畫(huà)的每一幀都需要單獨(dú)制定，而不像補(bǔ)間動(dòng)畫(huà)那樣只需要制定開(kāi)始和結(jié)束的那兩個(gè)關(guān)鍵幀，同時(shí)逐幀動(dòng)畫(huà)是通過(guò)圖片來(lái)實(shí)現(xiàn)的，我們可以給它的每一幀都指定一張圖片，然后這些幀連續(xù)起來(lái)播放，就形成了一個(gè)動(dòng)畫(huà)。
下圖準(zhǔn)備了一張含有4幀圖片的圖片，把這4張圖連起來(lái)一起循環(huán)播放，就成了一個(gè)動(dòng)畫(huà)。
我們把籃球的序列圖加載成一個(gè)sprite對(duì)象，它有個(gè)animations屬性，該對(duì)象有一個(gè)add方法，用來(lái)添加動(dòng)畫(huà)，還有一個(gè)play方法，用來(lái)播放動(dòng)畫(huà)。這樣，一個(gè)循環(huán)變動(dòng)的籃球就實(shí)現(xiàn)了。具體示例，點(diǎn)我，點(diǎn)我！
4、小技巧
4.1、用ps切完設(shè)計(jì)圖后，原圖對(duì)于移動(dòng)端來(lái)說(shuō)偏大，可以使用tinypng（tinypng.com）進(jìn)行壓縮，這里的圖片壓縮還是相當(dāng)好用，可以節(jié)省用戶(hù)不少帶寬。也可以使用騰訊智圖（zhitu.tencent.com）來(lái)進(jìn)行壓縮，區(qū)別于tinypng，它能為你提供高大上WebP格式的圖片。
4.2、在進(jìn)行頁(yè)面布局的時(shí)候，脫離設(shè)備，按照640x1136像素進(jìn)行布局，然后在頁(yè)面的meta里加入
進(jìn)行0.5倍縮放。這時(shí)候屏幕能適應(yīng)320x568寬度的手機(jī)屏，對(duì)于比較寬的手機(jī)，會(huì)有些黑邊。你也可以通過(guò)phaser進(jìn)行縮放。
scaleMode會(huì)更改canvas的大小達(dá)到適配的目的。
4.3、如果你想學(xué)習(xí)phaser，這里有650+的例子和文檔，你也可去百度搜一篇Flappy Bird開(kāi)發(fā)的教程，這樣的學(xué)習(xí)會(huì)更高效。
5、結(jié)尾
當(dāng)試著用百度搜索了一些“H5游戲開(kāi)發(fā)”之后，發(fā)現(xiàn)網(wǎng)上教程很多，什么“45分鐘學(xué)會(huì)H5游戲開(kāi)發(fā)”，“100行代碼做個(gè)H5游戲”比比皆是，于是就改了主意，從另一角度來(lái)闡釋游戲開(kāi)發(fā)。H5游戲開(kāi)發(fā)的思路大都是來(lái)自于Flash，F(xiàn)lash有一套現(xiàn)成的開(kāi)發(fā)流程，把它的思想理解之后，對(duì)于H5游戲開(kāi)發(fā)好處多多。再次把焦點(diǎn)回到市場(chǎng)上來(lái)，“今年將是H5游戲的元年！”，這個(gè)口號(hào)一直喊了5年，市場(chǎng)漸漸疲軟。直到2016年第一款千萬(wàn)級(jí)別的產(chǎn)品出世，讓游戲行業(yè)重新認(rèn)識(shí)到原來(lái)H5游戲也是可以賺錢(qián)的。以現(xiàn)在的眼光來(lái)看待H5游戲行業(yè)，無(wú)論從技術(shù)層面還是用戶(hù)層面來(lái)講，H5游戲的市場(chǎng)都呈現(xiàn)越來(lái)越廣闊的狀態(tài)。
作者：劉春鵬 騰訊前端工程師。騰訊網(wǎng)前端開(kāi)發(fā)工程師，騰訊網(wǎng)首頁(yè)、天天快報(bào)WEB版項(xiàng)目技術(shù)負(fù)責(zé)人，致力于HTML5頁(yè)面開(kāi)發(fā)。
原文發(fā)布于微信公眾號(hào) - 騰訊大講堂（TX_DJT）
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
