【正文】 3 2 相關(guān)技術(shù)及工具介紹 該部分主要介紹系統(tǒng)所采用的技術(shù)及開(kāi)發(fā)工具，涉及頁(yè)面前端開(kāi)發(fā)技術(shù)、后臺(tái)開(kāi)發(fā)技術(shù)、腳本語(yǔ)言、 web 服務(wù)器及前后臺(tái)連接技術(shù)等。 Flex 介紹 Flex 是 Adobe 公 司發(fā)布的 presentation server(展現(xiàn)服務(wù) )，它是 Java web container 或者 .Net server 的一個(gè)應(yīng)用，根據(jù) .mxml 文件 (純粹的 xml 描述文件盒actionscript)產(chǎn)生相應(yīng)的 .swf 文件，傳送到客戶(hù)端，有客戶(hù)端的 flash player 解釋執(zhí)行，給用戶(hù)以豐富的客戶(hù)體驗(yàn) [2]。 在做動(dòng)畫(huà)起家之后， Flash 一直在謀求 Rich Intemet Application(RIA 富客戶(hù)端 )的霸主地位，具有影響的是，已經(jīng)推出了面向?qū)ο蟮木幊?腳本 ，并且建立起類(lèi)似于 Java Swing的類(lèi)庫(kù)和相應(yīng)的 Component(組件 )。 Flex 的 ponent 和 flash 的 ponent 很相似 2，但是有所改進(jìn)增強(qiáng)。Flex 采用 GUI 界面開(kāi)發(fā)，使用基于 XML 的 MXML 語(yǔ)言。相對(duì)于基于 HTML 的應(yīng)用在每個(gè)請(qǐng)求時(shí)都需要執(zhí)行服務(wù)器端的模板，由于客戶(hù)端只需要載入一次， Flex 應(yīng)用程序的工作流被大大改善。 Flex 的應(yīng)用前景 作為新一代的 富客戶(hù) 端 互聯(lián)網(wǎng)技術(shù)的佼佼者， Flex 這種技術(shù)已經(jīng)被越來(lái)越多的公司所采用，被越來(lái)越多的用戶(hù)和程序員所接受。 ActionScript 語(yǔ)言 ActionScript 是針對(duì) Adobe Flash Player 運(yùn)行時(shí)環(huán)境的編程語(yǔ)言，它在 Flash 內(nèi)容和應(yīng)用程序中實(shí)現(xiàn)了交互性、數(shù)據(jù)處理以及其它許多功能 。 ActionScript 代碼通常被編譯器編譯成字節(jié)碼格式（一種由計(jì)算機(jī)編寫(xiě)且能夠?yàn)橛?jì)算機(jī)所理解的編程語(yǔ)言），如 Adobe Flash CS3 Professional 或 Adobe Flash Builder 的內(nèi)置編譯器或 Adobe Flex SDK 和 Flex Data Services 中提供的編譯器。 ActionScript 是一種基于 ECMAScript 的腳本語(yǔ)言，可用于編寫(xiě) Adobe Flash動(dòng)畫(huà)和應(yīng)用程序。不過(guò) JavaScript 的文檔對(duì)象模型（ DOM）是以瀏覽器窗口，文檔和表單為主的， ActionScript 的文檔對(duì)象模型（ DOM）則以 SWF 格式動(dòng)畫(huà)為主，可包括動(dòng)畫(huà)，音頻，文字和事件處理。該環(huán)境提供參考、代碼提示和句法強(qiáng)調(diào)。自外部文件檔透過(guò) include語(yǔ)法導(dǎo)入 ActionScript 代碼也相當(dāng)常見(jiàn)。擴(kuò)展 Flash 創(chuàng)作交互動(dòng)畫(huà)和網(wǎng)絡(luò)應(yīng)用的能力。在簡(jiǎn)單動(dòng)畫(huà)中， Flash 按順序播放動(dòng)畫(huà)中的場(chǎng)景和幀，而在交互動(dòng)畫(huà)中，用戶(hù)可以使用鍵盤(pán)或鼠標(biāo)與動(dòng)畫(huà)交互。使用 ActionScript 可以控制 Flash 動(dòng)畫(huà)中的對(duì)象，創(chuàng)建導(dǎo)航元素和交互元素 。和其他編程語(yǔ)言相比，它有很多優(yōu)點(diǎn) [5]。由于 Java 是在面向?qū)ο蟮幕A(chǔ)平臺(tái)上構(gòu)建的，因此可以很容易對(duì)基本的語(yǔ)言進(jìn)行擴(kuò)展和發(fā)布。 Java 同樣支持類(lèi)繼承，這樣也減少了程序設(shè)計(jì)的復(fù)雜性。因此，在 Windows環(huán)境中創(chuàng)建并編譯 Java 類(lèi)文件，無(wú)需任何修改就可以將相同的文件部署到 UNIX環(huán)境中。 基于 Flex 和 Java 的網(wǎng)頁(yè)小游戲連連看的 開(kāi)發(fā) 6 Java 是面向?qū)ο蟮木W(wǎng)絡(luò)編程語(yǔ)言，由于它支持 TCP/IP 協(xié)議，使得用戶(hù)可以通過(guò)瀏覽器訪問(wèn)到 Inter 上的各種動(dòng)態(tài)對(duì)象。 Java 語(yǔ)言支持多線程機(jī)制，多線程機(jī)制使得 Java 程序能夠并行處理多項(xiàng) Java程序可以設(shè)計(jì)成具有多個(gè)線程，例如讓一個(gè)線程負(fù)責(zé)數(shù)據(jù)的檢索、查尋，另一個(gè)線程 負(fù)責(zé)與用戶(hù)進(jìn)行交互，這樣，兩個(gè)線程得以并行執(zhí)行。 BlazeDS 技術(shù) BlazeDS 是一個(gè)基于服務(wù)器的 Java 遠(yuǎn)程控制 (remoting)和 Web 消息傳遞(messaging)技術(shù) 。在 Java 應(yīng)用服務(wù)器上，它以 servlet 的形式存在，因此可以在任何標(biāo)準(zhǔn) Java 網(wǎng)絡(luò)應(yīng)用中運(yùn)用它。 在服務(wù)器端， BlazeDS 以 servlet 的方式存在于 Java 應(yīng)用服務(wù)器上。 在客戶(hù)端， BlazeDS 提供了 RemoteObject、 HttpServcie、 WebService， Product和 Comsumer 等組件來(lái)提供訪問(wèn)服務(wù)器端數(shù)據(jù)的能力，其中 RemoteObject、 Product和 Comsumer 是以 amf 協(xié)議來(lái)交換數(shù)據(jù)的，而 HttpServcie 和 WebService 則采用的是比較通用的訪問(wèn)協(xié)議，可以用來(lái)訪問(wèn)非 BlazeDS 服務(wù)器（即普通的 web 服務(wù)器）。由于有了 Sun 的參與和支持，最新的 Servlet 和 JSP 規(guī)范總能在 Tomcat 中得到體現(xiàn)。不過(guò)， Tomcat 是自由的開(kāi)源軟件，而且有許多高手致力于其發(fā)展。它運(yùn)行時(shí)占用的系統(tǒng)資源小，擴(kuò)展性好，支持負(fù)載平衡與郵件服務(wù)等開(kāi)發(fā)應(yīng)用系統(tǒng)常用的功能。對(duì)于一個(gè)初學(xué)者來(lái)說(shuō)，可以這樣認(rèn)為，當(dāng)在一臺(tái)機(jī)器上配置好 Apache 服務(wù)器，可利用它響應(yīng)對(duì) HTML 頁(yè)面的訪問(wèn)請(qǐng)求。 Flash Builder 從 Flash Builder 4 開(kāi)始是由之前的 Flex Builder 更名而來(lái)。 Flash Builder使設(shè)計(jì)者和開(kāi)發(fā)者更高效地建立 Flex 應(yīng)用程序 。開(kāi)發(fā)者可以使用代碼提示和調(diào)試工具，對(duì) Flex 應(yīng)用程序 進(jìn)行高效的編碼和調(diào)試。它是功能豐富的 JavaEE 集成開(kāi)發(fā)環(huán)境 ，包括了完備的編碼、調(diào)試、測(cè)試和發(fā)布功能，完整支持 HTML， Struts， JSP， CSS， JavaScript， SQL， Hibernate。 MyEclipse 結(jié)構(gòu)上的這種模塊化，可以讓開(kāi)發(fā)人員在不影響其他模塊的情況下，對(duì)任一模塊進(jìn)行單獨(dú)的擴(kuò)展和升級(jí)。在處理海量數(shù)據(jù)的效率上，后臺(tái)開(kāi)發(fā)的靈活性，可擴(kuò)展性強(qiáng)，可以滿(mǎn)足各種類(lèi)型應(yīng)用的需要。對(duì)于這種小型的網(wǎng)頁(yè)游戲 來(lái)說(shuō)，僅僅處理玩家數(shù)據(jù)用 MySQL 數(shù)據(jù)庫(kù)是足夠了，并且操作起來(lái)簡(jiǎn)便，效率高。 本章小結(jié) 本章主要描述了該游戲的開(kāi)發(fā)技術(shù)及開(kāi)發(fā)平臺(tái)。 平頂山學(xué)院本科畢業(yè)設(shè)計(jì) 9 3 策劃與需求分析 本章主要 從 游戲前期策 劃 、需求分析兩個(gè)方面進(jìn)行描述 。 游戲策劃 將以 Flex 技術(shù)為基礎(chǔ)設(shè)計(jì)一款界面酷炫、操作簡(jiǎn)便、關(guān)卡說(shuō)明詳細(xì)、休閑益智的 網(wǎng)頁(yè)連連看 游戲。 ： 連連看 ： 首先本游戲只需用鼠標(biāo)操作，無(wú)需鍵盤(pán)控制，簡(jiǎn)單易操作。 進(jìn)入游戲 主 界面， 會(huì)看到酷炫的背景界面。其中關(guān)卡選擇按鈕選中后按鈕會(huì)一直處于放大狀態(tài)，以便玩家能看出當(dāng)前所選的關(guān)卡；游戲說(shuō)明按鈕，被點(diǎn)擊后會(huì)進(jìn)入游戲規(guī)則說(shuō) 明界面，在游戲說(shuō)明界面中除介紹內(nèi)容之外還有一個(gè)返回按鈕，用來(lái)返回到主界面；游戲開(kāi)始按鈕，被點(diǎn)擊后進(jìn)入游戲操作界面。每關(guān)時(shí)間結(jié)束前，若圖片消完會(huì)出現(xiàn)下一關(guān)按鈕，點(diǎn)擊即可進(jìn)入下一關(guān)；若圖片沒(méi)消完游戲結(jié)束，同時(shí)彈出提交得分框，可以提 交或者取消，再或者直接關(guān)閉瀏覽器。在本游戲中一共設(shè)置 3 個(gè)等級(jí)，每一等級(jí)下有 4 小關(guān)，總共 12 關(guān)卡。 需求分析 需求分析指的是在改變一個(gè)現(xiàn)存的或建立一個(gè)新的電腦系統(tǒng)時(shí)描寫(xiě)新系統(tǒng)的定義、目的、范圍和功能等所要做的所有的工作。 界面需求 一款游戲的受歡迎程度，大部分取決于它的娛樂(lè)性和可觀賞性的高低，所以游戲的界面美化和圖形設(shè)計(jì)是很重要的 [6]。為了使界面簡(jiǎn)潔美觀，需要在界面中添加背景圖片來(lái)渲染游戲的氣氛，使玩家感覺(jué)到放松。 功能需求 功能需求可以從游戲和玩家兩個(gè)角度進(jìn)行分析。 游戲用例圖如圖 31 所示。 (2) 隨機(jī)生成圖片： 進(jìn)入游戲操作界面 時(shí) ， 需要從圖片庫(kù)中隨機(jī)生成部分圖片作為游戲圖片區(qū)的圖片。 (4) 播放背景音樂(lè)和特效音樂(lè)：游戲開(kāi)始播放背景音樂(lè)，觸動(dòng)按鈕及圖片時(shí)播放不同的特效音樂(lè)。 (6) 計(jì)算得分：游戲進(jìn)入操作界面后就開(kāi)始計(jì)分，貫穿整個(gè)游戲過(guò)程直至結(jié)束 。 (8) 畫(huà)標(biāo)記框：游戲會(huì)將玩家選定的圖片用框圈著以作標(biāo)記 。 (10) 繪制路徑線：兩圖片能相消的話，先繪制出路徑線 。 (12) 消除標(biāo)記框：當(dāng)點(diǎn)擊下一個(gè)圖片時(shí)，上一個(gè)圖片要消除標(biāo)記 。 (14) 游戲通關(guān)：玩家將第三等級(jí)的第四小關(guān) (34)通過(guò)后游戲即通關(guān)了 。 ： 在游戲中 玩家是 主要的 參與者，玩家 具備的操作功能如下：游戲說(shuō)明，級(jí)別選擇，開(kāi)始游戲，點(diǎn)選圖片，重置圖片，重新開(kāi)始游戲，查看排行榜，提交分?jǐn)?shù)，跳到下一關(guān)等幾個(gè)大方面的功能 。 開(kāi)始游戲點(diǎn)選圖片重置圖片重新開(kāi)始游戲查看排行榜跳到下一關(guān)提交分?jǐn)?shù)游戲說(shuō)明級(jí)別選擇玩家圖 32 玩家用例圖 從玩家角度分析，各用例如下： (1) 游戲說(shuō)明：剛進(jìn)入游戲主界面時(shí)，會(huì)顯示游戲說(shuō)明按鈕 。游戲說(shuō)明用例描述如表 31 所示。級(jí)別選擇用例描述如表 32 所示。開(kāi)始游戲用例描述如表 33 所示。點(diǎn)選圖片用例描述如表 34 所示。此功能每個(gè)關(guān)卡最多能用 3 次。 表 35 重置圖片 用例描述 用例編號(hào) 305 用例名稱(chēng) 重置圖片 用例概述 在游戲操作界面，玩家通過(guò)“重置”按鈕可將剩余圖片重新排列位置 參與者 玩家 前置條件 獲得鼠標(biāo)點(diǎn)擊事件 成功保證 圖片區(qū)域的圖片全部重排位置 基本事件流 步驟 活動(dòng) 1 點(diǎn)擊“重置”按鈕 平頂山學(xué)院本科畢業(yè)設(shè)計(jì) 15 續(xù)表 35 2 獲取剩余的圖片 3 為剩余的圖片重新生成位置 4 顯示重新排列的圖片 規(guī)則與約束 圖片區(qū)域要有空位置 (6) 重新開(kāi)始游戲：在游戲中，如果玩家不想再玩此關(guān)想換一個(gè)級(jí)別的話可以點(diǎn)此按鈕，游戲會(huì)進(jìn)入 主界面，由玩家重新選擇進(jìn)入。 表 36 重新開(kāi)始游戲 用例描述 用例編號(hào) 306 用例名稱(chēng) 重新開(kāi)始游戲 用例概述 玩家通過(guò)此按鈕可以回到主界面，重新選擇級(jí)別進(jìn)入游戲 參與者 玩家 前置條件 獲得鼠標(biāo)點(diǎn)擊事件 成功保證 游戲返回到主界面 基本事件流 步驟 活動(dòng) 1 點(diǎn)擊“重新開(kāi)始”按鈕 2 返回至主界面 規(guī)則與約束 在提交分?jǐn)?shù)或者，看排行榜是不能做此操作 (7) 查看 排行榜 ：玩家在游戲時(shí)，若想知道自己的得分在此游戲中總體排名，可以通過(guò)排行榜功能顯示其 他玩家的得分及排名情況，同時(shí)可以提交自己的分?jǐn)?shù)。 表 37 查看排行榜 用例描述 用例編號(hào) 307 用例名稱(chēng) 查看排行榜 用例概述 玩家通過(guò)主界面上“排行榜”按鈕了解此游戲的得分排名 參與者 玩家 前置條件 獲得鼠標(biāo)點(diǎn)擊事件 成功保證 彈出排行榜窗口 基本事件流 步驟 活動(dòng) 1 點(diǎn)擊“排行榜”按鈕 基于 Flex 和 Java 的網(wǎng)頁(yè)小游戲連連看的 開(kāi)發(fā) 16 續(xù)表 37 2 彈出新排行榜窗口 3 顯示出其他玩家的得分及排名 規(guī)則與約束 彈出窗口后不能再點(diǎn)排行榜按鈕 (8) 跳到 下一關(guān) ：玩家在規(guī)定時(shí)間內(nèi)過(guò)完一 關(guān)時(shí)，會(huì)自動(dòng)彈出下一關(guān)按鈕。跳到下一關(guān)用例描述如表 38 所示。提交分?jǐn)?shù)用例描述如表 39 所示。設(shè)計(jì)數(shù)據(jù)庫(kù)只是為了能實(shí)現(xiàn)排行榜功能，以便玩家能在玩游戲的同時(shí)也不要忘了競(jìng)技，時(shí)刻保持著競(jìng)技的心態(tài)不斷提升自己。為達(dá)到以上設(shè)計(jì)思想，保存數(shù)據(jù)時(shí)只需要保存玩家名稱(chēng)和玩家得分即可。所以，數(shù)據(jù)庫(kù)的設(shè)計(jì)只需一張表，兩個(gè)字段（加上 id 字段共三個(gè)）。 基于 Flex 和 Java 的網(wǎng)頁(yè)小游戲連連看的 開(kāi)發(fā) 18 4 設(shè)計(jì)與實(shí)現(xiàn) 本章詳細(xì)描述該游戲的設(shè)計(jì)與實(shí)現(xiàn)過(guò)程。 總體設(shè)計(jì) 本游戲主要從以下幾個(gè)方面進(jìn)行構(gòu)思： 本游戲設(shè)計(jì)有 5 個(gè)界面，分別為：游戲主界面、游戲說(shuō)明界面、游戲操作界面、排行榜界面、提交分?jǐn)?shù)界面。操作界面包括一些顯示信息（時(shí)間，得分，當(dāng)前關(guān)卡）和一些按鈕（重新開(kāi)始，重置，排行榜），操作界面可以跳轉(zhuǎn)到主界面、排行榜界面和提交分?jǐn)?shù)界面。 2. 級(jí)別選擇設(shè)計(jì) 本游戲設(shè)計(jì) 3 個(gè)級(jí)別（初級(jí)，中級(jí)，高級(jí)），這三個(gè)級(jí)別用按鈕組在主界面上顯示出來(lái)。 進(jìn)入游戲主界面之后與游戲說(shuō)明按鈕同時(shí)存在的還有游戲說(shuō)明按 鈕和游戲開(kāi)始按鈕。了解以后，可以通過(guò)此界面的返回按鈕再返回到主界面。 5. 圖片的顯示設(shè)計(jì) 連連看圖片的產(chǎn)生是隨機(jī)的，并且是成對(duì)的圖片。這樣顯示出來(lái)的圖片就能保證是成對(duì)存在的，能消完。 7. 得分記錄設(shè)計(jì) 這個(gè)主要是在每次消除圖片時(shí)，進(jìn)行得分計(jì)算，每消掉一對(duì)圖片分?jǐn)?shù)都要增加。關(guān)卡記錄主要是顯示當(dāng)前的級(jí)別和關(guān)數(shù)，以便玩家能時(shí)刻知道自己當(dāng)前的關(guān)卡。每過(guò)一關(guān)，關(guān)卡會(huì)自動(dòng)增加，流程如圖 42 所示。 基于 Flex 和 Java 的網(wǎng)頁(yè)小游戲連連看的 開(kāi)發(fā) 20 圖 42 關(guān)卡記錄流程 開(kāi) 始選 一 個(gè) 圖 片 并 標(biāo) 記下 一 關(guān)還 有 圖 片 ？沒(méi)結(jié) 束選 圖 片兩 圖 片 相 同判 斷 路 徑是有消 除 兩 個(gè) 圖 片前 選 圖 片 取 消 標(biāo) 記 后 選 圖片 被 標(biāo) 記否否是 圖 43 消除圖片流程 10. 重置設(shè)計(jì) 重置是將剩余的圖片和位置全部取出，從第一個(gè)圖片到最后一個(gè)圖片全部重