跨平台3D魔方网络游戏的设计与实现

陈晓军　马青霄　商晓彤　朱小茹　崔晓腾

摘要：设计并实现了跨平台3D魔方，该游戏使用three.js 3D建模技术，采用基本图形的绘图函数及定位函数，添加相应的颜色、纹理来实现魔方模型的绘制。利用html5的跨平台特性，使游戏支持Windows，安卓，iOS等操作系统。结合JavaScript，收集用户的操作信息。魔方的主要功能包括随机打乱，自动复原，游戏重置，计时等功能，网络对战模式下还可对成绩进行查看。

关键词：HTML5；JavaScript；跨平台；3D建模；魔方

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2015）10-0180-02

智能手机普及，基于智能手机的游戏也发展迅猛，吸引了全球用户的参与。目前市面上常见的有Android、iOS、windows等智能手机系统，三种手机系统几乎占据了智能手机系统全部份额。但是任何一种应用都需要对三种系统进行不同平台开发，给开发者带来了时间和经济浪费，增大了企业的开发成本。然而随着html5标准的建立，使得应用的跨平台特性变得更加简单，方便。

就目前而言，大多数的游戏仍然是2D游戏。传统的2D游戏中的美术资源比如人物行走，人物状态、地图等都是以png或jpg的图形文件渲染而成。而3D游戏中的美术资源多数是以模型为主。2D游戏无法完成视角转换，因为2D游戏的美术资源是平面图，但是3D游戏却可以完成视角转换。应当说，三维建模技术是一种难度高，发展潜力大，可以模拟真实世界的方法和手段，3D游戏大有取代传统2D游戏之势。

1 研究内容

本系统主要是对3D魔方网络游戏的开发，怎样建立魔方的三维模型并使之顺利地进行各种旋转是本系统研究的核心内容。该游戏软件主要实现的一些功能有魔方的旋转：包括单层旋转和整体旋转，魔方的打乱功能，魔方的复原功能，游戏的计时功能，以及对游戏玩家所用时间进行记录保存并排名的功能。

系统设计开发语言为：HTML5与JavaScript；数据库服务器：MySql；Web应用服务器：WampServer；采用的3D引擎为Three.js。

2 游戏关键技术

2.1 Three.js

Three.js是JavaScript编写的WebGL第三方库，并且可以通过HTML5中的新标签canvas进行渲染。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的3D引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。

2.2 Jquery

Jquery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器 ，JQuery2.0及后续版本将不再支持IE6/7/8浏览器。JQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。JQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

2.3 JavaScript

由于魔方的设计需要有3D的效果和旋转的功能，这些不仅要用到一些API函数，还需要编写一些控制整体旋转和单层旋转的函数，通过判断每一个面的各个小方格的颜色一致性来确定是否复原成功。

2.4 Ajax+PHP

Ajax 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页 从服务器请求少量的信息，而不是整个页面。通过Ajax实现页面与服务器之间的信息传输。PHP是运行在服务器端的脚本。通过它来实现对游戏结果的保存与查看。

2.5多线程编程

Java的多线程功能使得在一个程序里可以执行多个小任务。多线程带来更好的交互性能和实时控制性能。

3 游戏主要功能设计

3.1 魔方建模设计

本次魔方模型的建立主要是通过Three.js来实现的。创建三维物体首先是在三维空间建立的模型，然后经过几何变换、投影变换、剪切变换、视口变换等得到理想的视觉效果，最后在二维平面上显示出来。要想在浏览器中建立一个三维的物体需要做以下工作：

1）一个场景：场景是用户所创建的各种物体以及光源的容器

2）一个渲染器：用户可以根据场景需要，选择不同渲染方式对应的渲染器，Three.js目前支持三种图像渲染/输出的方式，分别为SVG，Canvas以及WebGL。

3）一个摄像机：使用渲染器渲染场景时，需要提供一个摄像机来指定视线的位置，方向和视野等参数。

