1、实现功能:javascript
10个玩家同时游戏,系统根据规则计算出G值,而且给相应玩家分数,游戏能够进行多轮,由玩家自行控制,每一轮的分数都会累计下来除非从新开始html
2、 设计过程:前端
最开始打算用b/s来作这个游戏,后台链接数据库,一个表用来记录玩家的用户名密码(登陆形式),另外一个来记录游戏信息。可是后来发现带有数据库java
的b/s结构过于复杂,好比系统如何断定全部玩家都已经结束输入而后开始计算。对于一个双人项目反复登陆多个用户在测试上也是个不小的负担。只要有web
用户登陆,就要在filter中设置过滤选项,保证没有登陆的游客无论访问那个界面都会自动跳转到登录界面,这对于双人项目来讲也是个不小的工做量,因此spring
咱们放弃了接入数据库,打算将游戏数据存到内存中,后台用java处理。因而着手搭建了springMVC框架数据库
在WEB-INF文件夹中配置好springMVC后出现了新的问题,js的json数组不能传到后台,咱们认为是框架配置的问题,通过两天时间没有解决,因此也放弃了后台的javajson
利用前端完成了全部的功能,下图为以前写的后台java代码和玩家类bootstrap
关于框架配置的问题我会在团队项目以前解决的。数组
最终版本
游戏的所有功能在Input.js中实现
3、功能展现:
进入首页
点击开始按钮进入游戏
规定游戏共有10名玩家,每一个玩家点击本身对应的按钮输入数值,全部人输入完毕后点击输入结束将数据提交给后台,点击查看结果按钮查看本轮游戏结果和每名玩家的积分
输入完毕后会进行提示
所有输入完毕点击“输入结束”按钮
点击“查看结果”按钮
查看玩家分数
查看G值
点击继续游戏按钮回到游戏界面
多轮游戏以后
4、服务器的配置
咱们使用的服务器为tomcat6.0.44版本,单击“window”菜单,选择下方的“Preferences”,找到Server下方的Tomcat,
单击右方的Add按钮,选择已经成功安装的Tomcat版本,单击Next,设置好tomcat的安装目录点击ok即完成安装
虚拟路径的配置
划线部分改成workspace中项目的webroot路径,该路径用auto代替,至此配置完成
启动服务器
启动成功
5、编写过程
前台模板借助bootstrap3.3.2,开始界面Start.jsp直接经过一个标签跳转游戏界面Input.jsp,因此不须要Start.js,
在Input.js中初始化了三个数组分别用来存储玩家输入的数值,输入数值跟G相差的绝对值,玩家的分数,玩家分数所有初
始化为0。
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个函数结构相似
<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>
输入的数若是不符合要求还会要求用户从新输入
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值
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[]数组存放玩家的分数。
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