陳曉軍　馬青霄　商曉彤　朱小茹　崔曉騰

摘要：設(shè)計并實現(xiàn)了跨平臺3D魔方，該游戲使用three.js 3D建模技術(shù)，采用基本圖形的繪圖函數(shù)及定位函數(shù)，添加相應(yīng)的顏色、紋理來實現(xiàn)魔方模型的繪制。利用html5的跨平臺特性，使游戲支持Windows，安卓，iOS等操作系統(tǒng)。結(jié)合JavaScript，收集用戶的操作信息。魔方的主要功能包括隨機打亂，自動復(fù)原，游戲重置，計時等功能，網(wǎng)絡(luò)對戰(zhàn)模式下還可對成績進行查看。

關(guān)鍵詞：HTML5；JavaScript；跨平臺；3D建模；魔方

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2015）10-0180-02

智能手機普及，基于智能手機的游戲也發(fā)展迅猛，吸引了全球用戶的參與。目前市面上常見的有Android、iOS、windows等智能手機系統(tǒng)，三種手機系統(tǒng)幾乎占據(jù)了智能手機系統(tǒng)全部份額。但是任何一種應(yīng)用都需要對三種系統(tǒng)進行不同平臺開發(fā)，給開發(fā)者帶來了時間和經(jīng)濟浪費，增大了企業(yè)的開發(fā)成本。然而隨著html5標準的建立，使得應(yīng)用的跨平臺特性變得更加簡單，方便。

就目前而言，大多數(shù)的游戲仍然是2D游戲。傳統(tǒng)的2D游戲中的美術(shù)資源比如人物行走，人物狀態(tài)、地圖等都是以png或jpg的圖形文件渲染而成。而3D游戲中的美術(shù)資源多數(shù)是以模型為主。2D游戲無法完成視角轉(zhuǎn)換，因為2D游戲的美術(shù)資源是平面圖，但是3D游戲卻可以完成視角轉(zhuǎn)換。應(yīng)當說，三維建模技術(shù)是一種難度高，發(fā)展?jié)摿Υ螅梢阅M真實世界的方法和手段，3D游戲大有取代傳統(tǒng)2D游戲之勢。

1 研究內(nèi)容

本系統(tǒng)主要是對3D魔方網(wǎng)絡(luò)游戲的開發(fā)，怎樣建立魔方的三維模型并使之順利地進行各種旋轉(zhuǎn)是本系統(tǒng)研究的核心內(nèi)容。該游戲軟件主要實現(xiàn)的一些功能有魔方的旋轉(zhuǎn)：包括單層旋轉(zhuǎn)和整體旋轉(zhuǎn)，魔方的打亂功能，魔方的復(fù)原功能，游戲的計時功能，以及對游戲玩家所用時間進行記錄保存并排名的功能。

系統(tǒng)設(shè)計開發(fā)語言為：HTML5與JavaScript；數(shù)據(jù)庫服務(wù)器：MySql；Web應(yīng)用服務(wù)器：WampServer；采用的3D引擎為Three.js。

2 游戲關(guān)鍵技術(shù)

2.1 Three.js

Three.js是JavaScript編寫的WebGL第三方庫，并且可以通過HTML5中的新標簽canvas進行渲染。提供了非常多的3D顯示功能。Three.js 是一款運行在瀏覽器中的3D引擎，你可以用它創(chuàng)建各種三維場景，包括了攝影機、光影、材質(zhì)等各種對象。

2.2 Jquery

Jquery是繼prototype之后又一個優(yōu)秀的JavaScript框架。它是輕量級的js庫 ，它兼容CSS3，還兼容各種瀏覽器 ，JQuery2.0及后續(xù)版本將不再支持IE6/7/8瀏覽器。JQuery使用戶能更方便地處理HTML documents、events、實現(xiàn)動畫效果，并且方便地為網(wǎng)站提供AJAX交互。JQuery還有一個比較大的優(yōu)勢是，它的文檔說明很全，而且各種應(yīng)用也說得很詳細，同時還有許多成熟的插件可供選擇。

2.3 JavaScript

由于魔方的設(shè)計需要有3D的效果和旋轉(zhuǎn)的功能，這些不僅要用到一些API函數(shù)，還需要編寫一些控制整體旋轉(zhuǎn)和單層旋轉(zhuǎn)的函數(shù)，通過判斷每一個面的各個小方格的顏色一致性來確定是否復(fù)原成功。

2.4 Ajax+PHP

Ajax 在瀏覽器與 Web 服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP 請求），這樣就可使網(wǎng)頁 從服務(wù)器請求少量的信息，而不是整個頁面。通過Ajax實現(xiàn)頁面與服務(wù)器之間的信息傳輸。PHP是運行在服務(wù)器端的腳本。通過它來實現(xiàn)對游戲結(jié)果的保存與查看。

2.5多線程編程

Java的多線程功能使得在一個程序里可以執(zhí)行多個小任務(wù)。多線程帶來更好的交互性能和實時控制性能。

3 游戲主要功能設(shè)計

3.1 魔方建模設(shè)計

本次魔方模型的建立主要是通過Three.js來實現(xiàn)的。創(chuàng)建三維物體首先是在三維空間建立的模型，然后經(jīng)過幾何變換、投影變換、剪切變換、視口變換等得到理想的視覺效果，最后在二維平面上顯示出來。要想在瀏覽器中建立一個三維的物體需要做以下工作：

