基于HTML5的手机实时游戏设计与实现设计.doc

《基于HTML5的手机实时游戏设计与实现设计.doc》由会员分享，可在线阅读，更多相关《基于HTML5的手机实时游戏设计与实现设计.doc（32页珍藏版）》请在沃文网上搜索。

1、中南财经政法大学2012届本科生毕业论文（设计）摘 要HTML5是下一代互联网的web标准，和以前的版本不同，HTML5并非仅仅用来表示Web 内容，它将使Web 进入一个成熟的应用平台，在这个平台上，视频、音频、图像和动画，以及同电脑的交互都被标准化。随着Adobe宣布停止Flash移动版开发，不少人预言HTML5的发展将给移动互联网产业带来革命性的深刻变化。作为新一代的网页语言，HTML5跨平台的支持得到不断增强，智能手机的迅速普及加上资费和网络速度的逐渐松绑，也为HTML5技术提供了良好的发展环境。HTML5“可以实现跨平台游戏编码移植”的特性使其成为移动游戏开发者新的选择。在国际上，

2、Zynga、SPILGAMES、Disney都已经在HTML5游戏方面进入了实践阶段，Google、APPLE， 微软也明确表示对HTML5的移动设备支持。可见， HTML5已成为游戏开发的重要趋势之一。本文通过对HTML5新特性的介绍结合具体的开发实例的设计与实现，以加深对HTML5的认识，掌握手机游戏开发的基本流程，并对遇到的开发问题做必要分析。就HTML5应用的研究开发提出了个人的看法并对HTML5手机游戏开发前景重点做出展望。本文的写作将分为四部分：第一部分将首先阐述本文的的研究目的和意义，国内外研究现状分析。第二部分主要是对本文用到的关键技术的介绍以及本文实例开发中的环境配置的方法。

3、第三部分为实例开发部分，在这里我们将利用HTML5的一些新特性结合nodejs的技术做一个简单的五子棋游戏，以加深对HTML5游戏开发的了解，并对当中遇到的问题进行分析与解决。第四部分是对本文写作的总结与展望。本文的创新点是利用最热门的HTML5技术结合nodejs的实时交互技术做一个手机实时游戏，通过对游戏的实现，更加清晰地阐述HTML5的优缺点，并且提出一些开发HTML5游戏时应该注意的问题和解决方法，以给后来者一些经验和教训。关键词：HTML5；nodejs；手机网络游戏；AbstractHTML5 is the next generation of Internet web stand

4、ards, and com in contrast with the previous version, HTML5 is not only used to represent Web content, it will enable the Web into a full-fledged application platform,in this platform, video, audio, images and animations, as well as interaction with the computer are standardized. As Adobe announced t

5、he end to support the Flash mobile version of the development, many people predicted the development of HTML5 mobile Internet industry will bring profound changes in the revolutionary. As a new generation of web language, HTML5 cross-platform support has been growing, the rapid adoption of smart pho

6、ne plus tariff and network speed gradually relaxed, and also provides a good environment for the development of HTML5 technology. HTML5 cross-platform game coding transplantation makes the new choice for mobile game developers. In the international arena, Zynga, SPILGAMES, Disney has been in HTML5 g

7、ame entered the practical stage, Google, APPLE, Microsoft also made it clear that the support of HTML5 mobile devices. Visible, HTML5 has become one of the important trend of development of the drama. In this paper, the introduction of new HTML5 features combined with the design and implementation o

8、f specific development instance, in order to deepen the understanding of HTML5, to master the basic flow of the mobile game development, and the problems encountered in development to make the necessary analysis.HTML5 applications research and development of a personal opinion and HTML5 mobile game

9、development prospects focus for Outlook. The writing of this paper will be divided into four parts: The purpose and significance of the first part will elaborate on this article, and the research situation. The second part introduces the key technologies used in this article as well as the developme

10、nt environment configuration. The third part is the instance of the development section, we will use some of the new features of HTML5 with nodejs technology to do a simple 331 games in order to deepen understanding of HTML5, we need to analyze and solve problems encountered. The fourth part is a su

11、mmary and outlook of this writing.The innovation of this paper is the use of the most popular HTML5 technology nodejs real-time interactive technology to do a real-time mobile phone games, and game, we will be more clearly explained the advantages and disadvantages of the HTML5, and we will propose

