朱诗生，李国明

（汕头大学计算机系，广东汕头515063）

Web2.0技术以及基于Web2.0的Rich Internet Application（RIA）平台的发展促进了网页游戏的开发，综合使用网页游戏技术来设计更好的网页游戏成为目前的热点。介绍了当前网页游戏技术及其发展，对常用的网页游戏开发工具与技术进行了分析比较。最后就“龙曦”网页游戏软件的开发设计进行了分析讨论。

1 网页游戏

网页游戏又叫无端网游，简称Web游戏。其特点是不需要象传统游戏那样，需要下载客户端软件，而仅利用浏览器平台运行游戏[1]。Flash技术的出现促进了网页游戏的流行，特别是丰富互联网应用技术——RIA技术，为网游提供了丰富的表现手段。网页游戏具有如下特点：1）瘦客户端；2）可同时进行IM聊天；3）电脑配置要求低；4）“绿色”游戏，不需要对电脑添加任何信息；5）支持多平台Windows、Linux、Mac等。目前网页游戏已成为游戏的主流。

网页游戏分为两种：低端网页游戏和高端网页游戏。低端网页游戏由网页语言PHP/ASP/JSP/.net/JavaScript/Vbscript等软件开发，界面比较原始，游戏时与玩家的交互需通过浏览器刷屏实现。高端网页游戏由Flash、Flex和Java等软件开发，游戏可在无刷屏的情况下实现玩家与游戏的交互，能够实现肥客户端网络游戏的画面，支持多媒体。

2 网页游戏的开发技术及比较

2.1 开发技术

网页游戏开发技术有许多，但是常用的开发工具和技术主要有以下几个。

1）ASP技术Active Server Page（ASP）意为“动态服务器页面”。ASP是微软公司开发用来代替CGI脚本程序的编程工具，常用于设计动态网站。ASP脚本集成于HTML中，无需编译即可直接解释执行、独立于浏览器（能解释HTML码的浏览器即可浏览ASP网页）、保护源码（ASP脚本在服务器上执行，传到浏览器端的只是ASP执行结果所生成的常规HTML代码）。

2）PHP技术Hypertext Preprocessor（PHP）意为“超级文本预处理语言”。PHP是一种在服务器端执行的嵌入HTML文档的脚本语言，风格类似C语言，应用广泛。PHP与CGI或Perl相比，能更快速地执行动态网页。PHP是将程序嵌入到HTML文档中去执行，跨平台性强，程序开发快，执行效率高，可编译以达到加密和优化代码，支持几乎所有流行的数据库以及操作系统。

3）Ajax技术[1]Asynchronous javascript and xml（Ajax）意为“异步JavaScript和XML”。Ajax是一种创建交互式网页应用的网页开发技术，它不是一个新的编程语言，而是一个编程技术。Ajax的最大优点就是能在不刷新整个页面的前提下更新数据，使得Web应用程序更为迅捷地响应用户的交互需求[2]。

4）Flex技术[3]Flex是Adobe公司最新的服务器端产品。该技术提供了一个新的、基于标准的语言和编程模型，其编程模型支持常用的设计模式，能够使企业创建许多有吸引力的、交互的快速应用，增强了用户对网页的体验。传统网页游戏开发的局限是表现层受到一定的约束，而Flex技术能轻松地解决这一技术难题。网游Small World就是基于Flex技术开发的。

5）JSP技术Java Server Pages（JSP）是一种动态网页技术标准，它可在传统的网页HTML文件（*.htm，*.html）中插入Java程序段和JSP标记，其生成内容的逻辑被封装在标识和JavaBeans组件中，所有的脚本在服务器端运行。可重用的组件（JavaBeans或者Enterprise JavaBeansTM组件）能够执行应用程序所要求的更为复杂的处理。由于Java在移植性、扩展性、多线程方面的特点使它成为目前许多网页游戏的开发语言。由Java技术开发的高端网页游戏，能处理各类与服务器的交互和复杂图形，开发大型网络游戏。目前国内网游《倾城》就是一款基于Java语言开发的游戏。

2.2 开发技术比较

前面介绍了5种常用的网页游戏开发技术，由于Flex技术[4]与Ajax技术比较，Flex处理数据快且能很好地支持流媒体技术[5]，所以开发者更喜欢使用Flex技术来进行网页的设计。因此这里只对其他4种开发技术进行比较，如表1所示。

