張艷敏 喬陽(yáng)陽(yáng) 鄭州工商學(xué)院 機(jī)械與電信工程學(xué)院

1 系統(tǒng)分析

1.1 需求分析

隨著現(xiàn)代移動(dòng)互聯(lián)網(wǎng)的飛速發(fā)展，智能手機(jī)的上網(wǎng)速度比傳統(tǒng)PC機(jī)的上網(wǎng)速度要快的多，智能手機(jī)成為了年輕人主要的休閑娛樂(lè)工具，這些必要條件使現(xiàn)在的眾多智能手機(jī)游戲應(yīng)運(yùn)而生，例如騰訊公司開發(fā)的《王者榮耀》、《陰陽(yáng)師》、《神武》、《歡樂(lè)斗地主》等一系列的比較熱門手機(jī)網(wǎng)絡(luò)游戲。為了對(duì)手機(jī)游戲資源進(jìn)行同步管理，游戲助手APP的開發(fā)迫在眉睫，游戲助手APP包括手機(jī)網(wǎng)絡(luò)游戲攻略、手機(jī)網(wǎng)絡(luò)游戲的直播、手機(jī)網(wǎng)絡(luò)游戲的裝備購(gòu)買，它不僅節(jié)約了用戶管理游戲的時(shí)間成本，為用戶通報(bào)了最新的游戲資訊信息，而且促進(jìn)了用戶之間的技術(shù)交流。

1.2 游戲助手APP的開發(fā)工具

