（一）PhaserJS 簡介
PhaserJs是一款專門用于桌面及移動(dòng)HTML 2D游戲開發(fā)的開源免費(fèi)框架，提供JavaScript和TypeScript雙重支持，內(nèi)置游戲?qū)ο蟮奈锢韺傩裕捎肞ixi.js引擎以加快Canvas和WebGL渲染，基于瀏覽器支持可自由切換。完全支持Web音頻，支持多點(diǎn)觸控、鍵盤、鼠標(biāo)及MSPointer事件。快速、免費(fèi)、易于維護(hù)，使用Phaser來開發(fā)2D小游戲的優(yōu)勢顯而易見。
（二）營銷游戲介紹
游戲概括：長按購物車，左右拖動(dòng)接住從天而降的產(chǎn)品，手越快，得分越高，贏取禮包機(jī)會(huì)越大
針對(duì)12 ? 8唯品會(huì)周年慶，運(yùn)營公眾號(hào)推出一個(gè)營銷頁面，來引導(dǎo)促進(jìn)平臺(tái)用戶消費(fèi)。這種h5營銷是很多公眾號(hào)運(yùn)營人員選擇的營銷方式。怎樣引導(dǎo)促進(jìn)平臺(tái)用戶，不僅考驗(yàn)方案策劃者的idea及設(shè)計(jì)人員設(shè)計(jì)吸引眼球的作品，也是考驗(yàn)作為前端開發(fā)的我們，如何高效還原設(shè)計(jì)作品，提高整個(gè)頁面的性能。特別是對(duì)于游戲、動(dòng)畫，性能體驗(yàn)至關(guān)重要。
（三）游戲部分截圖
（四）關(guān)鍵代碼
1，實(shí)例化game對(duì)象
Phaser.Game函數(shù)參數(shù)解釋：
Phaser.Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)
width：游戲?qū)挾?，即渲染游戲Canvas畫布的寬度；
height：游戲高度，即渲染游戲Canvas畫布的高度；
renderer：渲染游戲方式，Phaser.CANVAS 為使用html5畫布，Phaser.WEBGL 為使用性能更加好的WebGL來渲染，Phaser.AUTO為自動(dòng)偵測，如果瀏覽器支持WebGL則使用WebGL,否則使用Canvas；
parent：放置canvas的父元素，既可以為元素id，也可以為dom本身；
state：即游戲用到的各種場景，可以為js對(duì)象，也可以是函數(shù)，只要包含preload、create、update這其中的任何一個(gè)；
transparent：是否使用透明的Canvas背景；
antialias：抗鋸齒，默認(rèn)為true；
physicsConfig：游戲物理系統(tǒng)配置參數(shù)
2，創(chuàng)建各種場景，即state
備注：WI = window.innerWidth;HI = window.innerHeight; rateX = WI /750; rateY = HI/1218（適配手機(jī)）
preload：用來加載資源，是最先會(huì)被執(zhí)行的
create：初始化以及構(gòu)建場景，等到preload執(zhí)行完畢才會(huì)被執(zhí)行
update：更新函數(shù)，會(huì)在游戲的每一幀都來執(zhí)行，以此來創(chuàng)造一個(gè)動(dòng)態(tài)的游戲
（五）遺留問題
因項(xiàng)目時(shí)間緊張，沒有很深入研究過PhaserJs，所以在最后發(fā)布生產(chǎn)，存在遺留問題。
整個(gè)Canvas畫布，圖片顯示模糊，即使已經(jīng)設(shè)置抗鋸齒：antialias：true，但仍圖片不清晰。
如有知道解決方法的朋友，歡迎交流。
