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

1 系統(tǒng)分析

1.1 需求分析

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

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

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

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

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

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

圖1 主要功能模塊圖

2.2 功能模塊介紹

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

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

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

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

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

3.1 頭部導(dǎo)航

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

3.2 頁腳導(dǎo)航

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

3.3 “首頁”頁面

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

3.4 “我的”頁面

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

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

3.4.1 登陸與注冊

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

3.4.2 我的禮包

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

3.4.3 我的收藏

點(diǎn)擊我的收藏，跳轉(zhuǎn)頁面，點(diǎn)擊“編輯”會對當(dāng)前的頁面信息進(jìn)行修改，首先收藏的內(nèi)容前面會彈出灰色的選擇框，讓用戶點(diǎn)擊選擇，點(diǎn)擊之后，選擇框會發(fā)生相應(yīng)的變化?！μ枴竺娴谋尘邦伾珪兂杉t的，同時‘小對號’也會發(fā)生旋轉(zhuǎn)。為了更加的人性化，還設(shè)置了‘取消選擇’、‘一鍵取消選擇’兩個快捷按鈕，點(diǎn)擊‘取消按鈕’，選擇的效果消失。

3.4.4 關(guān)于我們

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

4 結(jié)論

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

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