12、the development of HTML5 game should be noted that some of the problems and solutions, to give newcomers some experience and lessons learned.Key words: HTML5；nodejs；mobile phone network game；目录一、引言1（一）本选题的研究目的和意义1（二）国内外发展现状1（三）本选题的主要内容2二、相关技术及开发方法简介3（一）相关技术简介3（二）开发工具以及运行环境配置4三、实例开发6（一）五子棋游戏玩法设计和需求分析

13、6（二）概要设计7（三）详细设计与实现14（四）运行测试21四、总结与展望26五、参考文献27一、引言(一) 本选题的研究目的和意义随着Adobe宣布停止Flash移动版开发，HTML5成为不断被提及的热门话题，不少人预言HTML5的发展将给移动互联网产业带来革命性的深刻变化。对于手机游戏而言，HTML5的到来绝不仅仅是技术上的革新，更意味着广阔的发展空间以及自由、开放的未来。HTML5手机游戏基于网页和浏览器运行，不再一味依赖于狭窄封闭的手机应用商店，可以在网页上直接发布。在推广方式上，HTML5游戏依托于广阔而开放的互联网资源，可以结合传统互联网的推广模式，也可以通过网络社交平台合作，或者

14、创造新的推广模式。HTML5 是近十年来Web标准最巨大的飞跃，和以前的版本不同，HTML5并非仅仅用来表示Web 内容，它的使命是将Web 带入一个成熟的应用平台，在这个平台上，视频、音频、图像和动画，以及同电脑的交互都被标准化。尽管HTML5 的实现还有很长的路要走，但HTML5 正在改变Web。目前的互联网已经不仅仅是传统意义上面的互联网，所有的传统应用和模式正在向着更加移动和便捷发展，人们可能通过手机、平板电脑等各类移动设备来获取信息和使用更加丰富的应用，如物理位置定位信息等新的数据采集和多点触控、重力感应等新的交互方式的应用，未来必将也会改变人们生活的方方面面。本选题是基于HTML5

15、 做一个最佳实践，完成之前不可能使用WEB 技术来完成的功能，性能照比之前的技术体系要高出很多，而且有足够的前瞻性和创新性。(二) 国内外发展现状手机游戏开发是个新兴行业。手机游戏不仅开始逐步完善，创造更优质的体验，还代表着新兴技术。最早一些游戏在出厂前就固化在芯片中了，象Nokia的贪吃蛇就是一个最著名的例子。但由于用户不能自己安装新的游戏，所以它们后来逐渐变得不太流行了。差不多同时出现的还有短消息服务游戏和浏览器游戏，由于前者价格过于昂贵，很快就被淘汰了，对于浏览器游戏由于早期浏览器都是基于无线应用协议(WAP)，而WAP本质上是一个静态浏览载体，游戏的效果可想而知。最应该提到的是基于J2

16、ME和其它的解释语言的游戏，由于大部分的手机厂商都迫切希望Java手机推广应用，上千万的Java手机已经到了消费者的手中。它有比SMS或WAP更好控制的界面，允许使用子图形动画，并且可以通过无线网络连接到远程服务器。因为Java手机的普及，所以它后来成为目前最好的移动游戏开发环境。然而随着HTML5的出现，这个情形可能会发生改变，HTML5具有很大的技术优势，开发者开发一款游戏可以发布很多的平台，使得开发者的成本降低。开发者就类似于做一个网页，关键部分的适配会很少。如果将网页游戏看作一个网页的话，将这个网页适配到不同的浏览器要比重新开发一套客户端代码工作量和难度都要小得多。同时开发者也不需要掌

17、握更多的开发语言，只需要掌握HTML5和Javascript就可以了，而不用掌握Java、Objective-c、C+等等。(三) 本选题的主要内容1.使用HTML5 Canvas 来开发动画效果。Canvas是HTML5最重要的特性，Canvas可以用来进行绘制图形，绘制游戏的图案或者其他图形图案，允许使用脚本动态渲染点阵图像。简单来说，Canvas就是允许你在HTML5中，使用Javascript去绘制喜欢的任何图形，包括文字，图片、线、点、各种形状等。Canvas 使用的是Canvas 2D API去绘制图形，这个API功能十分强大，而且大部分的浏览器都支持 2D canvas 包括 O

