基于Restful+JQuery的五子棋对战游戏开发

一、实验设计方案

实验名称：快乐五子棋项目

1、实验目的：

1)通过本学期所学的知识完成期末综合大作业，实现五子棋对战项目的开发，包括四个部分：用户的注册、登录、个人信息、用户管理、登出；五子棋游戏棋局的创建与对弈；玩家观战；对战棋局的录像播放。

2)利用jQuery编写网页前端，用restfuleasy框架进行后台处理，使用DM数据库储存数据，进行前后台之间的数据交互。

3)熟练掌握所学的知识，前后端的交互、restful技术和jquery、ajax、websocket通信，java知识和数据库知识，以及提升开发过程中的团队合作本领。

2、实验场地及仪器、设备和材料：

实验场地：宿舍、教室、图书馆
实验仪器：个人电脑和教学电脑
实验材料：gobang综合项目框架、restfuleasy、银河麒麟（kylin）系统、
国产数据库达梦、Tomcat、eclipse、Firefox、google浏览器

3、实验思路（实验内容、数据处理方法(UML图、ER图)及实验步骤等）：

(1) 第一阶段

3.1.1、实验内容：注册登录、个人信息管理、用户管理、用户登出功能的设计与实现

3.1.2、实验步骤：
1）注册：
当新用户点击“我要注册”按钮会弹出对应的注册界面，用户填写相应的个人信息，前台会对信息的完整性进行验证，校验无误之后会向后台WuziqiAPI资源类的Regiser资源方法提交数据，同时提交的数据会经过md5加密算法进行加密，数据中的密码都是经过md5加密算法加密后得到的。后台API再次进行信息必要性的校验，通过EM类的查询语句查看数据库中是否存在该用户名，若存在的话，则返回信息提示前台该用户名已经存在，不能注册；否则将返回错误提醒的窗口。

2）登录：
用户填写用户名和密码，前台向后台WuziqiAPI资源类的Login资源方法提交数据，后台API向数据库查询用户名是否存在，密码是否正确，如果用户名和密码都正确，将用户信息写入用户的session中，同时将登录状态设置为已登录，否则将出错消息存入对象，返回错误提示。

3）用户管理：
在用户登录成功之后，将会进行用户权限是否为管理员，从session中获取到管理员属性的值，若为普通用户，则通过权限控制，使得该用户没有权限进行访问管理用户的窗口。否则，若为管理员用户，则可以在用户信息管理界面，通过List()资源方法请求用户信息数据，看到所有用户的信息。同时，管理员也可以对用户信息进行修改，修改完成后向后台WuziqiAPI资源类的update资源方法提交数据，检查前台提交的数据内容，如果密码不一致，则在前台进行错误提示，此时也应当服从注册时的密码校验规范。用户不得变更用户名称内容。后台将从session中重新获取并填充用户对象的相关属性，从后台确保此项的安全性，并通过EM类更新此用户的信息。

4）个人信息管理：
用户通过点击用户管理按钮，在个人账号信息管理界面，修改完成后向后台WuziqiAPI资源类的update资源方法提交数据，检查前台提交的数据内容，如果密码不一致，则在前台进行错误提示，此时也应当服从注册时的密码校验规范。用户不得变更用户名称内容。后台将从session中重新获取并填充用户对象的相关属性，从后台确保此项的安全性，并通过EM类更新此用户的信息。

5）用户登出：
用户退出登录之后，将会跳转到登录的界面，同时将session中的值进行销毁，并将当前登录状态设置为未登录。

3.1.3、类图：

3.1.4、用例图：

3.1.5、主要时序图：




