基于HTML5的移動端游戲助手APP的設計與實現

張艷敏 喬陽陽 鄭州工商學院 機械與電信工程學院

1 系統分析

1.1 需求分析

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

1.2 游戲助手APP的開發工具

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

2 游戲助手APP的設計

2.1 系統功能模塊

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

圖1 主要功能模塊圖

2.2 功能模塊介紹

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

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

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

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

3 游戲助手APP的實現與測試

3.1 頭部導航

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

3.2 頁腳導航

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

3.3 “首頁”頁面

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

3.4 “我的”頁面

“我的”頁面是手機游戲助手的主要組成部分、也是手機游戲助手的主干?！拔业摹表撁嬷饕凶浴⒌卿洝⑿薷拿艽a以及查看自己對游戲的收藏等功能，這些功能是移動手機APP的基本功能，這一部分是用戶擁有所有個人信息的體現。在“我的”頁面中的我的禮包、我的訂單、我的收藏都是單獨的HTML文件，它們之間的內容和功能都是相互獨立的，可以實現頁面之間的相互跳轉。我的禮包頁面是用戶可以復制禮包的驗證編碼，從而在官方網站進行禮包的領?。晃业氖詹刂许撁嫘畔⑹强梢圆僮鞯模M行收藏信息的更改完善；關于我們頁面是本頁的隱藏頁，主要是介紹開發玩咖手機游戲助手的目的。

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

3.4.1 登陸與注冊

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

3.4.2 我的禮包

我的禮包界面是“我的”頁面中＜li＞標簽利用＜a＞標簽的href屬性進行的頁面跳轉，當點擊我的禮包時會進行頁面跳轉。我的禮包頁面擁有禮包的領取權限，可以復制驗證碼進行禮包領取。當復制驗證碼成功以后，我的禮包頁面會彈出驗證碼復制成功的提示，這個是利用JavaScript語言的onclick事件來實現的，點擊確定彈出框會消失。

3.4.3 我的收藏

點擊我的收藏，跳轉頁面，點擊“編輯”會對當前的頁面信息進行修改，首先收藏的內容前面會彈出灰色的選擇框，讓用戶點擊選擇，點擊之后，選擇框會發生相應的變化。‘小對號’后面的背景顏色會變成紅的，同時‘小對號’也會發生旋轉。為了更加的人性化，還設置了‘取消選擇’、‘一鍵取消選擇’兩個快捷按鈕，點擊‘取消按鈕’，選擇的效果消失。

3.4.4 關于我們

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

4 結論

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

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