18、pera, Firefox, Konqueror 和 Safari。本文将利用javascript对Canvas进行控制来显示游戏动画，通过对Canvas各种特性的尝试和应用，以加深对Canvas的理解和掌握，通过和flash等传统插件的对比，展现Canvas的优缺点，提出可改进的地方。2.使用HTML5 Audio 来实现控制声音。直到现在，仍然不存在一项旨在网页上播放音频的标准。今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio元素能够播放声音文件或者音频流。本文通过对a

19、udio标签的具体应用不仅能够最大的体现这个标签的功能，同时也希望能够更好的展现这个标签给我们编程带来的方便性。3.使用HTML5 WebSocket 进行实时数据传输。本文将利用WebSocket库Socket.io来实现浏览器与服务器的双向通讯。4.nodejs的使用。nodejs是基于服务端的javascript，本文将利用nodejs作为服务器端的编程工具。5.基于HTML5游戏的设计和实现。本文将采用面向对象的方法进行游戏设计。游戏的设计尽可能的应用HTML5的新特性。另外本文将只针对单机游戏的设计和编码。二、 相关技术及开发方法简介(一) 相关技术简介1.HTML5简介 HTML5

20、是HTML下一个的主要修订版本，现在仍处于发展阶段。目标是取代1999年所定订的HTML 4.01和XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。HTML5草案的前身名为

21、Web Applications 1.0。于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案已公布,在2010年9月正式向公众推荐。HTML5 是近十年来 Web 标准最巨大的飞跃。和以前的版本不同，HTML 5 并非仅仅用来表示 Web 内容，它的使命是将 Web 带入一个成熟的应用平台，在这个平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。目前Firefox、Chrome、Opera、Safari（版本4以上）、Internet Explorer 9已支持HTML5技术。HTML5提供了一些新的元素和属

22、性，例如（网站导航块）和。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如和标记。一些过时的HTML4标记将被取消。其中包括纯粹显示效果的标记，如和，它们已经被CSS取代。除了原先的DOM接口，HTML5增加了更多API,如：(1) 实时二维绘图。Canvas API：有关动态产出与渲染图形、图表、图像和动画的API。(2) 定时媒体播放HTML5 音频与视频：HTML5 里新增的元素，它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API，而无需安装任何插件。(3) 通信网络Communication AP

23、Is：构建实时和跨源（cross-origin）通信的两大基础： 跨文档通信（Cross Document Messaging）与XMLHttpRequest Level2。(4) Geolocation API：用户可共享地理位置，并在Web 应用的协助下享用位置感知服务（location-aware services）。(5) Web SQL Database，一个本地的SQL 数据库。(6) WebSocket，一个基于浏览器的socket（一种网络协议，支持所有的互联网通信），支持实时性的数据传输。(7) 其他：离线存储数据库（离线网络应用程序）、编辑、拖放等。2.nodejs简介No

24、de是一个Javascript运行环境(runtime)。实际上它是对GoogleV8引擎（应用于Google Chrome浏览器)进行了封装。V8引擎执行Javascript的速度非常快，性能非常好。Node对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。例如，在服务器环境中，处理二进制数据通常是必不可少的，但Javascript对此支持不足，因此，V8.Node增加了Buffer类，方便并且高效地 处理二进制数据。因此，Node不仅仅简单的使用了V8,还对其进行了优化，使其在各环境下更加给力。V8引擎本身使用了一些最新的编译技术。这使得用Javascrip