游戲助手APP的設(shè)計(jì)主要是針對(duì)年輕人，為了提高用戶舒適、便捷的體驗(yàn)效果，將采用HTML5[、CSS3、JavaScript、Ajax技術(shù)、PHP語(yǔ)言進(jìn)行網(wǎng)絡(luò)頁(yè)面的開發(fā)，其中使用HTML5和CSS3樣式進(jìn)行手機(jī)游戲助手APP的頁(yè)面開發(fā)，JavaScript語(yǔ)言編寫腳本、完善手機(jī)游戲助手APP的事件，Ajax技術(shù)進(jìn)行前后臺(tái)的數(shù)據(jù)交互，PHP語(yǔ)言編寫手機(jī)游戲助手APP的后臺(tái)。

2 游戲助手APP的設(shè)計(jì)

2.1 系統(tǒng)功能模塊

根據(jù)現(xiàn)實(shí)需要、問(wèn)卷調(diào)查還有產(chǎn)品需求的挖掘，手機(jī)游戲助手APP主要分為首頁(yè)模塊、視頻模塊、商城模塊、我的模塊四大部分，如圖1所示。每個(gè)部分都有自己獨(dú)特的功能，使用戶了解自己關(guān)心的以及最新的游戲攻略，從而可以讓用戶可以更好、更快的獲取到游戲最新的資訊。

圖1 主要功能模塊圖

2.2 功能模塊介紹

（1）首頁(yè)模塊向用戶展示手機(jī)游戲助手所涉及到的熱門游戲公告、禮包的領(lǐng)取、游戲所在的官方網(wǎng)站正在進(jìn)行的活動(dòng)、還有游戲相關(guān)網(wǎng)站的人物視頻，使用戶更加清楚地了解現(xiàn)在游戲最近的攻略和游戲官方商城網(wǎng)站舉行的優(yōu)惠活動(dòng)，展示玩家游戲出現(xiàn)的操作，讓玩家更好的進(jìn)行游戲體驗(yàn)。

（2）視頻模塊是一些官方網(wǎng)站的推送視頻或者是一些比較優(yōu)秀的玩家進(jìn)行的游戲操作在線視頻，可以讓手機(jī)游戲助手的用戶更加直觀地了解游戲的規(guī)則，從而更好的進(jìn)行游戲；也可以促進(jìn)玩家之間的游戲技能的交流，從而提高自己的技能；還可以在休閑的時(shí)候打開視頻休閑娛樂(lè)。

（3）商城模塊是推送各個(gè)游戲官方商城最近進(jìn)行的活動(dòng)或者是最近一段時(shí)間比較熱門的裝備，讓用戶更加直觀了解游戲裝備的價(jià)值，用戶可以享受提供的免費(fèi)游戲幣福利，也可促進(jìn)手機(jī)網(wǎng)絡(luò)游戲用戶更加理性的消費(fèi)。

（4）我的模塊是進(jìn)行注冊(cè)賬戶、修改密碼、查看個(gè)人收藏的游戲的最新資訊，還可以向開發(fā)人員反饋。用戶在體驗(yàn)手機(jī)游戲助手遇到問(wèn)題時(shí)可以直接反饋給開發(fā)人員，開發(fā)人員會(huì)根據(jù)實(shí)際情況對(duì)軟件進(jìn)行修改。

3 游戲助手APP的實(shí)現(xiàn)與測(cè)試

3.1 頭部導(dǎo)航

手機(jī)游戲助手幾個(gè)重要的主頁(yè)面的頭部導(dǎo)航的制作原理和使用到的技術(shù)點(diǎn)幾乎是一樣的，主要的區(qū)別是里邊充填的文字內(nèi)容不一樣。頭部導(dǎo)航主要分為導(dǎo)航按鈕和所在頁(yè)面的提醒，鑒于CSS3彈性盒子來(lái)做移動(dòng)頁(yè)面的導(dǎo)航簡(jiǎn)單快捷，因此利用CSS3彈性盒子來(lái)制作這個(gè)導(dǎo)航。CSS3彈性盒子是CSS3專門針對(duì)移動(dòng)多媒體設(shè)備的分辨率兼容的，CSS3彈性盒子主要由彈性盒子和彈性元素組成的。

3.2 頁(yè)腳導(dǎo)航

手機(jī)助手的頁(yè)腳導(dǎo)航是APP的主要組成部分，所有的APP都會(huì)有頁(yè)腳導(dǎo)航，頁(yè)腳導(dǎo)航的實(shí)現(xiàn)利用了HTML文件，使用其中的標(biāo)簽有＜ul＞、＜li＞、＜img＞、＜p＞，也是利用CSS3的彈性盒子來(lái)完成布局，字體、圖片在移動(dòng)多媒體設(shè)備上的分辨率的變化是em這個(gè)CSS的長(zhǎng)度單位來(lái)控制的，從而實(shí)現(xiàn)點(diǎn)擊“首頁(yè)”、“視頻”、“商城”、“我的”進(jìn)行頁(yè)面的切換。

3.3 “首頁(yè)”頁(yè)面

“首頁(yè)”展示禮包公告部分的內(nèi)容，所有的頁(yè)面內(nèi)容都是通過(guò)HTML文件進(jìn)行充填的，通過(guò)CSS樣式來(lái)對(duì)頁(yè)面的內(nèi)容進(jìn)行樣式設(shè)定，包括字體的顏色、模塊的大小、背景的顏色，還有模塊之間的距離設(shè)定?！耙曨l”頁(yè)面和“商城”頁(yè)面類似于“首頁(yè)”頁(yè)面。

3.4 “我的”頁(yè)面

“我的”頁(yè)面是手機(jī)游戲助手的主要組成部分、也是手機(jī)游戲助手的主干?！拔业摹表?yè)面主要有注冊(cè)、登錄、修改密碼以及查看自己對(duì)游戲的收藏等功能，這些功能是移動(dòng)手機(jī)APP的基本功能，這一部分是用戶擁有所有個(gè)人信息的體現(xiàn)。在“我的”頁(yè)面中的我的禮包、我的訂單、我的收藏都是單獨(dú)的HTML文件，它們之間的內(nèi)容和功能都是相互獨(dú)立的，可以實(shí)現(xiàn)頁(yè)面之間的相互跳轉(zhuǎn)。我的禮包頁(yè)面是用戶可以復(fù)制禮包的驗(yàn)證編碼，從而在官方網(wǎng)站進(jìn)行禮包的領(lǐng)取；我的收藏中頁(yè)面信息是可以操作的，進(jìn)行收藏信息的更改完善；關(guān)于我們頁(yè)面是本頁(yè)的隱藏頁(yè)，主要是介紹開發(fā)玩咖手機(jī)游戲助手的目的。

“我的”頁(yè)面的開發(fā)使用了專門做CSS3動(dòng)畫的插件anmimate.min.css，使用插件做出來(lái)的動(dòng)畫更加的流暢，視覺(jué)上更加的舒服。注冊(cè)模塊使用了＜input＞標(biāo)簽和JavaScript腳本語(yǔ)言，＜input＞符合編碼的語(yǔ)義性，使用JavaScript語(yǔ)言獲?。糹nput＞框中的數(shù)值進(jìn)行后臺(tái)的存儲(chǔ)，從而和Ajax技術(shù)來(lái)進(jìn)行前后臺(tái)交互，使手機(jī)游戲助手的功能更加的完善。