1）一個場景：場景是用戶所創(chuàng)建的各種物體以及光源的容器

2）一個渲染器：用戶可以根據(jù)場景需要，選擇不同渲染方式對應(yīng)的渲染器，Three.js目前支持三種圖像渲染/輸出的方式，分別為SVG，Canvas以及WebGL。

3）一個攝像機：使用渲染器渲染場景時，需要提供一個攝像機來指定視線的位置，方向和視野等參數(shù)。

4）一個對象或者至少兩個材質(zhì)，此處的對象主要指由用戶創(chuàng)建的各種物體和光源等。

游戲界面的具體建模結(jié)果如圖1所示。

3.2 魔方自由旋轉(zhuǎn)功能的實現(xiàn)

自由旋轉(zhuǎn)包括單層旋轉(zhuǎn)和整體旋轉(zhuǎn)。單層旋轉(zhuǎn)：是指玩家在游戲過程中，玩家可以隨意在旋轉(zhuǎn)魔方的任意一層，只要選中相應(yīng)層次即可實現(xiàn)魔方的單層旋轉(zhuǎn)。整體旋轉(zhuǎn)：玩家在任一時刻可以同時看到魔方的三個面，玩家可通過魔方外的區(qū)域使魔方進行整體旋轉(zhuǎn)，從而使玩家對魔方的整體情況有所了解。

在一個瀏覽器中一般情況下，只能看到一個物體的一個或兩個面，并且與用戶的互動也非常有限。因此，如果能實現(xiàn)使用戶從不同角度對實體進行觀察操作，則能夠給用戶帶來更加有趣的游戲體驗。在該游戲系統(tǒng)中，采用了使用鼠標來控制攝像機的旋轉(zhuǎn)的方式來實現(xiàn)。因為在Three.js中，創(chuàng)建完一個攝像機后還需要擺好這個攝像機的位置和朝向，three.js里可以用camera.lookAt函數(shù)來設(shè)置攝像機的朝向，用camera.position設(shè)置攝像機的位置，因為在Three.js中提供了一些常用的攝像機控制接口，本游戲中選用的是軌跡球控制，TrackballControls（），因此camera的變換都被封裝在這里面了。有關(guān)魔方自由旋轉(zhuǎn)的效果示意圖如圖2所示：

3.3 魔方隨機打亂功能的實現(xiàn)

隨機打亂：是指將一個魔方隨機地轉(zhuǎn)動若干次，這也是為了讓玩家更好地體驗游戲而設(shè)計的，一般情況下都是需要將一個打亂了的魔方進行還原。

JavaScript中提供了一個Random類，能夠生成指定范圍的偽隨機整數(shù)和布爾值，從而確定魔方轉(zhuǎn)動的層 ID 與方向。有關(guān)打亂的演示如圖3所示：

3.4 游戲計時功能的實現(xiàn)

游戲計時主要是為了給用戶提供方便，這樣用戶在游戲時便可以做到心中有數(shù)。最后也可以用來作為成績的比較。游戲計時實現(xiàn)起來相對要容易些，在此設(shè)置了一個timer計時器。Timer每隔0.1秒進行一次響應(yīng)處理。

3.5 游戲記錄保存

首先是在WampServer服務(wù)器下的MySql中建了一個簡單的用戶數(shù)據(jù)庫，建立一個user數(shù)據(jù)表。包含id，name，grade，time用來保存相應(yīng)的結(jié)果。游戲記錄的查詢過程，主要是對該數(shù)據(jù)庫來進行各種操作。

游戲客戶端是通過Ajax與服務(wù)器通信，最后再由PHP語言進行數(shù)據(jù)的各種讀寫操作。

4 總結(jié)與展望

本次設(shè)計主要是基于3D引擎Three.js，采用html5、jQuery和Ajax設(shè)計和實現(xiàn)了跨平臺魔方網(wǎng)絡(luò)游戲，主要完成了魔方的生成以及魔方旋轉(zhuǎn)操作，包括自由旋轉(zhuǎn)、隨機打亂、復(fù)原、重置以及游戲計時等功能，同時也實現(xiàn)了游戲與用戶的各種互動效果。

游戲市場發(fā)展前景良好但是競爭激烈，要想在這片洪流中勝出，我們需要持續(xù)提升用戶體驗。如提供更豐富的游戲類型，針對不同的用戶，我們可以提供不同的難度等級，體現(xiàn)在用戶可以自己選擇魔方的階數(shù)。提供更友好的界面，使畫面更加精美，也可以推陳出新，發(fā)明許多新特性，如重力感應(yīng)多點觸摸，體感等。打破傳統(tǒng)玩魔方的觀念。

參考文獻：

[1] Robin Nixon. HTML5移動開發(fā)[M]. 北京： 清華大學出版社， 2012.

[2] 張路斌. HTML5 Canvas游戲開發(fā)實戰(zhàn)[M]. 北京： 機械工業(yè)出版社， 2013.

[3] 劉增杰.精通HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計[M]. 北京： 清華大學電出版社， 2012.

[4] David Geary. HTML5 canvas核心技術(shù)：圖形動畫與游戲開發(fā)[M]. 北京： 機械工業(yè)出版社， 2013.

[5] Eric Sarrion. jQuery UI開發(fā)指南.[M]. 北京： 人民郵電出版社， 2012.

[6] 王石，楊英娜.PHP+MySQL應(yīng)用開發(fā)[M].北京：人民郵電出版社，2012.