结对编程 黄金点游戏

    一、实现功能：

    10个玩家同时游戏，系统根据规则计算出G值，并且给相应玩家分数，游戏可以进行多轮，由玩家自行控制，每一轮的分数都会累计下来除非重新开始

    二、 设计过程：

    最开始打算用b/s来做这个游戏，后台连接数据库，一个表用来记录玩家的用户名密码（登录形式），另一个来记录游戏信息。但是后来发现带有数据库

的b/s结构过于复杂，比如系统如何判定所有玩家都已经结束输入然后开始计算。对于一个双人项目反复登录多个用户在测试上也是个不小的负担。只要有

用户登录，就要在filter中设置过滤选项，保证没有登录的游客不管访问那个界面都会自动跳转到登陆界面，这对于双人项目来说也是个不小的工作量，所以

我们放弃了接入数据库，打算将游戏数据存到内存中，后台用java处理。于是着手搭建了springMVC框架

    在WEB-INF文件夹中配置好springMVC后出现了新的问题，js的json数组不能传到后台，我们认为是框架配置的问题，经过两天时间没有解决，所以也放弃了后台的java

利用前端完成了所有的功能，下图为之前写的后台java代码和玩家类

 

    关于框架配置的问题我会在团队项目之前解决的。

    最终版本

    游戏的全部功能在Input.js中实现

    三、功能展示：

    进入首页

    点击开始按钮进入游戏

    规定游戏共有10名玩家，每个玩家点击自己对应的按钮输入数值，所有人输入完毕后点击输入结束将数据提交给后台，点击查看结果按钮查看本轮游戏结果和每名玩家的积分

    输入完毕后会进行提示

 

    全部输入完毕点击“输入结束”按钮

    点击“查看结果”按钮

    查看玩家分数

    查看G值

    点击继续游戏按钮回到游戏界面

    多轮游戏之后

    四、服务器的配置

    我们使用的服务器为tomcat6.0.44版本，单击“window”菜单，选择下方的“Preferences”，找到Server下方的Tomcat，

单击右方的Add按钮，选择已经成功安装的Tomcat版本，单击Next，设置好tomcat的安装目录点击ok即完成安装

    虚拟路径的配置

    划线部分改为workspace中项目的webroot路径，该路径用auto代替，至此配置完成

    启动服务器

    

    启动成功

    五、编写过程

    前台模板借助bootstrap3.3.2，开始界面Start.jsp直接通过一个标签跳转游戏界面Input.jsp，所以不需要Start.js，

在Input.js中初始化了三个数组分别用来存储玩家输入的数值，输入数值跟G相差的绝对值，玩家的分数，玩家分数全部初

始化为0。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var mynum=new Array(10) var score=new Array(10) var res=new Array(10) var flag=0; res[0]=0; res[1]=0; res[2]=0; res[3]=0; res[4]=0; res[5]=0; res[6]=0; res[7]=0; res[8]=0; res[9]=0;

　　前台共有十个button，每一个button对应一个prom()函数，10个函数结构类似

?

1 2 3 4 5 6 7 8 9 10

<button type="button" class="btn btn-lg btn-primary" onClick="prom0()">Player_0</button>           <button type="button" class="btn btn-lg btn-primary" onClick="prom1()">Player_1</button>           <button type="button" class="btn btn-lg btn-primary" onClick="prom2()">Player_2</button>           <button type="button" class="btn btn-lg btn-primary" onClick="prom3()">Player_3</button>           <button type="button" class="btn btn-lg btn-primary" onClick="prom4()">Player_4</button><br><br>           <button type="button" class="btn btn-lg btn-primary" onClick="prom5()">Player_5</button>           <button type="button" class="btn btn-lg btn-primary" onClick="prom6()">Player_6</button>           <button type="button" class="btn btn-lg btn-primary" onClick="prom7()">Player_7</button>           <button type="button" class="btn btn-lg btn-primary" onClick="prom8()">Player_8</button>           <button type="button" class="btn btn-lg btn-primary" onClick="prom9()">Player_9</button>

　　输入的数如果不符合要求还会要求用户重新输入

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

function prom0() {  var number=prompt("Please enter your num","")       if (number<100 && number>0)     {     //alert(flag);     mynum[0]=number;     //document.write(mynum[flag]);     alert("your number is :"+mynum[0]);     }     else     {     alert("输入的数不符合要求")     prom0();     } }

　　每个玩家通过点击按钮将数值传递给后台的mynum[]数组，输入完毕后点击“输入结束”按钮，触发send()函数，计算出G的值，以下为send()的部分代码

第一个循环用来报错，检测未输入的玩家并提示，之后算出G值

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

for(var i=0;i<10;i++)//报错         if(!(mynum[i]>0&&mynum[i]<100))         {             alert("player_"+i+"未输入，请重试")             return 0;         }     var ave=0;     for(var i=0;i<10;i++)     {         ave=parseFloat(mynum[i])+parseFloat(ave);         //alert(ave);     }     //alert(ave);     ave=ave/i;     G=parseFloat(ave)*0.618;

　　因为javascript是一种弱语言，定义的var变量有的时候会被当成字符串，也就是说1+2=3有时候会被算成"1"+"2"="12"，所以在计算前要将变量类型进行规定

此处用到了parseFloat()函数。否则算出的结果会显示NaN，即代表非数字值的特殊值。

    计算完G值，用数组score[]存放mynum[]-G的绝对值，分别计算出最大值最小值，再通过一个新的for循环找出离G最远的玩家和离G最近的玩家，进行给分，用

res[]数组存放玩家的分数。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

for(var i=0;i<10;i++)     {         score[i]=parseFloat(mynum[i])-parseFloat(G);         if(score[i]<0)             score[i]=0-parseFloat(score[i]);     }     var max=score[0];     var min=score[0];     for(var i=1;i<10;i++)     {         if(max<score[i])             max=score[i];         if(min>score[i])             min=score[i];     }     for(var i=0;i<10;i++)     {         if(score[i]==max){             res[i]=parseInt(res[i])-2;}         if(score[i]==min){             res[i]=parseInt(res[i])+10;}     }

　　前台jsp由我修改，js代码由我和唐翔宜同学共同完成

    编写过程中和编写完成后出现的问题及解决方案请见唐翔宜同学的博客

    http://www.cnblogs.com/tangxiangyi/p/5357833.html

    代码已上传到coding