表1 常用网页游戏开发技术比较Tab.1Comparison of commonly used Web game development technology

3 “龙曦”网页游戏软件的开发

3.1 游戏的任务

每个网游都有不同的故事内容，游戏的任务按内容来分，一般有打怪，收集，煅造，探索，戏话，送信，护送等类型。按重要性来分，有主线任务和支线任务，重复任务或不重复任务，一对一和一对多任务等类型。一个完整任务包括“触发→执行→完成”3个步骤。

“龙曦”网页游戏的任务就是把敌方恐龙怪物清除并获得相应的奖励。首先我们跟None Player Character（NPC）对话并接受该任务，接着我们就寻找任务里怪物出现的地方，玩家角色使用弓箭拉弓对怪物进行伤害，然后把它清除，最后玩家对NPC对话完成该任务并获得相应的奖励。

3.2 游戏的功能层次

“龙曦”网页游戏的设计分为3个层次[6]，即用户界面层、逻辑处理层和数据层。用户界面层由聊天模块，游戏界面模块，玩家信息模块组成，这些模块受游戏界面引擎控制。逻辑处理层是游戏运行的核心，主要完成网页端与服务器之间的数据交换和游戏玩法运算[7]。数据层由玩家人物数据和配罝等组成。

首先，玩家使用浏览器（Client端）访问服务器资源的网页服务器，再通过网页游戏自定义的不同方法访问Web游戏服务器（Server端）[8]。在Web游戏服务器中，从上至下有网页服务器、游戏逻辑服务器、数据库服务器。各服务器通过接口实现连接和服务。最后由游戏逻辑服务器执行玩家所要求的操作，而数据库服务器为玩家提供游戏数据。图1是“龙曦”网页游戏的B/S架构。

图1 “龙曦”网页游戏的B/S架构Fig.1B/S architecture of“Longxi”Web game

“龙曦”网页游戏的数据传递采用消息包封装。浏览器端每完成一个特定事件，该事件涉及的角色及有关数据将封装成信息包，从客户端提交给服务器。如果存在多个客户端同时与一个服务器交互信息，则采用线程间通信。服务器的每个线程都与一个客户端的进程进行通信，任务并发处理。玩家的经验数据可采用缓存机制进行处理，并定时将内存数据存入数据库。

3.3 游戏的数据结构和数据通信

在网游里需要使用数据结构来创建不同类型的人物（如玩家、怪物、商人等）移动，攻击行为等。而在地图方面，需要使用图的数据结构来把地图上的每个节点连接起来，地图坐标是一个二维数组[9]。实现游戏任务的数据结构、算法的合理性往往决定游戏的成败。目前游戏通常使用的算法有：A*算法，贪婪算法，遗传算法，排序算法等。“龙曦”网页游戏建立了玩家角色和怪物的数据结构。玩家的排名使用了泡沫排序法，怪物跌倒率使用了概率随机算法。

网页游戏和传统游戏对网络通信的需求都较大。传统游戏一般使用Socket（套接字）实现通信，而网页游戏则相对灵活些，既可用传输层Socket进行通信，也可用应用层Hypertext Transmission Protocol（Http）协议像浏览网页交换数据方式进行通信。ActionScript就同时支持上述两种方式。

由于“龙曦”网游采用了Flex技术，消息数据必须封装成ActionScript Messaging Format（AMF）格式[5]。因篇幅有限略去通过Transfer Control Protocol/Internet Protocol（TCP/IP）协议实现Server端和Web端建立连接的过程。

3.4 游戏的画面层管理

“龙曦”网游使用Flash来制作动画（swf格式），然后由Flex通过ActionScript实现调用，放到网页上展示。由于Flash制作的动画是2D的，所以游戏每增加（删除，移动）一个对象，就必须考虑应该把对象放到哪一个层，这就引出一个游戏画面层管理的问题。

“龙曦”网游使用ActionScript提供的功能来实现画面层的管理。使用ActionScript的Sprite类来存储层，在New Container基础上通过addchild（New Container）便可建立新层，新层代表上层，层数越高，离用户越近。使用ActionScript Application Programming Interface（API）getchild（）的方法来获取某层的对象，并将对象移动到某一层，或者把层删除。例如当角色放弓箭时，将会透过管理层放在背景层之上，才能使用户看清楚画面。图2给出了“龙曦”网页游戏截图。