3.4.1 登陸與注冊(cè)

登錄、注冊(cè)界面的實(shí)現(xiàn)首先要使用正則表達(dá)式的對(duì)輸入的手機(jī)號(hào)進(jìn)行判斷，判斷輸入的手機(jī)號(hào)是否符合現(xiàn)在手機(jī)號(hào)的命名規(guī)則，判斷手機(jī)號(hào)是否真的存在，不是用戶隨意輸?shù)囊桓Z數(shù)字，從而保障用戶注冊(cè)賬戶的真實(shí)性。登錄框、密碼框是HTML5的input框，利用JavaScript腳本語(yǔ)言獲得，當(dāng)用戶輸入的賬號(hào)（手機(jī)號(hào)）和密碼時(shí)，在JavaScript腳本語(yǔ)言中使用正則表達(dá)式進(jìn)行判斷是否符合手機(jī)號(hào)的命名規(guī)則，如果符合返回布爾值為true，然后登錄頁(yè)面的話使用Ajax技術(shù)對(duì)后臺(tái)的數(shù)據(jù)進(jìn)行對(duì)比，如果后臺(tái)擁有已注冊(cè)的手機(jī)賬號(hào)、密碼，跳轉(zhuǎn)到首頁(yè)。

3.4.2 我的禮包

我的禮包界面是“我的”頁(yè)面中＜li＞標(biāo)簽利用＜a＞標(biāo)簽的href屬性進(jìn)行的頁(yè)面跳轉(zhuǎn)，當(dāng)點(diǎn)擊我的禮包時(shí)會(huì)進(jìn)行頁(yè)面跳轉(zhuǎn)。我的禮包頁(yè)面擁有禮包的領(lǐng)取權(quán)限，可以復(fù)制驗(yàn)證碼進(jìn)行禮包領(lǐng)取。當(dāng)復(fù)制驗(yàn)證碼成功以后，我的禮包頁(yè)面會(huì)彈出驗(yàn)證碼復(fù)制成功的提示，這個(gè)是利用JavaScript語(yǔ)言的onclick事件來(lái)實(shí)現(xiàn)的，點(diǎn)擊確定彈出框會(huì)消失。

3.4.3 我的收藏

點(diǎn)擊我的收藏，跳轉(zhuǎn)頁(yè)面，點(diǎn)擊“編輯”會(huì)對(duì)當(dāng)前的頁(yè)面信息進(jìn)行修改，首先收藏的內(nèi)容前面會(huì)彈出灰色的選擇框，讓用戶點(diǎn)擊選擇，點(diǎn)擊之后，選擇框會(huì)發(fā)生相應(yīng)的變化?！?duì)號(hào)’后面的背景顏色會(huì)變成紅的，同時(shí)‘小對(duì)號(hào)’也會(huì)發(fā)生旋轉(zhuǎn)。為了更加的人性化，還設(shè)置了‘取消選擇’、‘一鍵取消選擇’兩個(gè)快捷按鈕，點(diǎn)擊‘取消按鈕’，選擇的效果消失。

3.4.4 關(guān)于我們

關(guān)于我們和其他的頁(yè)面不一樣，它只是“我的”的頁(yè)面一個(gè)獨(dú)立的模塊，剛開始的時(shí)候是被隱藏掉的，當(dāng)點(diǎn)擊‘關(guān)于我們’的時(shí)候他就會(huì)被顯示出來(lái)，同時(shí)被顯示出來(lái)的還有一個(gè)半透色的蒙版。

4 結(jié)論

1.手機(jī)游戲助手APP給用戶的體驗(yàn)效果很好，頁(yè)面符合大眾審美，節(jié)約了用戶管理游戲的時(shí)間成本，為用戶通報(bào)了最新的游戲資訊信息，促進(jìn)了用戶之間的技術(shù)交流。

2.手機(jī)游戲助手APP頁(yè)面的開發(fā)需要多種前端相關(guān)語(yǔ)言的相互配合，利用HTML5、CSS3進(jìn)行手機(jī)移動(dòng)頁(yè)面的開發(fā)，節(jié)省原生手機(jī)APP開發(fā)的時(shí)間，封裝好的APP完全可以在安卓、iOS等設(shè)備上無(wú)差別運(yùn)行，代碼的冗余度很少，加快了手機(jī)APP的運(yùn)行速度并增強(qiáng)了手機(jī)APP的安全性能。