25、t这类高级语言编写出来的代码与用C这类高级语言写出来的代码性能相差无几，却节省了开发成本。对性能的苛求是Node的一个关键因素。 Javascript是一个事件驱动语言，Node利用了这个优点，编写出可扩展性高的服务器。Node采用了一个称为“事件循环(event loop）”的架构，使得编写可扩展性高的服务器变得既容易又安全。提高服务器性能的技巧有多种多样。Node选择了一种既能提高性能，又能减低开发复杂度的架构，这是一个非常重要的特性。并发编程通常很复杂且布满地雷。Node绕过了这些，但仍提供很好的性能。Node采用一系列“非阻塞”库来支持事件循环的方式。本质上就是为文件系统、数据库之类的

26、资源提供接口。当你向文件系统发送一个请求时，无需等待硬盘（寻址并检索文件），硬盘准备好的时候非阻塞接口会通知Node。该模型以可扩展的方式简化了对慢资源的访问， 直观，易懂。尤其是对于熟悉onmouseover、onclick等DOM事件的用户，更有一种似曾相识的感觉。虽然让Javascript运行于服务器端不是Node的独特之处，但却是其一强大功能。浏览器环境限制了我们选择编程语言的自由。任何服务器与日益复杂的浏览器客户端应用程序间共享代码的愿望只能通过Javascript来实现。虽然还存在其他一些支持Javascript在服务器端 运行的平台，但因为上述特性，Node发展迅猛，已经成为事实

27、上的平台。在Node启动的很短时间内，社区就已经贡献了大量的扩展库（模块）。其中很多是连接数据库或是其他软件的驱动，但还有很多是凭他们的实力制作出来的非常有用的软件。node机制的根本原理是多利用CPU、高速缓存处理相应访问，减少比如像硬盘到内存，或到高速缓存中的检索读取的等待时间。(二) 开发工具以及运行环境配置1.web开发工具Aptana StudioAptana Studio 是一个集成式的Web应用程序开发环境，它不仅可以作为独立的程序运行，而且还可以作为Eclipse插件使用。其最广为人知的是它非常强悍的JavaScript编辑器和调试器。AptanaStudio可以支持多种AJA

28、X和JavaScript工具箱，包括JavaScript编辑和调试。此外，Aptana还吸收了Radrails项目，添加了非常强大的RubyonRails支持。随着苹果公司iPhone手机的发布，Aptana也推出了功能完备的iPhone集成开发功能，在Adobe公司的RIA产品AIR推出不久之后，Aptana就支持了AIR的开发环境。如今AptanaStudio支持如下几大方面的开发功能：（1）智能代码完成：相对于其他类型的语言，JavaScript 的智能代码完成部分功能往往较弱，总是给人提示不全的感觉。Aptana Studio 提供的智能代码完成功能不仅涵盖 JavaScript 语法

29、，还包括HTML 和 CSS 。（2）浏览器兼容性提示：对浏览器前端开发人员而言，自己开发出来的脚本是否能跨浏览器运行无疑是首要考虑的问题。Aptana Studio 深谙这一需求，在开发阶段便尽量扼杀浏览器兼容性隐患：在 JavaScript 的每一个属性或方法提示之后，均会跟随该属性或方法适用于的浏览器类型。（3）代码错误提示： Aptana Studio 的代码错误提示非常准确，可以用“一个都不能少”来形容。（4）文档结构树：很多开发人员偏爱 Firefox 的原因在于，Firefox 内置了一些有利于开发人员的功能，如错误控制台（Error Console）、DOM 查看器（DOM I

30、nspector）。Aptana Studio 也提供了类似 DOM 查看器的工具来帮助分析页面文档的层次结构。2.Javascrpt框架JqueryJquery是继prototype之后又一个优秀的Javascrpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有

31、许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。目前jQuery最新版本添加了对HTML5的支持，发布的版本号为jQuery1.7。jQuery 1.7 具有以下几大亮点：新的事件 API：.on ()和 .off ()；委托事件性能改进；在 IE 6/7/8中的更好地支持 HTML5；切换动画更加直观；异步模块定义（AMD）：现在在 jQuery 中已支持 AMD API；jQuery.Deferred 对象功能扩展；新的 jQuery.isNumeric ()方法。3.调试工具C

32、hrome 浏览器Chrome 浏览器是一款设计简洁、技术先进的浏览器，可以使用户更快速、安全且轻松地使用网络，该浏览器是基于其他开放原始码软件所撰写，包括WebKit和Mozilla，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。目前市场上的浏览器虽然品牌众多，但是其都是根据几大开源内核来构建的，主要可以分为两大类：IE 系列和非IE 系列。Chrome浏览器属于非IE系列，与IE和Mozilla等浏览器相比，Chrome浏览器在Javascript执行速度上最快，对CSS的渲染也是最快的。Chrome浏览器能够很好地支持HTML5，同时又是功能强大的调试工具，基于以上这

33、么多优点我们选择Chrome浏览器作为调试工具。4.环境配置（1）安装nodejs，到nodejs官方下载windows版本，根据提示安装。（2）安装npm，npm是nodejs的模块管理工具。要安装npm，首先需要安装git工具客户端，安装完客户端后，打开命令行工具（CMD），执行以下命令： git clone -recursive git:/ cd npm node cli.js install npm -gf 在执行这段代码之前，请确保node.exe是通过node.msi的方式安装的，或者在PATH环境变量中。这段命令也会将npm加入到PATH环境变量中去，之后可以随处执行npm命令。

34、（3）通过npm，我们可以安装所需的各种模块，包括mysql、socket.io、express等，安装的方法是打开命令行工具（CMD），执行以下命令： nmp install mysql、socket.io、express。三、 实例开发(一) 五子棋游戏玩法设计和需求分析1.游戏玩法设计用户打开浏览器，输入昵称后就可以选择要进入的房间。用户可以任意选择一个座位进入游戏，然后选择是否准备开始，如果两个在同一个房间的用户都准备好了，游戏开始。游戏由第一个进入房间的用户开始，游戏开始后每个用户都轮流下子，一黑一白。如果有一方的五子连珠就算这一方赢。2.需求分析（1）游戏用户。登录游戏网站的用户都

35、能够自由选择房间，自主选择进入和退出，自主选择下子的位置，能够和对手进行聊天和看到对手的基本信息，同时也可以看到自己的得分。（2）用例分析如图1： 图1 用例分析图(二) 概要设计1.程序总体功能设计（1）程序功能模块分析服务器端。负责数据的集中管理和数据分发，还有和数据库的交互。客户端。负责用户界面操作、游戏界面绘制、实现游戏玩法、数据的发送和接收等功能。如图2为游戏总体功能模块图 图2五子棋游戏功能模块图游戏棋盘控制分析五子棋的棋盘采用15*15的矩阵图，棋盘图应该能够很容易被修改，游戏玩家在棋盘界面生成和改变时能够共享整个棋盘数据。游戏声音的控制分析声音的控制应根据游戏的要求，声音能够流

36、畅的播放，并且不同的游戏操作应该对应不同的声音，游戏玩家应该还能够选择是否播放声音。游戏连网分析游戏玩家通过浏览器进入到游戏页面，两个游戏玩家通过网络进行五子棋游戏对战，玩家应该都能够实时看到棋盘的变化，且变化是一致的。为了实现这种功能，本文将采用HTML5 WebSocket技术实现客户端与服务器端的实时通讯。HTML5 WebSocket 设计出来的目的就是要取代原先网络实时通讯采用的轮询和 Comet 技术，使客户端浏览器具备像 C/S 架构下桌面系统的实时通讯能力。 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以

37、通过 TCP 连接直接交换数据。因为 WebSocket 连接本质上就是一个 TCP 连接，所以在数据传输的稳定性和数据传输量的大小方面，和轮询以及 Comet 技术比较，具有很大的性能优势。Web 开发人员可以非常方便地使用 WebSocket 构建实时 web 应用。另外本文将采用客户端-服务器架构（Client-Server，C/S）。客户端只把信息传送到服务器上，然后服务器再把信息传给相应的客户端。服务器是网络的核心，而客户机是网络的基础，客户机依靠服务器获得所需要的网络资源，而服务器为客户机提供网络必须的资源。（2）程序流程设计根据整个游戏框架的总体设计，主要分为四个独立的流程：客户

38、端用户登录注册部分。游戏玩家用浏览器浏览游戏页面首先应先登录，如果已有账号，可以直接登录，如果未有账号，则需要用户先注册。用户登录后直接进入游戏大厅。如图3为用户登录注册流程图：图3 登录注册程序流程图客户端游戏界面控制部分。客户端游戏界面的控制主要是棋盘界面的控制，整个棋盘界面将会在一个Canvas中呈现。游戏玩家的每一次游戏动作将会触发客户端程序对Canvas 重新绘制，以呈现给用户最新的棋盘界面，并且同时向服务器端发送数据。游戏开始时，棋盘会自动进行初始化，游戏结束时棋盘会再次进行初始化。如图4为客户端界面控制流程图： 图4 客户端游戏界面控制流程图客户端用户聊天部分。用户可以与对手实时

39、聊天，如图5为客户端聊天部分流程图：图5 客户端用户聊天部分程序流程图服务器端流程。服务器端主要作用是接收数据、处理数据、与数据库交互，向客户端返回更新数据。具体流程如图6：图6服务器端流程程序流程图2.模块和对应的方法本文主要分为服务端和客户端两大模块。（1）服务器端模块服务器模块包括调用nodejs，调用HTML5 WebSocket的集成包socket.io，与后台数据库交互等构建基础应用的模块。通过具体的方法与客户端进行实时连接，数据接收与分发。以下为服务器端所包含的具体方法。调用node.js调用socket.io的方法： this.SetConfig = function(cfg)

40、/socket.io配置io.sockets.on(connection, function (socket) );调用数据库的方法：exports.user=function()this.createDB=function()/创建数据库this.insert=function(user)/插入this.select=function(user)/查询this.dele=function(user)/删除this.update=function(user)/更新服务启动方法：app.SetConfig();app.Startup();（2）客户端模块客户端模块主要负责用户操作、游戏界面控制、

41、实现游戏玩法、接收和发送数据等功能。以下为客户端所包含的具体方法。用户操作方法：This.register=function(user)/用户注册this.login= function(user)/用户登录this.joinRoom = function(roomIdx, posIdx) /加入房间this.sendAllMsg = function(body) /向所有用户发送消息this.sendToMsg= function(to, body) /向指定用户发送消息this.sendRoomMsg = function(body) /向房间内发送消息this.leaveRoom fun

42、ction(roomIdx) /离开房间this.ready =function()/准备this.drawChess = function(color, x, y) /落子整个游戏界面控制方法，根据具体的事件响应，采用Jquery1.7的javascript框架来控制游戏界面，具体方法如下：ImageLoader=function(a)/图片预加载$(#loginBtn).click(function()/登陆$(#room-box .player).live(click, function()/加入房间$(#msg-button).click(function()/发送消息$(#room-

43、msg-button).click(function()/发送消息到房间$(#tag a).click(function()/切换窗口$(div.room_chess).click(function(ev) )/落子$(#game_ready).click(function()/准备$(#game_leave).click(function()/退出房间function initUserList(data) /初始化用户列表function initRoomList(data) /初始化房间列表function initRoom(player1, player2) /初始化房间function

44、 updateRoom(posIdx, player) /更新房间人员function removeRoom(posIdx) /从本房间移除另一个成员连接服务器方法,主要有connect()方法声音控制类，有基本的声音控制方法，播放声音play()和暂停播放pause()等方法（三） 详细设计与实现1.服务器端设计（1）服务器端运行环境首先需安装windows 版的node.js，然后安装nodej的管理包npm，接着利用npm安装游戏所需的各种nodejs插件，包括socket.io、mysql、session等。除了nodejs环境外，我们还需要一个web发布平台，这里我们选择aptana

45、自带Web 页面发布程序。（2）服务器端设计服务器最基本的功能是保证和客户端交互的实时性，既能实时接收客户端数据，又能实时向客户端发送数据。客户端与服务器端要实时交互的数据主要有棋盘更新数据和聊天数据。聊天数据都是由用户在客户端输入，然后传到服务器，最后由服务器传到对应客户端，服务器只是起到一个转发功能，不用对数据的处理。棋盘的更新数据则需要服务器端进行处理。服务器端需要判断客户端落子的合法性以及判断游戏是否结束，然后再向相应的客户端返回数据。棋盘数据用一个三维数组m_RoomDataroomIdxxy表示，roomIdx表示房间号，x和y分别表示棋盘上的x轴和y轴上的坐标，m_RoomDat

46、aroomIdxxy的值为1或者2,1表示黑棋，2表示白棋。用户聊天数据用msg type : “”,id : “”,nickname : “”,body : “”表示。服务器端用socket.io中的socket.on（）和socket.emit（）方法来接收和发送数据。以下为服务器端接收和发送数据部分的关键代码：OnDrawChess = function(data)var sid = this.id;var roomIdx = m_Connectionssid.roomIdx;if(m_RoomsroomIdx0 & m_RoomsroomIdx1 & m_Connectionsm_RoomsroomIdx0 & m_Connectionsm_RoomsroomIdx1 & m_Connectionsm_RoomsroomIdx0.status = STAT_START &m_Connectionsm_RoomsroomIdx1.status = STAT_START & checkValidChess(roomIdx, data.x, data.y) = true)if(checkGameOver(roomIdx, data.x, data.y) = true) /结束游戏?var first = m_R