4）一个对象或者至少两个材质，此处的对象主要指由用户创建的各种物体和光源等。

游戏界面的具体建模结果如图1所示。

3.2 魔方自由旋转功能的实现

自由旋转包括单层旋转和整体旋转。单层旋转：是指玩家在游戏过程中，玩家可以随意在旋转魔方的任意一层，只要选中相应层次即可实现魔方的单层旋转。整体旋转：玩家在任一时刻可以同时看到魔方的三个面，玩家可通过魔方外的区域使魔方进行整体旋转，从而使玩家对魔方的整体情况有所了解。

在一个浏览器中一般情况下，只能看到一个物体的一个或两个面，并且与用户的互动也非常有限。因此，如果能实现使用户从不同角度对实体进行观察操作，则能够给用户带来更加有趣的游戏体验。在该游戏系统中，采用了使用鼠标来控制摄像机的旋转的方式来实现。因为在Three.js中，创建完一个摄像机后还需要摆好这个摄像机的位置和朝向，three.js里可以用camera.lookAt函数来设置摄像机的朝向，用camera.position设置摄像机的位置，因为在Three.js中提供了一些常用的摄像机控制接口，本游戏中选用的是轨迹球控制，TrackballControls（），因此camera的变换都被封装在这里面了。有关魔方自由旋转的效果示意图如图2所示：

3.3 魔方随机打乱功能的实现

随机打乱：是指将一个魔方随机地转动若干次，这也是为了让玩家更好地体验游戏而设计的，一般情况下都是需要将一个打乱了的魔方进行还原。

JavaScript中提供了一个Random类，能够生成指定范围的伪随机整数和布尔值，从而确定魔方转动的层 ID 与方向。有关打乱的演示如图3所示：

3.4 游戏计时功能的实现

游戏计时主要是为了给用户提供方便，这样用户在游戏时便可以做到心中有数。最后也可以用来作为成绩的比较。游戏计时实现起来相对要容易些，在此设置了一个timer计时器。Timer每隔0.1秒进行一次响应处理。

3.5 游戏记录保存

首先是在WampServer服务器下的MySql中建了一个简单的用户数据库，建立一个user数据表。包含id，name，grade，time用来保存相应的结果。游戏记录的查询过程，主要是对该数据库来进行各种操作。

游戏客户端是通过Ajax与服务器通信，最后再由PHP语言进行数据的各种读写操作。

4 总结与展望

本次设计主要是基于3D引擎Three.js，采用html5、jQuery和Ajax设计和实现了跨平台魔方网络游戏，主要完成了魔方的生成以及魔方旋转操作，包括自由旋转、随机打乱、复原、重置以及游戏计时等功能，同时也实现了游戏与用户的各种互动效果。

游戏市场发展前景良好但是竞争激烈，要想在这片洪流中胜出，我们需要持续提升用户体验。如提供更丰富的游戏类型，针对不同的用户，我们可以提供不同的难度等级，体现在用户可以自己选择魔方的阶数。提供更友好的界面，使画面更加精美，也可以推陈出新，发明许多新特性，如重力感应多点触摸，体感等。打破传统玩魔方的观念。

参考文献：

[1] Robin Nixon. HTML5移动开发[M]. 北京： 清华大学出版社， 2012.

[2] 张路斌. HTML5 Canvas游戏开发实战[M]. 北京： 机械工业出版社， 2013.

[3] 刘增杰.精通HTML5+CSS3+JavaScript网页设计[M]. 北京： 清华大学电出版社， 2012.

[4] David Geary. HTML5 canvas核心技术：图形动画与游戏开发[M]. 北京： 机械工业出版社， 2013.

[5] Eric Sarrion. jQuery UI开发指南.[M]. 北京： 人民邮电出版社， 2012.

[6] 王石，杨英娜.PHP+MySQL应用开发[M].北京：人民邮电出版社，2012.