小程序

H5 
豬，是黏黏豬，微信表情搜索“黏黏豬”； 
怪獸，是吃豆，童年的記憶。

二、H5制作小游戲過程

喜歡可以點(diǎn)個(gè)小星星。

規(guī)則：游戲的玩法如圖，按住按鈕不放，綠色滑塊、豬豬和怪獸會(huì)開始跑起來(lái)，當(dāng)滑塊減為0時(shí)松開即為勝利，若提前或者延后都屬失敗。越往后面的關(guān)卡速度越快，金幣數(shù)獲取和扣除相應(yīng)變多。

游戲?qū)崿F(xiàn)： 
滑塊、怪獸和豬豬的運(yùn)動(dòng)是使用定時(shí)器每隔一定時(shí)間修改滑塊寬度相對(duì)于外邊容器的百分比和豬豬、怪獸的left值； 
按住按鈕和松開監(jiān)聽touchstart和touchend事件實(shí)現(xiàn)； 
檢驗(yàn)是否勝利是檢查touchend觸發(fā)時(shí)滑塊的width值； 
每個(gè)關(guān)卡元素的運(yùn)動(dòng)速度即定時(shí)器的時(shí)間由當(dāng)前關(guān)卡數(shù)進(jìn)行計(jì)算； 
金幣的獲取和扣除也由當(dāng)前關(guān)卡數(shù)計(jì)算； 
游戲音樂使用H5標(biāo)簽實(shí)現(xiàn)且自動(dòng)播放； 
由于人眼很難精確地判斷是否到0以及人類的反應(yīng)速度的問題，游戲?yàn)椴煌y度的關(guān)卡設(shè)置了1-3的容差，越往后面的關(guān)卡容差越小； 
某一關(guān)通過時(shí)，下一關(guān)的按鈕變?yōu)榧せ顮顟B(tài)，本關(guān)卡仍可以繼續(xù)玩，也可以進(jìn)入下一關(guān)卡，一旦進(jìn)入下一關(guān)卡，“下一關(guān)”的按鈕變?yōu)椴豢捎脿顟B(tài)。

存在的問題： 
把頁(yè)面掛到我自己的服務(wù)器上面后，用微信訪問游戲頁(yè)面，由于我沒有申請(qǐng)域名，鏈接地址是IP地址，微信內(nèi)置的瀏覽器將我的頁(yè)面重新排版了，于是就變得不可用了； 
長(zhǎng)按手機(jī)屏幕有些手機(jī)瀏覽器會(huì)出現(xiàn)長(zhǎng)按菜單，代碼中有做相應(yīng)的處理，但是還是有兼容性問題，有些瀏覽器不適用； 
沒有做移動(dòng)端的適配，元素的尺寸在不同手機(jī)上顯示可能會(huì)有所不同。

三、小程序上都有，喜歡的話點(diǎn)個(gè)小星星。 

2. 優(yōu)點(diǎn)

使用小程序來(lái)實(shí)現(xiàn)可以避開很多瀏覽器的兼容問題了，而且也不會(huì)出現(xiàn)長(zhǎng)按菜單的情況。 
3. 關(guān)于小程序的知識(shí)

申請(qǐng)賬號(hào)，需要注意的是都是在微信公眾平臺(tái)注冊(cè)，但是和公眾號(hào)注冊(cè)的不能是同一個(gè)郵箱，注冊(cè)為小程序的登錄進(jìn)去就是小程序管理平臺(tái)，注冊(cè)為公眾號(hào)的登錄進(jìn)去就是公眾號(hào)的管理平臺(tái)。

IDE： 微信開發(fā)者工具。

小程序中的文件類型大致有四種：json、wxml、wxss、js。json文件主要用于配置項(xiàng)目和頁(yè)面；wxml是模板文件，類似HTML；wxss是樣式文件，小程序?qū)ss做了擴(kuò)充；js是腳本邏輯文件，實(shí)現(xiàn)交互。

小程序的開發(fā)和vue十分相似，模板渲染，MVVM的開發(fā)模式。

小程序的項(xiàng)目結(jié)構(gòu)： 

image.png

根目錄下的app命名的文件是項(xiàng)目的全局文件。app.json是對(duì)整個(gè)工程項(xiàng)目的全局配置，如小程序的所有頁(yè)面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間、底部 tab 等。pages字段包含的就是所有的頁(yè)面路徑。具體可參考微信小程序開發(fā)文檔。app.js中包含系統(tǒng)的全局變量和方法，例如用戶信息、頁(yè)面首次加載完成等。app.wxss是頁(yè)面的全局樣式，pages頁(yè)面中的局部樣式會(huì)覆蓋全局樣式。 
pages文件夾存放的是程序的所有頁(yè)面。例如這個(gè)項(xiàng)目中有index頁(yè)面和logs頁(yè)面，每個(gè)頁(yè)面都可以由四個(gè)文件構(gòu)成：js、json、wxml、wxss。js文件負(fù)責(zé)該頁(yè)面的邏輯交互，json文件是對(duì)該頁(yè)面的配置，wxml是頁(yè)面的結(jié)構(gòu)、wxss是頁(yè)面的樣式。 
public文件夾是我自己加進(jìn)去的，用于存放靜態(tài)資源如圖片、音樂等。 
utils文件夾存放的是一些可以引用的模塊。 
project.config.json是存放你對(duì)這個(gè)工程的一些個(gè)性化配置，如IDE的界面顏色、編譯配置等。 
項(xiàng)目真機(jī)預(yù)覽：在開發(fā)工具中有預(yù)覽按鈕，會(huì)生成一個(gè)二維碼，微信掃碼后可以在手機(jī)上體驗(yàn)小程序，但是只有開發(fā)者有權(quán)限體驗(yàn)，其他人不可以。

發(fā)布：個(gè)人賬號(hào)只能發(fā)布一個(gè)小程序，需要先填寫小程序的信息以及選擇類別，選擇后不能修改。再提交代碼后等待審核才能發(fā)布。我在選擇類別的時(shí)候?qū)㈩愋瓦x擇為了游戲，然而小程序和小游戲是有區(qū)別的，再次用開發(fā)者工具打開項(xiàng)目的時(shí)候會(huì)提示找不到game.json文件。因此項(xiàng)目就不能進(jìn)行下去了。目前小程序是有開放APPId給大家開發(fā)的，但是小游戲好像還沒有APPId。

后續(xù)：如果解決了項(xiàng)目類別選擇的修改問題，會(huì)繼續(xù)對(duì)這個(gè)小游戲進(jìn)行開發(fā)。