(2) 第二阶段
3.2.1、实验内容：创建棋局、邀请玩家、棋局对弈功能的设计与实现
3.2.2、实验步骤：
1）创建棋局：
设计并实现一个界面，用来创建棋局，在主页放置合适大小的div并且填充背景图片，绑定一个触发事件，用户需要先填写单步时间和累计时间，若为空则无法创建；填写成功后，可以成功创建一个棋局。其中的实现原理为设置一个隐藏的模板，每当要当创建一个新的棋局时，克隆模块并且添加相应的信息。当棋局创建完成后，可以显示当前的用户信息以及右侧的用户。搜索用户，若其在线，则可以成功发出邀请，这里需要用到websocket的通信实现原理。同时，在窗口栏，会显示邀请、踢出、开始的三个按钮，点击开始按钮，则会实现两个客户端与服务器之间的交互，对战开始。

2）邀请玩家：
在新建棋局之后，用户可以点击邀请的按钮，在界面最右侧则会出现好友列表，若用户不在线，则无法搜索到；若用户在线，则可以成功搜索，单击邀请按钮，我们可以发出邀请，当对面同意后，在棋局界面信息会出现玩家的信息；如果对方不同意的话，则会提示对方拒绝了你的邀请。当邀请成功后，对手的信息将出现在对局的右侧，以及单手时长和累计时长，此时对局信息通过EM类写入数据库，当要选择踢出对手的时候，前台将调用js中的方法，清空右侧的对手数据恢复默认的状态，此时DM数据库中的信息也将会进行更新。

3）棋局对弈：
在棋局对战的界面中，用户选择开始按钮后，绑定一个触发事件，调用对应的API方法，并且需出现棋盘、两侧用户的信息、单手计时和单手累计时长。用户落子的信息通过将棋子的位置、棋子的时长转化为JSON格式一并传入数据库中进行存储。当某一方单手的限时为0的时候，或者执棋的那一方落子则触发改变执棋的那一方的js方法，当单手累计时长剩余为0的时候，或者当出现同一行、列或者对角线五颗子连续的情况，则判定失败，同时每一句的对战结果需要写入DM数据库。同时，在棋局对弈的过程中，可能出现悔棋、求和、认输的三种情况。若某一方认输，则将该局的winner设置为另一方，保存棋局落子情况，棋局结束，弹出提示信息。若某一方求和，需要另外一方发出消息栏提示，只有当确定的时候，才为平局，并保存结果到DM数据库中。若某一方想悔棋的话，当对方同意后，则回退到上一步的落子状态，同时DM数据库中的数据也需要发生相应的改变。

3.2.3、活动图：


3.2.4、主要时序图：

(3) 第三阶段
3.3.1、实验内容：观棋功能的设计与实现
3.3.2、实验步骤：略

(4)第四阶段
3.4.1、实验内容：录像播放功能的设计与实现
3.4.2、实验步骤：略

二、实验结果与分析

1、实验现象、数据及结果

(1) 第一阶段

1）注册：当用户点击注册的时候，会弹出注册的信息窗口，里面显示了注册的各种信息（用户名、账号、密码、确认密码以及性别）。当用户填写完这些信息后进行提交时，若有选项栏为空，则弹出不能为空的提示；若账号已注册过，则弹出已注册的提示；以及密码一致性的校验。当填写的各项信息符合验证的要求时，显示用户注册成功。具体界面如下：




2)登录：当用户点击登录的时候，若有选项栏为空，则弹出不能为空的提示；可以检测用户输入的账号或者密码是否对应数据库里的信息；若用户输入的账号和密码均正确的时候，则显示登录成功。当用户登录棋局后，可以看到自己的个人信息，以及自己对应的权限。具体界面如下：

3）用户管理：当点击用户管理的时候，会先判断用户是否为管理员，若不为管理员，则提示用户没有相应的权限；若为管理员的话，后台会通过数据库取到数据库中所有的user表的信息，在前台界面中会显示所有的用户信息，包括管理员在内。管理员可以对任意用户的个人信息，但是无法看到用户个人的密码。管理员可以对任意一个用户的个人信息来进行修改，包括头像的上传、编辑信息、更改密码、删除用户。具体界面如下：