图2 “龙曦”网页游戏截图Fig.2Screenshot of“Longxi”Web game

3.5 游戏的处理流程

图3是“龙曦”网页游戏的处理流程。

图3 “龙曦”处理流程Fig.3Processes of“Longxi”

下面只给出一段实现接收游戏动作并响应处理的代码段。其中fooCommand函数的用途是将动作事件数据发送给服务器，而fooGetData函数的用途是从服务器获取数据并进行处理。

例如：若获取的数据是“FIRE+ ”，那么就调用FireAction（）函数，其效果就是在界面层可看到角色攻击的动作。

…

if（sMsg.match（“FIRE”+ ））//判断事件动件角色龙是否FIRE

{ActionState=true；FireAction（）；}//发送FireAction处理，游戏逻辑处理

if（sMsg.match（“STATE”+ ））//判断事件动件角色龙状态是否变化

{ActionState=true；RoleStateAction（）；}//发送龙状态处理，游戏逻辑处理

fooShowMsg（sMsg）；//判断是否为聊天信息

}

private var ActionState:Boolean=false；

////////////////////////////收到服务器的数据////////////////////////////////

public function fooShowMsg（msg:String）:void{//接收服务器的数据

var sTemp:String=msg_box.text；//保存聊天內容数据

if（ActionState==false）//判断龙状态是否改变

{msg_box.text=“收到”+msg+’ ’+sTemp；}//把聊天內容保存在聊天框上

else{ActionState=false；}

}

////////////////////////////发送数据到服务器//////////////////////////////

public function fooCommand（sMsg:String）:void{//发送数据到服务器

if（ip_text.length＞1）//判断是否对某用户聊天

{

sMsg=ip_text.text+':'+sMsg；//在聊天框上显示聊天内容}else{

sMsg=‘:’+sMsg；}//向所有在线用户发送聊天内容

var bMsg:ByteArray=new ByteArray（）；//新建一个ByteArray存放数据

bMsg.writeUTFBytes（sMsg+‘ ’）；//以utf－8格式传数据避免中文乱码

oSocket.writeBytes（bMsg）；//写入Socket的缓冲区

oSocket.flush（）；//调用flush方法发送信息

}

4 结束语

“龙曦”网页游戏使用了当今流行的Flex和Flash等技术。所以使用“龙曦”网页游戏，不需要下载客户端，操作简单，交互效果好。特别是在与服务器的通信中，客户端能够在不刷屏的状态下实现网页局部信息的更新，极大地提高了用户的体验。

[1]佚名.Asynchronous javaScript and XML[EB/OL].[2011].http://baike.baidu.com/view/4675799.htm.

[2]Wikipedia.网页游戏[EB/OL].[2011－03－25].http://en.wikipedia.org/wiki/Web_game.

[3]刘庆.Flex开发入门[EB/OL].[2009－01－07].http://www.ibm.com/developerworks/cn/web/wa－lo－flexdev/.

[4]姜天格.Flex3企业级Web应用系统设计与实现[M].北京：机械工业出版社，2008:60－65.

[5]杨占坡，杨铭，翁颖.Flex3 RIA开发详解与精深实践[M].北京：清华大学出版.2009:230－231.

[6]刘璐.基于Flex的网页游戏的研究与设计[D].北京：北京化工大学，2009.

[7]顾汉杰，沈国珍，郭彩虹.基于Flex的教育类网页游戏设计与实现[J].现代教育技术，2010，20（1）：65－68.GU Han-jie，SHEN Guo-zhen，GUO Cai-hong.An educational webgame design and realization based on Flex[J].Modern Educational Technology，2010，20（1）:65－68.

[8]邓丽，董玮.网络游戏服务器端研究与设计[J].软件导刊，2009，8（5）：135－137.DENG Li，DONG Wei.Research and design of network game server programming[J].Software Guide，2009，8（5）:135－137.

[9]王育文.网络游戏开发的灵魂——数据结构与算法[J].电脑报，2007（17）:63－65.WANG Yu-wen.The soul of the network game developmentdata structure and algorithms[J].Computer News，2007（17）:63－65.