4）个人信息管理：当用户点击个人信息的时候，界面会显示当前这个用户的个人信息，包括用户的昵称、用户名称、密码、性别等个人信息。具体界面如下：

在个人信息栏中除了显示当前的个人信息，同时还应该有改密、编辑、头像的按钮，通过点击改密，实现对用户个人密码的修改，更改密码的时候需要填写两次密码，若第二次的密码与第一次的密码不一致，则会显示密码不一致的错误；如果密码一致的话，则会提示修改成功。具体界面如下：

通过编辑按钮，可以实现对个人信息的管理，进行个人信息的修改，可以修改用户的昵称、和性别，但用户的登录名不能进行修改。单击完成后，则可以实现对相关信息的修改，具体的界面如下：

通过头像按钮，用户可以修改自己的头像，当用户点击头像的按钮时，跳转到更改头像的窗口栏，然后用户可以选择一张照片，进行上传，上传成功后用户可以看到新头像，完成头像的修改。具体的界面如下：

5）用户登出：
当用户点击退出的时候，可以看到用户返回到登录窗口，此时其他所有需要登录的功能均失效。具体的界面如下：

(2) 第二阶段
1）创建棋局：
当用户成功登录后，可以点击我的游戏，进行创建新的游戏。用户可以设置单手时长和单手累计时长，来创建游戏。创建完成后，可以生成一个棋局信息的界面，包括玩家的头像、玩家的昵称、性别、等级、单手限时、所剩时长。具体的界面如下：

同时，在棋局界面还应包括，邀请用户、踢出用户和开始对局的功能，点击邀请按钮，可以完成对其他用户的邀请；点击踢出按钮，可以踢出当前用户，重新邀请其他玩家，同时对方玩家能够显示；点击开始的按钮，可以开始一个新的对局。具体的界面如下：

4）邀请玩家：
在新建棋局之后，用户可以点击邀请的按钮，在界面最右侧则会出现好友列表，若用户不在线，则无法搜索到；若用户在线，则可以成功搜索，单击邀请按钮，我们可以发出邀请，当对面同意后，在棋局界面信息会出现玩家的信息；如果对方不同意的话，则会提示对方拒绝了你的邀请。具体界面如下：

5）棋局对弈：
在点击开始按钮，创建完一个新的棋局之后，可以进入游戏界面，游戏界面中的信息与棋盘信息界面中的会保持一致，在两边还增加了定时器的功能，单手的限时与单手累积的时长进行时长倒计。同时，在棋局界面，还要提供认输、平局和悔棋的按钮，当点击认输的时候游戏结束，另外一方获胜；当点击平局的时候，可以申请平局，等待对方同意申请；当点击悔棋的时候，向对方发出悔棋申请的要求；如果成功，则上一步的棋子消失。具体的界面如下：

(3) 第三阶段
当用户点击我要观战的按钮时，系统会显示当前可以观看的棋局，并进行展示，在窗口栏会显示棋局的信息；在下方点击观战按钮，此时会开启观战，出现该棋局的详情，包括左右的用户个人信息、单手限时等，窗口等同于之前的对战按钮，只是不提供悔棋、认输、求和功能。同时，在观战过程中，棋局的交互应当正常显示。若观战直到对局结束的时候，则会提示对局结束。具体的界面如下：

(4) 第四阶段
当用户点击我的录像的按钮时，系统会显示当前存在的录像及其信息，可以看到刚刚结束的对局信息，进入录像，此时窗口栏会弹出棋局的界面，显示对局开始。录像需要具有四个功能，分别为减速、暂停、加速和退出。用户点击加速、减速的过程中，可以显示当前的速度；点击暂停的时候，会进行暂停，再次点击的话，会继续播放录像；点击退出的时候，会退出录像。具体界面如下：

图太多了，我就没都放上去了。

有什么问题的可以私信我，觉得有帮助的话麻烦给个三连谢谢大家~